Try this workflow
- Start with
- 640 × 480 synthetic practice image
- Set up
- Widths 320,640; JPG fallback, WebP and AVIF
- What to expect
- Six images at 320 × 240 or 640 × 480, plus picture HTML, manifest and installation notes.
SMART IMAGE TOOLS IMAGE WORKSPACE
Responsive Image Package.
The right image width for every screen. A complete package for your website.
Your workspace
Processed on your device
Real codecs run on your device in a cancellable worker. Image files are never uploaded. Up to 8 megapixels; animated images use a still frame.
YOUR IMAGELocal files
Start with your image.
Drag and drop a file here, or choose from your device.
Original synthetic practice image · created on your deviceJPGPNGWebPAVIF
Your original files stay on your device.
Before you download
- Match sizes and alt text to your real layout.
- Inspect every format and verify paths; remove lazy loading for a main hero.
Image files stay on your device Works in your browser
A PRACTICAL EXAMPLE
Know what a useful result looks like.
Prepare appropriate widths and compatible image alternatives for a website.
Check before using the result
- Match sizes and alt text to your real layout.
- Inspect every format and verify paths; remove lazy loading for a main hero.
When the result needs work
Widths above the source are omitted. Every selected format is lossy; actual bytes may be larger than the source.
Examples illustrate specific inputs and settings. Actual output size and appearance depend on your file and browser. Practice images are synthetic; they do not contain personal data.
GOOD TO KNOW
A few useful answers.
What is inside the download?
A ZIP contains selected widths in JPG and optional WebP and AVIF, picture.html, a JSON size manifest and installation notes. JPG provides the fallback. Adjust sizes and alt text for the actual page.
Will it enlarge my image?
No. Requested widths greater than the original are omitted. Proportions are preserved. Use up to eight widths, eight megapixels per original and 24 megapixels of width variants in total.
Is every output lossless?
No. JPG, WebP and AVIF use lossy encoding here. Inspect the variants before publishing, especially text and fine edges. Transparent pixels are filled with your chosen color for the JPG fallback.
Should my main hero use lazy loading?
Usually the main above-the-fold image should not be lazy loaded. The package includes general-purpose lazy-loading markup; remove loading="lazy" for your hero and assess fetchpriority="high" in your real layout.