WordPress Image Optimization: Size, Format, Dimensions and Delivery
A practical image performance workflow for WordPress sites.
Short answer: Image optimization starts with serving the right dimensions and avoiding unnecessarily large files. Format, compression, responsive images, lazy loading and CDN delivery come after you understand what each template actually displays.
A 3000-pixel image displayed at 600 pixels wastes transfer even if it is compressed.
Right-size source images
A 3000-pixel image displayed at 600 pixels wastes transfer even if it is compressed.
Do not sacrifice important visual quality for a tiny score improvement; choose sensible compression for the content.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Use responsive srcset
Do not sacrifice important visual quality for a tiny score improvement; choose sensible compression for the content.
Hero/LCP images often need different loading behavior from gallery images far below the fold.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Choose efficient formats
Hero/LCP images often need different loading behavior from gallery images far below the fold.
A 3000-pixel image displayed at 600 pixels wastes transfer even if it is compressed.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Compress appropriately
A 3000-pixel image displayed at 600 pixels wastes transfer even if it is compressed.
Do not sacrifice important visual quality for a tiny score improvement; choose sensible compression for the content.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Lazy-load below the fold
Do not sacrifice important visual quality for a tiny score improvement; choose sensible compression for the content.
Hero/LCP images often need different loading behavior from gallery images far below the fold.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Prioritize the hero image
Hero/LCP images often need different loading behavior from gallery images far below the fold.
A 3000-pixel image displayed at 600 pixels wastes transfer even if it is compressed.
- Change one important variable at a time.
- Compare repeatable behavior rather than one isolated score.
- Keep reliability and maintainability ahead of marginal benchmark gains.
Practical decision rule
Fix the layer the evidence points to. Caching helps repeated server work; CSS and JavaScript work affect rendering and responsiveness; images and fonts affect transfer and discovery; hosting and application behavior affect origin response. Avoid solving a different problem just because a tool is popular.
Related guides
Sources and further reading
Editorial note: Product features, pricing and plan terms can change. Commercial claims are checked against current vendor documentation where cited; verify the live merchant page before purchase.