Srcset Generator: Build Responsive Image srcset and sizes Code

Use {w} where the width goes, e.g. hero-{w}.jpg or image.jpg?w={w}
Options
Responsive image HTML

		

	
















FREE TOOL · NO SIGN-UP





This srcset generator writes responsive <img> markup with srcset, sizes, alt text, width and height, plus an optional <picture> version with WebP sources. It is for developers, WordPress builders and SEOs who want browsers to download the smallest image that still looks sharp. Enter your image URL pattern and widths, and copy ready-to-paste HTML.





The code updates live, and the tool warns you if your pattern has no width placeholder or the image has no alt text.













How srcset and sizes Pick the Right Image





Without srcset, every visitor downloads the same image, so a phone on mobile data gets the same large file as a 27-inch monitor. srcset lists several versions and lets the browser choose.





Width vs density descriptors





A width descriptor, written like 800w, tells the browser the real pixel width of each file: hero-400.jpg 400w, hero-800.jpg 800w. Combined with sizes, the browser can pick a file for any layout and screen density. A density descriptor, written 1x or 2x, maps files to screen pixel ratios: logo.png 1x, logo@2x.png 2x. Density descriptors only fit images that always display at one fixed size, such as logos or icons. For anything that resizes with the layout, use width descriptors, which is what this tool generates.





How browsers choose





The browser reads sizes to learn how wide the image will appear, for example 100% of the viewport on phones and half of it on desktop. It multiplies that by the device pixel ratio, then picks the smallest candidate in srcset that covers it. A phone 390 CSS pixels wide with a 3x screen showing the image at full width needs about 1,170 pixels, so it picks the 1200w file. The browser may also take network speed and cached files into account, so the exact choice is up to it.













How to Generate srcset Code





You need the image already saved, or generated by a CDN, at several widths.





Step 1: Enter image base URL





Type the image URL with {w} where the width goes, for example https://example.com/img/hero-{w}.jpg or https://cdn.example.com/hero.jpg?w={w}. The tool swaps {w} for each width. If you forget the placeholder, it warns that every source would be the same file.





Step 2: Set widths





List the widths you have, separated by commas, such as 400, 800, 1200, 1600. The tool sorts them and writes each with its w descriptor. Set the default width, which becomes the plain src fallback, and the intrinsic width and height of the original image so the browser can reserve space.





Step 3: Define sizes per breakpoint





Edit the sizes value to match your CSS. The default (max-width: 768px) 100vw, 50vw means full viewport width up to 768 pixels and half the viewport above that. Add alt text that describes the image. Keep lazy loading and async decoding on for images below the fold.





Step 4: Copy the img tag





Copy or download the generated HTML and paste it into your template, page builder HTML block or theme file. Tick “Also output  with WebP” to wrap the tag in a picture element with a WebP source in front of the JPEG or PNG fallback.













srcset vs the picture Element





Both deliver responsive images, but they solve different problems.





Format switching with WebP and AVIF





The <picture> element lets you offer newer formats with a fallback. Each <source type="image/webp"> or <source type="image/avif"> carries its own srcset, and browsers use the first type they support, falling back to the <img> inside. This tool can produce the WebP source automatically by replacing .jpg or .png in your pattern with .webp. For AVIF, copy the WebP source line, change the type to image/avif and the extension to .avif, and place it first. Make sure the converted files actually exist on your server or CDN.





Art direction crops





Sometimes a small screen needs a different crop, not just a smaller file, such as a tight vertical crop instead of a wide horizontal shot. That is art direction, and it uses <source media="(max-width: 600px)"> with a different image. Plain srcset cannot do this because it assumes every candidate shows the same picture.













Responsive Images and LCP





On many pages, the largest image is the Largest Contentful Paint element, so how you load it affects Core Web Vitals.





fetchpriority for hero images





Add fetchpriority="high" to the main hero image so the browser downloads it before less important resources. This tool does not add it automatically, so type it into the generated tag for your hero image only. Using it on many images cancels out the benefit.





Don’t lazy-load the LCP image





Lazy loading delays images until they near the viewport, which is great below the fold and harmful for the first visible image. Untick loading=”lazy” in the tool when generating code for a hero or above-the-fold image. Keep it on for everything further down.













Creating the Image Variants





srcset only points to files. Something has to create them.





CDN resizing





Image CDNs and services such as Cloudflare Images, Cloudinary, imgix and many hosting providers resize images through URL parameters. Point your pattern at that parameter, like ?w={w}, and every width is generated on request.





WordPress automatic srcset





WordPress creates several image sizes on upload and adds srcset and sizes to images inserted through the editor. Use this generator for custom templates, hard-coded images and assets outside the media library.













Responsive Image Mistakes





These are the most common reasons responsive images still waste bytes.





Wrong sizes values





If sizes says 100vw but the image shows in a narrow sidebar, browsers download files far larger than needed. Match sizes to your real CSS layout.





Too few or too many widths





Two widths leave big gaps. Ten widths add little and complicate caching. Four to six covering phone to large desktop usually works well.





Missing width and height (CLS)





Without width and height, the page jumps when the image loads, hurting Cumulative Layout Shift. Always fill in intrinsic dimensions.













Ship Lighter Images on Every Screen





Enter your image pattern and widths above to get responsive markup you can paste straight into a page. Add lazy loading to other media with the Lazy Load Code Generator, help Google find your images with the Image Sitemap Generator, and trim page code using the HTML Minifier. More free tools are on FHSEO Hub.













Srcset Generator: Build Responsive Image srcset and sizes Code FAQs









Srcset is an HTML attribute on img and source elements that lists several versions of the same image with their widths or pixel densities. The browser picks the most suitable file for the screen and layout, so small devices download smaller images. A plain src attribute remains as the fallback for older browsers.









The sizes attribute tells the browser how wide an image will display at different viewport widths, using media conditions and lengths like 100vw or 50vw. The browser reads it before CSS loads, combines it with screen density, then chooses the best file from srcset. Without sizes, browsers assume the image fills the viewport.









Use w descriptors for images whose display size changes with the layout, such as content images, heroes and product photos. Use x descriptors only for images that always show at one fixed size, like logos and icons. Width descriptors with a sizes attribute give the browser more information and usually produce better choices.









Most images work well with four to six widths, spread from small phone sizes up to the largest size the layout shows on high-density screens. For example, 400, 800, 1200 and 1600 pixels. Add more only for very large hero images, and avoid widths larger than your original file.









Yes, srcset can improve Core Web Vitals by letting devices download smaller images, which often speeds up Largest Contentful Paint on mobile. Adding width and height alongside it also prevents layout shift. Results depend on your setup, so measure with PageSpeed Insights or field data before and after the change.