Definition

Responsive images are images delivered in multiple sizes so the browser can download one appropriate to the device, typically using the srcset and sizes attributes on the img element.

With srcset listing several image files and their widths, and sizes describing how wide the image will display, the browser picks a suitable file rather than always loading a large desktop image. Serving appropriately sized images reduces bandwidth and can improve loading metrics such as Largest Contentful Paint, particularly on mobile connections.

Examples

• srcset by width

  An article's hero image uses `srcset` with 480w, 960w and 1600w versions and a `sizes` attribute, so phones download the 480w file instead of the full 1600w image.

• Improving LCP

  A store replaces a single large product photo with a responsive set; mobile visitors download a smaller file, improving the page's Largest Contentful Paint.

Sources

• web.dev — Serve responsive images

Related terms

• Image SEO
  The practice of structuring images and surrounding markup so search engines can discover, understand and surface them in image and web search results.
• Largest Contentful Paint
  A Core Web Vitals metric measuring how long the largest visible content element on a page takes to render after loading begins.
• WebP
  An image format developed by Google that provides lossless and lossy compression, typically producing smaller files than PNG or JPEG.

Where QueryCatch uses this

• Image Optimisation
• SEO Audit