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.
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.
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 ten photographs helps nobody. Leave it empty only if the image is purely decorative.
Free Online Image Optimizer