Optimize images for your website
Choose the photos. The tool creates versions at several widths, in WebP, and builds the responsive HTML: the browser downloads only the size the screen needs.
How to useLight, responsive images
Available in: 
Optimize images for your website: what it is for
Choose one or more photos and set the widths (480, 800, 1200 and 1600 px by default), the format (WebP or JPG) and the quality. The tool creates each version without enlarging the photo beyond its original size, shows the weight of each one and builds the responsive HTML with srcset, sizes, width and height and loading=lazy or fetchpriority=high for the top image.
Everything runs in the browser and the photos never leave your device.
How to use
- Choose your site's images.
- Adjust widths, format, quality and folder.
- Download the .zip and copy the HTML into the page.
When to use it
- Making your site faster on phones.
- Improving Core Web Vitals LCP and CLS.
- Preparing product and gallery photos.
Frequently asked questions
Why generate several widths?
A phone doesn't need to download the 1600 px photo made for large monitors. With srcset, the browser picks the smallest version that still looks sharp on screen, and the page loads faster, which also helps Core Web Vitals (LCP).
Does WebP work in every browser?
Yes, in all current browsers (Chrome, Safari since version 14, Firefox and Edge). If you need compatibility with very old devices, choose JPG.
What are width, height and loading=lazy for?
Width and height reserve the image's space before it loads, keeping the page from jumping (CLS). loading=lazy defers images that are off screen. Don't use lazy on the main image at the top of the page.
Are the photos uploaded to a server?
No. Everything happens in your browser; the images never leave your device.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.