Images are the largest part of most web pages and the easiest thing to fix. There is usually a second or two sitting here waiting to be reclaimed.
Resize before uploading. A photo from a modern phone is around 4000 pixels wide. If it displays in a 800 pixel column, the other 3200 pixels are pure waste, downloaded by every visitor. Resize to roughly the largest size it will ever display at.
Choose the right format. WebP for almost everything - typically 25 to 35 percent smaller than JPEG at the same visible quality, and supported by every current browser. JPEG for photographs where you need maximum compatibility. PNG only when you need transparency. SVG for logos and icons, because it stays sharp at any size and is usually tiny.
Compress. Quality 80 on a JPEG is visually indistinguishable from quality 100 for most photographs and can be less than half the size.
Lazy load below the fold. Images further down the page load as the visitor scrolls toward them. Browsers now support this natively and most platforms enable it by default.
Always set width and height in your markup. Without them the page jumps around as images arrive, which is irritating to use and counts against you in Core Web Vitals.
