WordPress Core
Responsive images are images that adapt to the screen size, resolution and context of the device displaying them. WordPress automatically generates and serves different image sizes based on the available space, reducing bandwidth on mobile devices without sacrificing quality on larger screens.
How WordPress implements responsive images
WordPress uses the HTML srcset and sizes attributes on image tags. srcset provides the browser with a list of available image variants and their widths. sizes tells the browser how wide the image will be displayed in the current layout. The browser then selects the most appropriate variant.
WordPress generates this markup automatically when you insert an image into a post. The srcset attribute lists all available thumbnail sizes for that image. For this to work well, the right thumbnail sizes must exist — which requires that image size registration is current and thumbnails have been regenerated after any size changes.
Responsive images and optimisation
Responsive images only deliver performance gains if the variants are properly sized and formatted. Uploading a 4 MB original and relying on WordPress to resize it on the fly does not improve performance — the variants must be pre-generated. Compressing the original and its thumbnails via a plugin like Mediapapa ensures that every variant served to the browser is as lightweight as possible.
Frequently asked questions
Does WordPress handle responsive images automatically?
Yes, for images inserted through the block editor or classic editor. WordPress generates srcset markup based on available thumbnail sizes. Custom theme templates that output images manually need to use wp_get_attachment_image() or similar functions to get responsive markup.
What is the relationship between responsive images and WebP or AVIF?
Separate concerns. Responsive images handle delivering the right size for the device. WebP and AVIF handle delivering the most efficient format. Both can be applied simultaneously — a site can serve WebP thumbnails at multiple sizes, with the browser choosing the right size and format combination.
Related terms: Image Thumbnails · srcset · WebP · Image Optimisation
Curious what is hiding in your library?
Scan it for free. No account needed.