To speed up a WordPress site with images: resize before uploading, compress, serve WebP, let WordPress create responsive sizes, lazy-load images below the fold and preload the main hero image. Images are often the heaviest part of a page, so optimising them is one of the quickest ways to improve Largest Contentful Paint (LCP) and your Google page experience.
- Never upload 5 MB phone photos straight to WordPress.
- Use WebP for content images; keep originals offline.
- Do not lazy-load the hero image; preload it instead.
- Always set width and height to avoid layout shift (CLS).
Why images slow down WordPress
Google’s Core Web Vitals measure loading (LCP), interactivity (INP) and visual stability (CLS). Heavy or badly configured images hurt LCP and CLS directly.
1. Resize before you upload
Resize photos to about 1600 to 2000 px for full-width images and 1200 px for content images. Use the free Image Cropper & Compressor before uploading.
2. Compress every image
Compress at around 70 to 80% quality with the free Image Compressor, or use an optimisation plugin that compresses automatically on upload (many sites use plugins such as Smush, ShortPixel or EWWW).
3. Serve WebP (or AVIF)
WordPress supports WebP uploads, and optimisation plugins can create WebP versions automatically. WebP files are typically 25 to 35% smaller than JPG at similar quality. Convert manually with the free Image Converter.
4. Let WordPress serve responsive sizes
WordPress creates several sizes of each upload and adds srcset, so phones download smaller files. Use the theme’s image blocks and widgets instead of hard-coding huge images in HTML.
5. Lazy-load below the fold, preload the hero
- Lazy-load content imagesWordPress adds
loading="lazy"to most images automatically. - Exclude the hero imageThe first big image should load immediately. Lazy-loading it delays LCP.
- Preload or prioritise the heroUse your caching plugin’s preload option or
fetchpriority="high".
6. Always set width and height
Images without dimensions make the page jump while loading, which hurts CLS. WordPress adds dimensions for images inserted normally; check custom HTML and page builder widgets.
7. Use a CDN and caching
A content delivery network serves images from servers close to visitors, and caching plugins reduce server load. Many hosts include a CDN.
| Before | After optimisation |
|---|---|
| 4.2 MB hero JPG, 4000 px | 180 KB WebP, 1920 px |
| Lazy-loaded hero | Preloaded hero |
| No width/height | Dimensions set, no layout shift |
Illustrative example.
Need expert help?
Speed optimisation involves images, caching, scripts, fonts and hosting. Tanvir WebXprt fixes slow WordPress and Elementor sites and improves Core Web Vitals. See our speed optimisation services or get an instant quote. For the basics of shrinking photos, read how to reduce image size without losing quality.
Frequently asked questions
How do I optimise images in WordPress?
Resize before upload, compress, serve WebP, let WordPress generate responsive sizes, lazy-load images below the fold and preload the hero image.
Should I lazy-load all images?
No. Lazy-load images below the fold, but load the main hero image immediately, because lazy-loading it slows Largest Contentful Paint.
Does WordPress support WebP?
Yes. WordPress supports WebP uploads, and many optimisation plugins can create WebP versions automatically.
What image size is best for WordPress?
About 1600 to 2000 px wide for full-width images and around 1200 px for content images, compressed to under 200 KB where possible.
Shrink photos for websites, email and forms in seconds, privately in your browser.
Guides for this tool
Guide · 3 min readLossy vs Lossless Compression: Which Should You Use for Images?
Guide · 3 min readHow to Email Large Photos: Make Images Small Enough to Send
Guide · 3 min readHow to Send High-Quality Photos on WhatsApp (HD and Original)
Guide · 3 min readHow to Reduce Image Size Without Losing QualityWant a tool, website or app like this for your business?
Every free tool on this site is designed and coded by Tanvir H, a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience and 650+ projects for clients worldwide. Fast, mobile-first, search-optimised websites that turn visitors into customers.
- 650+ projects
- 7+ years
- 4.9★ rating
- Govt. registered freelancer
