Image Compression Guide

Serving a 4000-pixel camera original in a 400-pixel card transfers detail the layout cannot display. Before making the quality slider aggressive, resize near the real display width plus an appropriate high-density candidate. This can produce a large reduction while preserving visible quality.

A useful pattern is one candidate near the CSS display width and another near twice that width for high-density screens. Do not always send the largest one: use srcset and sizes so the browser can select an appropriate resource.

Photos with continuous tones generally suit lossy JPEG or WebP. Logos, diagrams, and interface screenshots with hard edges and text should be compared as PNG and WebP. If the source is vector artwork, keeping it as SVG may be better than rasterizing it.

JPEG cannot preserve transparency. When converting a transparent PNG, verify the chosen background. WebP can handle photographic and transparent content, but compatibility across the publishing and editing workflow still belongs in the decision.

A quality number does not mean the same thing across formats or encoders. Start relatively high, lower it in steps, and compare both bytes and appearance. Review at 100% zoom and at the size visitors will see in the actual page.

Faces, hair, fine text, product labels, gradients, and shadows reveal artifacts quickly. Inspect critical regions for smearing, blocking, ringing, and banding instead of judging the image only as a full-page thumbnail.

A rule such as “every blog image must be under 300 KB” ignores dimensions, quantity, and placement. Separate above-the-fold imagery, below-the-fold editorial images, and zoom-only product assets. Prioritize from total page weight and the effect on Largest Contentful Paint.

Smaller is better at equivalent quality, but saving a few kilobytes is not worth making product information or text unreadable. Record original and output size, reduction, dimensions, and format so the team does not repeatedly recompress an already lossy asset for marginal gains.

A smaller file helps less when markup always chooses the largest candidate. Reserve layout space with width and height, configure srcset and sizes, and lazy-load offscreen assets when appropriate. Do not indiscriminately lazy-load the LCP image, which can delay the main visual.

Export can remove EXIF and other metadata. That may remove unwanted location data, but the production original should remain available when capture details or color management matter. Do not make the optimized derivative the only master copy.