What is a good starting point for handling responsive images?

  • Page Owner: Not Set
  • Last Reviewed: 2022-04-12

Optimizing images is deceptively complicated. Different image sizes, cropping, pixel densities, etc. What do I need to consider, and who handles the various pieces of the puzzle?


Answer

Here is an outline of the things to consider and a baseline approach to handling responsive images:

Approach to Responsive Images

TLDR:

Consider:

  • Optimizing the image size to fit the layout and screen resolution

  • Using next-generation image formats (ex: .webp) with fallbacks

  • Switching images based on layout needs (editor control over cropping/different aspect ratio/dark mode)