Lossy vs lossless image compression
Lossy images trade some detail for far fewer bytes; lossless images keep every decoded pixel but usually cost more to download.
See it
What it is
Lossy compression throws away image information to make a much smaller file. JPEG, lossy WebP, and lossy AVIF are usually right for photographs because a little changed detail is hard to notice. Lossless compression preserves the decoded pixels exactly. PNG, lossless WebP, and lossless AVIF fit logos, screenshots, diagrams, and assets that must survive pixel-for-pixel comparison.
Choose by content, not by a format slogan. Encode a few quality levels and compare the actual bytes beside the actual image at its rendered size. Busy photos can hide loss well; flat color, tiny text, sharp edges, and smooth gradients reveal artifacts early.
Gotcha: lossless does not mean small, and lossy does not always mean visibly bad. A lossless copy of an already compressed JPEG preserves the JPEG artifacts perfectly but cannot recover the discarded detail. Re-encoding a lossy file over and over is generation loss, the same effect that makes a meme reposted twenty times look deep fried. Keep the original source asset and make each web rendition from that, not from another rendition.
Ask AI for it
Build an image compression pass with Sharp. Starting from the original source files, encode photographs as AVIF and WebP at several 'quality' values, and encode logos, diagrams, and screenshots as PNG plus lossless WebP. Compare file size and visible artifacts at the image's real CSS display size, keep the smallest acceptable result per asset, and never transcode from an already compressed rendition. Emit width variants for 'srcset', preserve alpha where required, and produce a report listing the source bytes, chosen format, chosen quality mode, and output bytes for every image.