Aisha Rahman

The image is not optimised until the browser has it, which puts layout shift and request count ahead of the byte count. AVIF compresses hardest. WebP is close behind and universally supported. Both beat JPEG at equivalent quality, and both accept an alpha channel, which is the case where JPEG cannot compete at all. Quality settings do most of the work. A well-encoded image at a moderate quality looks better than a heavily encoded one at a high setting, and the bytes saved by the second are not worth the artefacts. Converting from an already-encoded source is the mistake to avoid, because the artefacts of both encodings survive. Dimensions matter as much as compression. An image rendered at half its intrinsic width is downloaded at double the necessary size, and specifying both width and height in the markup reserves the space so the page does not shift when it arrives. Responsive images let the browser choose. A size list and a densities descriptor together mean most phones fetch a smaller file than a desktop with the same viewport, which is where the saving is. Modern formats can be encoded progressively, which improves the perception of speed rather than the total, and that matters on a slow connection. Lazy loading helps below the fold and hurts the first thing a visitor sees, so I cover where to stop using it. I would rather leave a page with one well-sized image than four images competing for it, because the bandwidth argument turns on how many requests the page makes rather than on the size of any single one of them.