Responsive Image Generator
Make every width of an image in AVIF, WebP and JPEG, with a ready <picture> tag and a tiny ThumbHash or BlurHash placeholder.
Drop images for the web
Get every size in AVIF, WebP and JPEG or PNG, a <picture> tag with srcset and sizes, and a tiny placeholder for each.
About this tool
Drop one or more images and get each one at every width you choose, encoded as AVIF and WebP with a JPEG fallback, or PNG for images with transparency. Widths larger than the original are skipped, so nothing is upscaled.
Each image comes with a <picture> element that has srcset, sizes, width and height set, so the browser downloads the smallest file that looks sharp and the page doesn’t jump while it loads. Add alt text per image, a path prefix and whether it’s the main image of the page.
A placeholder is made from the image too: a ThumbHash or BlurHash string, its average colour, or a tiny blurred image as a data URI, shown while the real image loads. The ZIP holds the images, an HTML file with every snippet and a manifest.json with sizes and placeholders for build scripts.
What should I put in sizes?
How wide the image is shown on the page. 100vw means the full width of the window; something like (min-width: 1024px) 50vw, 100vw means half the window on wide screens and all of it on narrow ones. Without a correct sizes value the browser assumes the full window and may download a larger file than it needs.
ThumbHash or BlurHash?
ThumbHash keeps more detail and the image’s aspect ratio and transparency, and it’s shown here as a small PNG you can use straight from CSS. BlurHash is more widely supported by libraries but needs a script to draw it.