Downscaling page for retina without loss of quality (blurry on Chrome)

Question

I noticed that when using CSS to resize a lossless png file (for normal/Retina purposes), on latest Chrome, (54.x at the time of writing), the result is blurry.

When adding the following rule to the img tags

img {
   image-rendering: -webkit-optimize-contrast;
}

Then the result is better:

The problem : Safari's engine renders this quite differently (much worse)

My questions

how can I resize a lossless PNG without having quality problems?
if resizing always causes issues, what's the alternative to handle Higher-DPI monitors? (support for https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/ ?)

score 0 · Answer 1 · answered Nov 10 '16 at 17:02

0

You could use @media CSS to change the URL of the image. Using an image editing software to change the size of the images so the browser doesn't have to handle scaling.

answered Nov 10 '16 at 17:02

MercPls

128
8

score 0 · Answer 2 · answered Nov 10 '16 at 17:04

0

Use media query for high resolution display like:

@media
(-webkit-min-device-pixel-ratio: 1.3),
(min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
   /* Retina-specific stuff here */
}

For reference: http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

answered Nov 10 '16 at 17:04

Germano Plebani

3,461
3
26
38

Would that mean the user is going to download two versions of the same image, one normal and one high resolution one? – George Katsanos Nov 10 '16 at 17:27
Yes. In css rules put normal resolution image and inside media query add same rule with hi def image. – Germano Plebani Nov 10 '16 at 17:29
That's not optimal for web performance, two images will be downloaded but only one used... – George Katsanos Nov 10 '16 at 17:31
Or you can use media query in head section to load different css file – Germano Plebani Nov 10 '16 at 17:31
http://stackoverflow.com/questions/15138674/different-css-files-for-different-media-queries – Germano Plebani Nov 10 '16 at 17:33

George Katsanos · Accepted Answer · 2017-01-12T13:15:09.180

0

Finally I opted for using srcset to do pure responsive images:

            <img
                    src="./img/logo.png"
                    srcset="./img/logo.png 1x,
                        ./img/logo@2x.png 2x"
            >

edited Jan 12 '17 at 13:15

answered Nov 18 '16 at 11:00

George Katsanos

13,524
16
62
98

score 0 · Answer 4 · answered Jul 20 '19 at 02:48

use HTML srcset Attribute

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

and with adobe ps proses the image

Downscaling page for retina without loss of quality (blurry on Chrome)

4 Answers4