How to use srcset, sizes, and picture correctly
Responsive images let the browser choose the smallest useful file for a visitor's screen and layout. The key is to provide trustworthy width variants, describe the rendered slot with sizes, and keep accessible content decisions in your page—not in an image generator.
Generate real width variants
Start with several files that preserve the source aspect ratio, such as 320, 640, 960, 1280, and 1920 pixels wide. Do not upscale a smaller original, and do not keep a derivative that is larger than the source without a specific reason. Pixo's responsive image generator applies both rules and writes the resulting dimensions and MIME types into manifest.json.
Use width descriptors in srcset
List each candidate with its real pixel width, for example image-640w.webp 640w. The w descriptor is not the CSS width and it is not a density multiplier; it tells the browser the intrinsic width of that file. Every path in the generated srcset points to an asset included in the ZIP, so copy the assets directory and markup together.
Make sizes match the layout
The sizes attribute describes how wide the image will render before the browser downloads it. A common starting point is (min-width: 1024px) 50vw, 100vw for an image that uses half the viewport on desktop and the full viewport on smaller screens. Replace that example with your actual CSS breakpoints and slot widths; inaccurate sizes can make the browser choose files that are unnecessarily large or visibly soft.
Use picture for format choices
A picture element can offer WebP sources while keeping an img fallback in JPEG or PNG. Put source elements first and the img element last. The browser selects a supported source and still uses the img element for the fallback request, intrinsic width and height, loading behavior, and accessible alternative text.
Keep width, height, and alt in the page
Set width and height from the generated manifest so the browser can reserve the correct aspect-ratio space and reduce layout shift. Pixo intentionally leaves alt empty because only the page author knows whether the image is informative, functional, or decorative. Write concise contextual alt text for meaningful images and keep alt empty only for decorative images.
Deploy and verify the complete pack
Unzip the pack, publish the assets directory without renaming its files, paste picture.html into your page, and adjust sizes and alt. Then test at narrow and wide viewport sizes, confirm the Network panel requests one candidate rather than the whole set, and verify that every requested URL resolves with the expected image MIME type.