Search code examples
cssretina-displayretina

How to use CSS to make this works on retina screen?

Code is like:

<a href="http://localhost/link-a"><img src="a.png"></a>

The image file a.png is 100x100 but on retina screen it's very ugly so I can generate a 2x PNG file. But how do I make it work in this HTML code?

Solution

  • I'll suggest to go for SVG if you are using icons. However if you want to use image you can use srcset attribute.

    <img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

    see can i use..