Retina Ready HTML image() Proper solution?

Question

We know we can make a image retina ready using css3 media query like

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) { 
    }

Above media query to make retina ready images for background images. Is there any way to make a HTML image retina ready like

<img src="example.png" />

I need to mention here some more issues. The dimension of my image is 274x48 . And it's looking kind of blurry on retina screens. And this is the highest resolution of this image I have. Is there any way to make the image retina ready keeping the existing dimension and resolution. Thanks in Advance!

Is it possible to make a low resolution image RETINA READY? It's fine on every screen but kind of blurry on retina screens!

If your image has only such little resolution, scaling it up to fit the double (or more) pixels per inch on the display will not help? — Terry, Apr 12 '15 at 17:16
possible duplicate of [Automatic Retina images for web sites](http://stackoverflow.com/questions/13744542/automatic-retina-images-for-web-sites) — Turnip, Apr 12 '15 at 17:17
you can try this in your css but (-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);) not sure if will help with such small image but it helps with large ones if they get upscaled or zoomed in — Tasos, Apr 12 '15 at 17:31

score 3 · Answer 1 · answered Apr 12 '15 at 17:27

You should use <picture> element instead:

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

score 2 · Answer 2 · answered Apr 12 '15 at 17:28

It is not possible to make an image "retina ready" unless you provide a higher source resolution/quality.

One option you may have is to open the image in photoshop or another editor and scale it up, and then apply some antialiasing filters to make the edges look slightly better, and then add it using media queries. Other than that you have no options.

Retina Ready HTML image() Proper solution?

2 Answers2