How to optimize graphics in Retina layout?

Question

css

In general, I made a layout for the customer (not adaptive, but regular layout), PixelPerfect passed, everything is perfect, but! He says that you need to optimize images for all Retina displays (well, as I understand it, for 2x2 pixels). All this is cool, but how to do it? Because I have never worked with them before. There are only images in the layout, half SVG, half PNG-JPEG, what to do with them, how to optimize them for Retina? I'm using the LESS preprocessor.

Answer 1

You don't have to do anything with SVG.
But with ordinary pictures you need.
1. Imagine a 100x100 pixel square
2. In a normal situation, you insert a 100x100 pixel image into it and everything is fine
3. But! On retina screens, this picture will look terribly blurry and pixelated.
4. To avoid this - you need to insert a picture of 200x200 pixels into this square, but set the width and height to 100 pixels as before (or if this is a background, do it background-size: cover;)
5. It looks like this in short.
And then read habr:
https://habr.com/ru/post/150071/
https://habr.com/ru/post/139682/
https://habr.com/ru/post/155683/