How can I use Retina 2x images in CSS easily?

Using Retina (2x) images in CSS easily involves a few techniques that ensure high-resolution displays render images sharply without pixelation. Here are some straightforward approaches:

1. Using CSS Background-Size Property:

- This is a very common method. Prepare two versions of your image: a regular one (e.g., `image.png`) and a Retina version with twice the resolution (e.g., `image@2x.png`).

- In your CSS, you’ll specify the `background-image` with the regular image, and then use `background-size` to scale the image down to the appropriate size.

                            
                            .my-element {
                              background-image: url("image.png");
                              background-size: 100px 50px; / Adjust dimensions accordingly /
                            }
                            @media (-webkit-min-device-pixel-ratio: 2),
                                (min-resolution: 192dpi) {
                              .my-element {
                                background-image: url("image@2x.png");
                              }
                            }
                            
                            

- The `@media` query targets devices with at least twice the pixel density.

- Make sure `image@2x.png` is exactly double the size of `image.png` to avoid distortion or bluring.

2. Using the <picture> element (for Images):

- The HTML5 <picture> element allows you to specify different sources based on screen properties. However this will use img instead of a background.

                            
                            <picture>
                              <source srcset="image.png" media="(max-resolution: 191dpi)">
                              <source srcset="image@2x.png" media="(min-resolution: 192dpi)">
                              <img src="image.png" alt="My Image">
                            </picture>
                            
                            

- This allows browsers to pick the correct image, making sure that low and high resolution images load properly on their respective screen types.

3. Using CSS Image-set:

- The CSS image-set property allows you to specify images that the browser should choose from based on pixel density (not available for older browsers).

                            
                               .my-element {
                                background-image: image-set(
                                  url("image.png") 1x,
                                  url("image@2x.png") 2x
                               );
                               background-size: 100px 50px;
                               }
                             
                         

- In this method, the 1x and 2x refer to the image’s pixel ratio.

4. Using an Img element:

- If you don't want to use a background, a more direct aproach can also be used via img element.

                             
                             <img srcset="image.png 1x, image@2x.png 2x" src="image.png" alt="My Image" />
                             
                         

- As with `image-set`, the `1x` and `2x` specifies the intended pixel density.

Additional Tips:

- For large images it's recommned to optimize them using services like imageOptim.

- Use file names that make it easy to identify 1x and 2x images (eg. name@2x.png)

- When scaling with `background-size`, use precise dimensions to prevent blur.

By implementing any of these methods you can use high res images for your webpage!

Learn more about this