Images often create the largest share of a page’s transferred data, but optimization is more than running a compression plugin. The best results come from controlling the full path from the original file to the size delivered in the browser.
Choose the right source dimensions
Do not upload a camera-sized image for a card that never exceeds 800 pixels. Keep a high-quality original outside WordPress when future reuse matters, then upload a source large enough for the maximum display size and high-density screens without being excessive.
Crop intentionally. A featured image may appear as a wide banner, a square card, and a narrow mobile thumbnail. Keep important subjects away from fragile edges and verify the crops generated by the active theme.
Match the format to the content
- JPEG: widely compatible and effective for photographs.
- PNG: useful for lossless graphics and transparency, but often large for photos.
- WebP: a strong general-purpose option for smaller photographic and graphic files.
- AVIF: can compress very efficiently, though workflow and compatibility should be tested.
- SVG: ideal for trusted vector artwork; sanitize uploads because SVG can contain active code.
Compress before and after upload
Use sensible quality settings that preserve visible detail. Automated optimization should process new uploads and, when necessary, regenerate existing media sizes. Keep an eye on quotas and make sure originals are not destroyed unless that is an intentional policy.
Deliver responsive images
WordPress can generate several sizes and add responsive image attributes. The theme must request appropriate dimensions rather than forcing the browser to download a giant file and shrink it with CSS. Inspect the chosen resource at desktop and mobile widths.
Use lazy loading selectively
Images below the fold are good candidates for lazy loading. The main hero or likely Largest Contentful Paint image usually needs early discovery instead. Avoid lazy loading every image blindly, and define width and height so the layout does not jump while files arrive.
Finish with a visual check
Measure page weight and loading behavior, then inspect the result on real screens. Look for halos, banding, unreadable text, soft product details, broken transparency, and awkward crops. Image optimization succeeds when visitors cannot see the compromise—but they can feel the faster page.