The resize section is the part most people skip. A 4000px phone photo in an 800px column wastes more bytes than any codec choice saves. The side by side at 100% zoom method is a good habit too, since quality 80 means something different in every encoder. One small thing for the picture example: setting width and height on the img fallback keeps the layout from shifting while the AVIF loads.
StackShortlist
Proof Over Promises.
The resize section is the part most people skip. A 4000px phone photo in an 800px column wastes more bytes than any codec choice saves. The side by side at 100% zoom method is a good habit too, since quality 80 means something different in every encoder. One small thing for the picture example: setting width and height on the img fallback keeps the layout from shifting while the AVIF loads.