GTmetrix complains of un-optimized images in responsive design

Clash Royale CLAN TAG#URR8PPP

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
1
down vote

favorite

The website GTmetrix is giving me low score on "Optimize images" for the following reason:

On my main page I have 4 columns with images. Each column takes 25% of the screen resolution so on my 1920x1080px monitor, each image has width of 463px. However, when the user is viewing the main page on a device with resolution between 600px and 1200px, I only show 2 columns instead of 4 which makes the images bigger in width compared to when I have 4 columns (when close to 1200px). When I'm displaying 2 images on 1199px browser width, each image has width of 576px. Now here lies the problem.

If I were to use 576px natural image size, GTmetrix would say "Optimize the following images to reduce their size by X" because I'd be using 576px width natural image but when I have 4 columns, the max size I'd need is 463px.

If I were to have the natural image in 463px, the images that are displayed when using 2 columns would be streched to 576px which will reduce the quality.

Now I can't figure out how to satisfy both sides.

html css images responsive-webdesign gtmetrix

share|improve this question

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

asked 4 hours ago

Bobimaru

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

up vote
1
down vote

favorite

The website GTmetrix is giving me low score on "Optimize images" for the following reason:

On my main page I have 4 columns with images. Each column takes 25% of the screen resolution so on my 1920x1080px monitor, each image has width of 463px. However, when the user is viewing the main page on a device with resolution between 600px and 1200px, I only show 2 columns instead of 4 which makes the images bigger in width compared to when I have 4 columns (when close to 1200px). When I'm displaying 2 images on 1199px browser width, each image has width of 576px. Now here lies the problem.

If I were to use 576px natural image size, GTmetrix would say "Optimize the following images to reduce their size by X" because I'd be using 576px width natural image but when I have 4 columns, the max size I'd need is 463px.

If I were to have the natural image in 463px, the images that are displayed when using 2 columns would be streched to 576px which will reduce the quality.

Now I can't figure out how to satisfy both sides.

html css images responsive-webdesign gtmetrix

share|improve this question

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

asked 4 hours ago

Bobimaru

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

up vote
1
down vote

favorite

up vote
1
down vote

favorite

The website GTmetrix is giving me low score on "Optimize images" for the following reason:

On my main page I have 4 columns with images. Each column takes 25% of the screen resolution so on my 1920x1080px monitor, each image has width of 463px. However, when the user is viewing the main page on a device with resolution between 600px and 1200px, I only show 2 columns instead of 4 which makes the images bigger in width compared to when I have 4 columns (when close to 1200px). When I'm displaying 2 images on 1199px browser width, each image has width of 576px. Now here lies the problem.

If I were to use 576px natural image size, GTmetrix would say "Optimize the following images to reduce their size by X" because I'd be using 576px width natural image but when I have 4 columns, the max size I'd need is 463px.

If I were to have the natural image in 463px, the images that are displayed when using 2 columns would be streched to 576px which will reduce the quality.

Now I can't figure out how to satisfy both sides.

html css images responsive-webdesign gtmetrix

share|improve this question

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

asked 4 hours ago

Bobimaru

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

The website GTmetrix is giving me low score on "Optimize images" for the following reason:

On my main page I have 4 columns with images. Each column takes 25% of the screen resolution so on my 1920x1080px monitor, each image has width of 463px. However, when the user is viewing the main page on a device with resolution between 600px and 1200px, I only show 2 columns instead of 4 which makes the images bigger in width compared to when I have 4 columns (when close to 1200px). When I'm displaying 2 images on 1199px browser width, each image has width of 576px. Now here lies the problem.

If I were to use 576px natural image size, GTmetrix would say "Optimize the following images to reduce their size by X" because I'd be using 576px width natural image but when I have 4 columns, the max size I'd need is 463px.

If I were to have the natural image in 463px, the images that are displayed when using 2 columns would be streched to 576px which will reduce the quality.

Now I can't figure out how to satisfy both sides.

html css images responsive-webdesign gtmetrix

html css images responsive-webdesign gtmetrix

share|improve this question

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

asked 4 hours ago

Bobimaru

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

asked 4 hours ago

Bobimaru

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

share|improve this question

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

edited 11 mins ago

Stephen Ostermiller♦

65.6k1388237

65.6k1388237

asked 4 hours ago

Bobimaru

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked 4 hours ago

Bobimaru

1083

asked 4 hours ago

Bobimaru

1083

1083

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

New contributor

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Bobimaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

up vote
2
down vote



accepted

The best way to optimize page performance yet serve high-res images to high-dpi clients is to use the img srcset HTML attribute, like this:

