What is srcset in WordPress?

WordPress Core

srcset is an HTML attribute on image tags that provides browsers with a list of available image variants and their widths. The browser selects the most appropriate variant for the current display conditions, serving smaller files on smaller screens and high-resolution versions on retina displays.

How srcset works in WordPress

When WordPress outputs an image, it adds a srcset attribute listing all available intermediate sizes for that attachment. Each entry in the list is a URL paired with a width descriptor (for example, image-300×200.jpg 300w). A companion sizes attribute tells the browser how wide the image will be displayed in the current layout.

WordPress generates this markup automatically via wp_calculate_image_srcset(). The function queries the attachment metadata for all registered sizes and builds the list. If thumbnail variants do not exist — because the size was registered after upload, or because generation failed — those sizes are omitted from srcset.

srcset and performance

A correctly configured srcset means a mobile visitor on a 375px screen downloads a 400px-wide image rather than a 2000px original. The bandwidth saving scales with the difference between the original and the served size. Combined with WebP or AVIF format conversion, srcset is one of the most impactful performance improvements available without changing content.

Frequently asked questions

Does WordPress add srcset to all images?

WordPress adds srcset to images inserted through the editor via wp_get_attachment_image() or the_post_thumbnail(). Images output via custom templates using raw tags do not get srcset unless the developer adds it manually.

What happens if thumbnail variants are missing?

If a registered size has no generated variant — because the size was added after the image was uploaded — that size is absent from srcset. The browser falls back to the next available size. Running a thumbnail regeneration pass after registering new sizes fixes missing variants.

Related terms: Responsive Images · Image Thumbnails · WebP