Plugin-Based Image Optimization
Image plugins can compress uploads, generate WebP/AVIF, and sometimes rewrite markup to serve next-gen formats. The main risks are double-optimization (multiple tools rewriting images), broken markup, and CLS issues when dimensions are missing.
Pick One Optimizer
Choose one primary image optimization system:
- An image plugin (ShortPixel/Imagify/WP Compress)
- Or a CDN optimizer (Cloudflare Polish/Bunny Optimizer)
caution
Avoid running multiple image optimizers that all generate WebP/AVIF and rewrite markup. It can cause duplicate files, broken <picture> output, and hard-to-debug caching.
What to Enable (Baseline)
- Automatic compression on upload
- Next-gen format generation (WebP, and AVIF if supported)
- Keep originals/backups (at least until you trust quality)
- Lazy-load only below-the-fold images (and exclude the LCP image)
What to Verify
After enabling the plugin:
- Inspect the HTML for hero/product images and confirm the output is sane (
<img>or<picture>). - Confirm the image file served is WebP/AVIF when supported.
- Confirm dimensions are present (CLS safety).
- Confirm the LCP image is not lazy-loaded.
Common Problems
| Problem | Likely Cause | Fix |
|---|---|---|
| CLS increases | Missing dimensions / markup rewrite | Ensure width/height, fix theme/builder templates |
| WebP/AVIF not served | Cache/CDN rewrites or missing rewrite rules | Verify plugin delivery method and purge caches |
| Quality too low | Over-aggressive compression | Increase quality level or exclude specific images |
| Images optimized twice | Multiple optimizers active | Disable one system and re-test |