Responsive Images

Responsive imagesResponsive images deliver an appropriately sized image variant depending on the device's screen size and resolution, so that unnecessarily large files are not loaded.Open glossary entry → ensure that a browser loads the appropriate image variant depending on screen size, resolution and layout. This way a small smartphone display does not receive the same huge file as a large desktop screen. It saves data and improves loading time, which especially benefits Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) measures when the largest visible content element in the viewport has loaded, representing the perceived loading speed.Open glossary entry → on mobile devices.

Technically, responsive images are implemented via the srcset and sizes attributes, which describe several image sizes for the browser to choose from:

• srcset lists different image variants with their widths,
• sizes describes how much space the image occupies in the layout,
• in addition, width and height should be set to avoid layout shifts (CLSCumulative Layout Shift (CLS) measures how much visible elements shift unexpectedly during loading and represents the visual stability of a page.Open glossary entry →).

Responsive images are ideally combined with modern formats such as WebPWebP and AVIF are modern, space-saving image formats that produce much smaller files than JPEG or PNG at comparable quality, improving loading time.Open glossary entry → or AVIF. Especially on mobile devices with weaker connections, the right image size is an effective performance lever.