When to compress, when to resize, and when to do both
Compression reduces file size by lowering quality or optimizing encoding. Resize reduces pixel dimensions. Both cut file size, but differently. Use resize when dimensions are too large for your layout (e.g., 4000px for an 800px column). Use compression when dimensions are fine but file size is too big. For best results, do both: resize to match display size, then compress to 80–85% quality.
Resize: Wrong dimensions (hero, thumbnail, social). Compress: Right dimensions, bloated file. Both: Large image for web—resize first, then compress.
A phone camera photo often comes out around 4000×3000px at 4-6MB. Dropped straight into an 800px-wide blog column, that's the browser downloading 4-6MB to display something that renders at a fraction of its native size — the extra pixels are just wasted bandwidth, invisible at the display size. Resize to 1600px wide first (2x the display width, enough for retina screens) and the file typically drops to 800KB-1.2MB purely from having fewer pixels to store, before compression even enters the picture. Compress that resized image to 80% quality and it commonly lands under 200KB — a 20-30x reduction from the original with no visible quality loss at normal viewing distance, because both levers were pulled in the right order.
Compressing first and resizing second wastes the compression pass — you spend CPU time optimizing pixel data that then gets thrown away when the image shrinks. Resizing first means every compression cycle afterward is working on only the pixels that will actually be displayed. It also avoids compounding artifacts: heavy compression on a huge image, followed by a resize, can leave visible block artifacts that a resize-then-compress order would have avoided entirely.
Google's Core Web Vitals score Largest Contentful Paint (LCP), and on most pages the LCP element is an image. An oversized, uncompressed hero image is one of the most common causes of a poor LCP score — and unlike many performance fixes, it's entirely within a site owner's control with no code changes required, just correctly-sized source files.