Build a repeatable WordPress image pipeline instead of compressing random files after publication.
Image optimization is a publishing workflow: select the right visual, export an appropriate master, generate responsive derivatives, deliver only what the layout needs, reserve space, prioritize the visible image, and verify quality on real screens.
Start from rendered use, not upload limit
Inventory hero, card, thumbnail, article, logo, icon, product, and background uses. Record rendered dimensions and crops at key breakpoints. A 4000-pixel original may be useful as a protected source file but should not automatically become the resource delivered into a 600-pixel card.
Define the image pipeline
- Approved source, license, subject, purpose, and alt-text decision
- Maximum rendered dimensions and crop behavior by template
- Format and quality appropriate to photo, illustration, transparency, or icon
- Responsive image candidates and correct sizes information
- Width and height attributes or reserved aspect ratio
- Lazy loading below the fold and deliberate priority above it
Choose format by content and support
| Image type | Likely approach | Check |
|---|---|---|
| Photograph | Efficient lossy modern or fallback format | Detail, gradients, skin, file size |
| Diagram or UI | Lossless or carefully compressed raster | Text sharpness and scaling |
| Logo or icon | SVG when safe and suitable | Accessibility, sanitization, CSS use |
Optimize before and after upload
- Export a quality source at useful dimensions.
- Remove unnecessary metadata where appropriate.
- Let WordPress generate required sizes.
- Confirm template selects the expected derivative.
- Inspect desktop, mobile, high-density, and zoomed views.
- Measure bytes, layout shift, and visible quality after cache purge.
Avoid image shortcuts that hurt the page
- Lazy-loading the main visible image
- Serving one desktop crop to every mobile context
- Writing alt text as a keyword list
- Deleting originals or derivatives still referenced in content
Add an image budget to publishing
Set template-specific limits for rendered dimensions, approximate transfer weight, above-the-fold count, crop review, and alt-text ownership. Audit outliers after redesigns or plugin changes. Keep source assets and rights records outside the public-derivative cleanup process.
Continue with the next decision
Sources and further reading
Primary and contextual sources used to verify definitions or give readers a relevant next resource.
- WordPress optimization handbook Official performance guidance that includes image sizing, formats, compression, and delivery considerations.