<img
 srcset="
 /img/image4x.jpg 4x,
 /img/image3x.jpg 3x,
 /img/image2x.jpg 2x,
 /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

In this example, the larger multipliers link to images that are 2x, 3x, and 4x as big as the default size. Modern browsers are smart enough to automatically pick the larger image if they are running on a high-dpi display.

You can even use the sizes attribute to hint to the browser which image is best for different screen sizes.

More info:

1. https://html.com/attributes/img-srcset/


2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

share|improve this answer

answered 34 mins ago

Maximillian Laumeister

1,404419

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "45"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

Bobimaru is a new contributor. Be nice, and check out our Code of Conduct.

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwebmasters.stackexchange.com%2fquestions%2f118844%2fgtmetrix-complains-of-un-optimized-images-in-responsive-design%23new-answer', 'question_page');

);

Post as a guest

Name Email

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
2
down vote



accepted

The best way to optimize page performance yet serve high-res images to high-dpi clients is to use the img srcset HTML attribute, like this:

<img
 srcset="
 /img/image4x.jpg 4x,
 /img/image3x.jpg 3x,
 /img/image2x.jpg 2x,
 /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

In this example, the larger multipliers link to images that are 2x, 3x, and 4x as big as the default size. Modern browsers are smart enough to automatically pick the larger image if they are running on a high-dpi display.

You can even use the sizes attribute to hint to the browser which image is best for different screen sizes.

More info:

1. https://html.com/attributes/img-srcset/


2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

share|improve this answer

answered 34 mins ago

Maximillian Laumeister

1,404419

add a comment | 

up vote
2
down vote



accepted

The best way to optimize page performance yet serve high-res images to high-dpi clients is to use the img srcset HTML attribute, like this:

<img
 srcset="
 /img/image4x.jpg 4x,
 /img/image3x.jpg 3x,
 /img/image2x.jpg 2x,
 /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

In this example, the larger multipliers link to images that are 2x, 3x, and 4x as big as the default size. Modern browsers are smart enough to automatically pick the larger image if they are running on a high-dpi display.

You can even use the sizes attribute to hint to the browser which image is best for different screen sizes.

More info:

1. https://html.com/attributes/img-srcset/


2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

share|improve this answer

answered 34 mins ago

Maximillian Laumeister

1,404419

add a comment | 

up vote
2
down vote



accepted

up vote
2
down vote



accepted

The best way to optimize page performance yet serve high-res images to high-dpi clients is to use the img srcset HTML attribute, like this:

<img
 srcset="
 /img/image4x.jpg 4x,
 /img/image3x.jpg 3x,
 /img/image2x.jpg 2x,
 /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

In this example, the larger multipliers link to images that are 2x, 3x, and 4x as big as the default size. Modern browsers are smart enough to automatically pick the larger image if they are running on a high-dpi display.

You can even use the sizes attribute to hint to the browser which image is best for different screen sizes.

More info:

1. https://html.com/attributes/img-srcset/


2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

share|improve this answer

answered 34 mins ago

Maximillian Laumeister

1,404419

The best way to optimize page performance yet serve high-res images to high-dpi clients is to use the img srcset HTML attribute, like this:

<img
 srcset="
 /img/image4x.jpg 4x,
 /img/image3x.jpg 3x,
 /img/image2x.jpg 2x,
 /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

In this example, the larger multipliers link to images that are 2x, 3x, and 4x as big as the default size. Modern browsers are smart enough to automatically pick the larger image if they are running on a high-dpi display.

You can even use the sizes attribute to hint to the browser which image is best for different screen sizes.

More info:

1. https://html.com/attributes/img-srcset/


2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

share|improve this answer

answered 34 mins ago

Maximillian Laumeister

1,404419

share|improve this answer

share|improve this answer

answered 34 mins ago

Maximillian Laumeister

1,404419

answered 34 mins ago

Maximillian Laumeister

1,404419

answered 34 mins ago

Maximillian Laumeister

1,404419

1,404419

add a comment | 

add a comment | 

Bobimaru is a new contributor. Be nice, and check out our Code of Conduct.

 

draft saved

draft discarded

Bobimaru is a new contributor. Be nice, and check out our Code of Conduct.

Bobimaru is a new contributor. Be nice, and check out our Code of Conduct.

Bobimaru is a new contributor. Be nice, and check out our Code of Conduct.

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwebmasters.stackexchange.com%2fquestions%2f118844%2fgtmetrix-complains-of-un-optimized-images-in-responsive-design%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email