Summary

Developing for retina is extra effort. My recommendation is to use SVG when possible as your first choice for serving super crisp images to retina devices. In instances when SVG is not possible - that is photographs - use the srcset attribute of the img tag to enable your browser to make smart decisions about serving images. Browser support for srcset is great, and non-supporting browsers will fall back to the src attribute. The browser makes the final decision of which image is best to use, based on pixel density, zoom level, and other factors, such as network conditions.

In the next Chapter 9, Flexbox, Part 1, we'll look at an alternate and better solution for laying out parts of our web page using flexible boxes.

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.