Modern browsers want AVIF, older ones want WebP, and something has to be there for everything else. Drop an image in and take away the whole set plus the markup that serves the right one to each visitor.
Drop in the images for your page
Each one produces the full set rather than a single file.
AVIF, WebP and JPEG at 1280 and 360 pixels, plus a picture element per image with the sources in the right order.
Set the folder your images will live in and the alt text, copy the markup, and take the zip — the HTML comes in it as a text file too.
Step by step, with screenshots: How to make responsive images and the picture element
AVIF is the newest of the three formats this page produces: a still picture stored with AV1, a video codec, which is why it is so much smaller than a JPEG of the same photograph. It keeps transparency and renders gradients without the banding JPEG shows. Support is good rather than universal — Chrome, Firefox, Edge and Safari from version 16 onwards all read one — and that is exactly why the markup here puts WebP and JPEG behind it.
A browser takes the first source it can read, so AVIF has to come before WebP and the plain img has to come last. Get the order wrong and every visitor gets the largest file you offered. That is the part of this that is tedious to write by hand and easy to get subtly wrong.
1280 covers laptops and most tablets; 360 covers phones, which is where the saving actually matters. The srcset lets the browser pick, so a phone on a slow connection never downloads the desktop file.
No. These are ordinary files — upload them next to your HTML and the markup works. If you later put a real image CDN in front of your site you will not need any of this, but for a handful of images on a hand-written page this is the whole job.
What the picture shows, to somebody who cannot see it. Each image in a batch gets its own field, because one shared description across twenty photographs helps nobody. Leave it empty only if the image is purely decorative.
Free Online Image Optimizer