A guide to responsive images | CSS Tricks

A pretty exhaustive overview of the HTML and CSS options that we now have for responsive image layouts. Here are some key takeaways:

  • Prioritise srcset for the best performance gains, <picture> for the greatest level of editorial control (think different images for dark mode, or completely different layouts on smaller/larger screens);
  • Setting the lowest resolution image within a srcset to the src value is normally best;
  • The RespImageLint tool is very useful for determining srcset sizes attributes;
  • There's also the LazySizes library for lazy-loading images;
  • Despite clever tooling, sizes remain tricky to get right and often benefit from templating abstractions (as does the whole responsive image malarkey in total);
  • If you need to be able to zoom in on an image and serve a higher resolution image as it happens, srcset lets you achieve that by specifying widths wider than the viewport i.e. 300vw;
  • Art direction using the <picture> element can be used to serve static images instead of GIFs for users who prefer reduced motion (there are any interesting niche use cases with links out to full resources);
  • The <picture> element also provides a chance to use more performant image formats such as WebP, whilst providing a graceful fallback for older browsers;
  • You can combine <picture> and srcset if needed, which may net some further performance savings;
  • Netlify (and a bunch of other CDN services) offer automatic image resizing based on URL parameters;
  • Don't forget the value of using object-fit and object-position to handle the bits in-between breakpoints as well;
  • There's also a huge list of further reading and sources at the end of the article.

Explore Other Notes

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.