Copy the generated <img> tag into your HTML. Make sure the URLs you use actually serve the images at the specified widths. You can use an image CDN (like Cloudinary, Imgix) or manually create resized versions. The sizes attribute tells the browser how wide the image will be displayed in your layout; adjust it to match your CSS.

w descriptor (e.g., 320w) specifies the actual width of the image in pixels. The browser uses this together with the sizes attribute to choose the best source. x descriptor (e.g., 2x) is based on device pixel ratio. This tool generates w descriptors, the modern and recommended approach.

Yes, when using w descriptors, sizes is required for proper selection. It describes how the image will be displayed at different viewport widths. If omitted, the browser defaults to 100vw, which may cause it to download larger images than needed. Use the optional field to define your layout rules.

This generator focuses on the <img> element with srcset. If you need art direction based on breakpoints, you may prefer the <picture> element. However, for resolution switching, srcset is usually sufficient and simpler.

We use the free service picsum.photos which can generate images on the fly at different widths. The preview shows the actual image loaded by your browser when the viewport width changes, so you can see how srcset behaves in real time. Replace the base URL with your own CDN or server paths for production use.

Typical widths for responsive images match common device widths: 320, 480, 640, 768, 1024, 1280, 1920 pixels. You can also add region-specific breakpoints like 360, 414, 1440. Our tool lets you customize the list entirely.