Make responsive images with srcset

Phones shouldn’t download a 2000-pixel photo to show it 400 pixels wide. Make the widths a responsive image needs in one go, and get the HTML that lets each browser pick the smallest file that still looks sharp.

Drop an image hereAdd an image

JPG, PNG, WebP, GIF or AVIF, up to 80 MB. You can also paste an image.

Resized on your device. Your image is never uploaded.

How it works

  1. Your browser decodes your image once, then resizes and encodes a copy at each width you choose.
  2. It names each file by its width, such as photo-960.webp, and writes the srcset and sizes HTML that lists them.
  3. Each visitor’s browser then downloads only the file that suits their screen.

Supported formats

Opens
JPG, PNG, WebP, AVIF, BMP and GIF (the first frame of an animation)
Saves
A ZIP with one file per width (and format), plus the HTML snippet
Limits
Files up to 80 MB. The saved image can be up to 16.7 megapixels on iPhone and iPad, 36 on Android and 64 on computers, and 16,384 pixels on its longest side.
  • Widths larger than your image are skipped, because enlarging can’t add detail.
  • The HTML includes width and height, so the page doesn’t jump while images load.
  • Metadata such as camera details and location is not copied to the new files.

Your image stays on your device

This tool runs entirely in your browser. The image is never uploaded, so there is nothing for us to store, see or delete.

To check, open your browser’s developer tools, switch to the Network tab and use the tool: you will not see your image being sent anywhere.

Questions

Are my images uploaded anywhere?

No. The image is read and processed by your own browser. Nothing is sent to our servers, so there is no copy of your image anywhere but your own device.

What should I put in sizes?

How wide the image is shown on the page. 100vw means the full window width. If it sits in an 800-pixel column, use “(min-width: 860px) 800px, 100vw”. If in doubt, 100vw is safe, just a little less efficient.

Which widths do I need?

Three to five usually cover phones to large screens: for a full-width image, 480, 960, 1280 and 1920. Add 2560 for large, high-resolution screens if the original is big enough.

Should the main image be lazy-loaded?

No. Turn lazy-loading off for the image at the top of the page, often the largest one. Lazy-loading it delays it and slows the page’s Largest Contentful Paint.