Srcset, sizes, and the HTML picture element
An HTML picture tag is how a page offers more than one file for the same photo: a modern type such as WebP or AVIF, a JPEG fallback, and several widths in srcset so a phone does not download a 1920-pixel hero. This picture tag generator reads the image in your browser, exports those widths, and writes markup whose filenames match the downloads.
Copy-pasting a picture element from a tutorial is how you ship hero-1600.webp that does not exist. Generate the srcset here, put those files on the server, then paste the tag. If a width is in the comma list, it must be a file you can point to.
HTML srcset and sizes attribute
srcset is the menu of files. Each item is a URL plus a width descriptor (640w, 1280w). sizes is how wide the image will paint in CSS pixels, so the browser can pick from that menu. The picture element wraps one or more source tags (by type) and an img that older browsers still understand.
Widths should match the layout, not a superstition. If the photo never renders above 800 CSS pixels, a 1920w candidate is unused weight. A content column often uses (max-width: 800px) 100vw, 800px. A full-bleed hero is closer to 100vw. Change the sizes field before you copy the HTML picture tag.
Start from a master that is already the largest size you will serve. Crop extra background first, then resize if the camera file is 4000 pixels wide. This tool cuts srcset variants from that master. It does not invent a layout.
WebP srcset and AVIF picture tags, with a JPEG fallback
Put the modern format on source type="image/webp" (or AVIF). Put JPEG on the img src and, if you export JPEG widths too, on the img srcset. Browsers that understand WebP use the source. The rest load the JPEG. That pairing is the usual responsive-images setup for photographs.
AVIF in the picture tag is worth it when this browser can encode it and your audience can decode it. If the control is greyed out, generate a WebP srcset instead. Do not use a picture tag for Open Graph. Share cards want a single JPEG at 1200x630 from social image sizes.
If this run only produced WebP files, convert the same master to JPEG for the fallback src. Inspect first if you are not sure the source is a photo or a graphic. PNG logos rarely need five srcset widths.
Picture tag vs img srcset
Need several widths of the same JPEG? An img with srcset and sizes is enough. Need WebP or AVIF plus a fallback type? That is a picture tag. This generator writes the picture element so you do not have to keep type, widths, and filenames in your head.
The LCP image can still be a picture tag. Add fetchpriority="high" on the img yourself. Add width and height so the layout does not jump. loading="lazy" belongs on images below the fold, not on the first hero.
Example HTML picture tag with srcset
After you host the downloads, the markup should look like this. Every URL in srcset must exist. Alt describes the photo. Width and height match the largest file you listed.
<picture>
<source type="image/webp"
srcset="hero-640.webp 640w, hero-960.webp 960w,
hero-1280.webp 1280w, hero-1920.webp 1920w">
<img src="hero-1280.jpg"
srcset="hero-640.jpg 640w, hero-960.jpg 960w,
hero-1280.jpg 1280w, hero-1920.jpg 1920w"
sizes="(max-width: 800px) 100vw, 800px"
width="1920" height="1280"
alt="Walnut desk with a camera and prints"
decoding="async">
</picture><img src="hero-1280.jpg"
srcset="hero-640.jpg 640w, hero-1280.jpg 1280w"
sizes="(max-width: 800px) 100vw, 800px"
width="1280" height="853"
alt="Walnut desk"
fetchpriority="high"
decoding="async">Frequently asked questions
How do I generate an HTML picture tag from an image?
Drop the master file on this page, list the widths you will actually host (for example 640, 960, 1280, 1920), pick WebP or AVIF, set sizes, then Apply. Download the width variants and paste the picture tag. Filenames in srcset match the downloads.
What is srcset in HTML?
Srcset is a list of image URLs with a width descriptor, like hero-640.webp 640w. The browser picks one file using that list plus the sizes attribute. If a URL in srcset is not on the server, the tag is a lie. This generator exports those files so the list is honest.
When do I need a picture tag instead of img srcset?
Use a picture tag when you need more than one type: WebP or AVIF in a source element, JPEG on the img as fallback. A single img with srcset is enough if every variant is the same format.
What should the sizes attribute be?
Sizes tells the browser how wide the image will display. A content column is often (max-width: 800px) 100vw, 800px. A full-bleed hero is closer to 100vw. The default on this page is a column - change it if your CSS is wider.
Do I have to host every width in the srcset?
Yes, if it is in the list. Delete a width from the comma field if you will not upload that file. An HTML picture tag that points at missing files is worse than a single img.
Can I generate a WebP or AVIF srcset in the browser?
Yes. Choose WebP or AVIF as the modern format. If AVIF is greyed out, this browser cannot encode it - use WebP. Keep a JPEG (or PNG) on the img src for older browsers. Convert separately if this run only produced WebP.
Should I use this markup for Open Graph?
No. Link previews want one JPEG or PNG, usually 1200x630. A picture tag and srcset are for the page the visitor sees. Export the share card with social image sizes.
Where does fetchpriority go on a picture tag?
On the img, not on source. Add fetchpriority="high" yourself when this image is LCP. We do not assume every generated picture tag is the hero.