The temptation is to pick one modern format and convert everything. It produces a tidy pipeline and slightly worse results than choosing per asset, because the formats differ in what they are good at, not merely in how new they are.
AVIF gives the smallest files for photographic content at low and medium quality, with genuinely good handling of gradients and flat colour. WebP is the pragmatic middle: broad support, decent compression, fast to encode at scale. JPEG remains the safest fallback and is still competitive at high quality settings with a good encoder. PNG earns its place only for images needing lossless precision or crisp transparency. SVG beats all of them for anything vector — icons, logos, diagrams — and scales without a second asset. Comparative tests such as those published at the format testing on this site show the ranking changes with content type, which is exactly the point.
Use the picture element or content negotiation so each browser receives a format it handles well. Always declare width and height so the layout does not jump while loading. Generate responsive variants at real breakpoints rather than one oversized file scaled down in CSS — a phone should not download a 2400-pixel image to display it at 390.
Quality settings are content-dependent, and a single global value wastes bytes on some images while ruining others. Automated perceptual comparison at build time solves this cheaply: encode at several settings, keep the smallest that stays visually indistinguishable. Strip metadata for delivery, but keep the originals — a colour profile discarded from a master file is not recoverable, and re-encoding from a compressed derivative compounds artefacts every time.