Mixing
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
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
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
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
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.
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.
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:
- https://html.com/attributes/img-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered 34 mins ago
Maximillian Laumeister
1,404419
add a comment |Â
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:
- https://html.com/attributes/img-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
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:
- https://html.com/attributes/img-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
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:
- https://html.com/attributes/img-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
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:
- https://html.com/attributes/img-srcset/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
answered 34 mins ago
Maximillian Laumeister
1,404419
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.
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.
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
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
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
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
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
