Search code examples
htmlcsssafariresponsive-images

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

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. blurry

When adding the following rule to the img tags

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

Then the result is better:

crispier

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

safari

My questions

  1. how can I resize a lossless PNG without having quality problems?
  2. 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/ ?)
Solution

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

                <img
                    src="./img/logo.png"
                    srcset="./img/logo.png 1x,
                        ./img/[email protected] 2x"
            >