WordPress image optimisation means delivering an appropriately sized, compressed and accessible image for each layout—not merely running every upload through a compression plugin. Start with dimensions, cropping and editorial rules.
Choose the right source image
- Use an image the business owns or is licensed to publish
- Avoid uploading a camera original when the page displays a modest card
- Keep a high-quality master outside WordPress when future crops are likely
- Do not place essential text inside an image when HTML would be clearer and accessible
Match dimensions to the component
WordPress can generate multiple sizes, and responsive image markup lets the browser choose an appropriate file. The theme must request sensible sizes; otherwise the browser may still download a needlessly large image.
| Use | Preferred approach | Common mistake |
|---|---|---|
| Hero | Purpose-made crop with a defined focal point | Using a huge stock photo and lazy-loading the main visual |
| Article image | Width matched to the reading column with responsive variants | Uploading a full-resolution original |
| Card thumbnail | Consistent aspect ratio and crop rules | Allowing unpredictable heights and layout shifts |
| Logo or icon | SVG where safe and appropriate | Using a blurred raster image or embedding unnecessary metadata |
| Product image | Consistent source quality and zoom requirements | Compressing so heavily that product details are lost |
Select formats deliberately
AVIF and WebP can reduce file size for many photographic uses; JPEG remains broadly useful; PNG suits transparency and certain graphics; SVG suits controlled vector artwork. Keep fallbacks where the site’s browser requirements demand them.
Set intrinsic dimensions
Width and height attributes allow the browser to reserve space and reduce layout movement. CSS can still make the image responsive.
Use lazy loading selectively
Images below the first screen can usually load lazily. The likely largest above-the-fold image often needs normal or prioritised loading. Test the actual layout rather than applying one rule to every image.
Write useful alt text
Describe the image’s purpose in context. Decorative images can use empty alt text. Do not stuff keywords or repeat a caption verbatim when it adds no value.
WordPress workflow
- Define image components and dimensions in the design system.
- Prepare or crop the source before upload.
- Confirm WordPress creates the expected variants.
- Use the correct media attachment rather than an external hotlink.
- Inspect the rendered `srcset`, dimensions and file size.
- Test mobile crops and loading.
Cleaning an existing library
Do not bulk-delete “unused” media without a complete backup and a reliable usage audit. Images may be referenced by custom fields, CSS, products, emails or external systems.
Practical next step
Create an image specification for hero, article, card and logo uses, then test one representative page to confirm the browser receives the expected responsive file.
Do not rely on upload-time compression alone
A plugin cannot choose the correct crop, remove unnecessary text from an image or know whether a photograph should be a lightweight illustration instead. Editorial preparation and component rules produce more predictable results than automatic compression by itself.
Check generated image variants
Changing theme sizes later does not always regenerate older uploads automatically. Test existing media after a redesign and use a controlled regeneration process with a backup when required. Avoid creating dozens of unused variants for every upload without understanding storage and processing impact.
Privacy and security
Remove unnecessary location or camera metadata from sensitive photographs and do not upload private originals merely to crop them inside WordPress. Confirm that any external optimisation service is appropriate for the data being processed.
Sources and date checked
This guide was checked on 21 July 2026. WordPress, hosting environments and extensions change, so recheck the relevant official documentation before making a major change.
Keep the decision under your control
Retain the relevant accounts, source material, supplier terms and recovery information. Recheck changing prices, interfaces and rules before acting.