Images make a website feel alive, but they are also usually the heaviest part of a page. A single uncompressed photo can weigh more than all of your CSS and JavaScript combined. On many WordPress sites, an image is also the Largest Contentful Paint element, so how you handle images directly affects your Core Web Vitals.
The good news is that image optimization is one of the safest and most effective speed improvements you can make. Here is the complete process.
1. Resize Before You Upload
The most common mistake is uploading a photo straight from a phone or camera, often 4000 pixels wide or more, and displaying it in a 700 pixel column. WordPress will generate smaller versions, but the huge original still sits in your media library and sometimes ends up on the page.
A simple rule: export images at the largest size they will be displayed, or at most twice that for sharp screens. For a full-width hero, 1600 to 2000 pixels is usually plenty. For blog content, 1200 pixels is typically enough.
2. Choose the Right Format
- WebP gives much smaller files than JPEG or PNG at similar quality and is supported by all modern browsers. It should be your default.
- AVIF compresses even better, particularly for photos, and is widely supported now. Encoding is slower, so use it where it makes sense.
- JPEG is still fine as a fallback for photographs.
- PNG is for images that need transparency or crisp flat graphics, but WebP often replaces it.
- SVG is best for logos and icons because it stays sharp at any size and is tiny.
WordPress supports WebP uploads natively. Many image plugins and CDNs can convert existing images and serve the best format to each browser automatically.
3. Compress Without Visible Loss
Compression removes data your eyes will not notice. For photos, a quality setting around 75 to 85 usually gives a large saving with no visible difference. Try it on a few images and compare them at full size. Bulk tools and plugins can compress your existing library, and many keep the original so you can restore it.
4. Serve Responsive Images
WordPress automatically adds srcset and sizes attributes so that a phone downloads a smaller version than a desktop. This only works if the right image sizes exist and your theme outputs images using WordPress functions. Check that:
- Your theme defines sensible image sizes for its layout.
- You insert images with the image block or featured image rather than hard-coding a single large file.
- Background images used through CSS also have smaller versions for mobile, since CSS backgrounds do not get srcset.
5. Lazy-Load Below the Fold Only
Lazy loading postpones downloading images until the visitor scrolls near them. It is excellent for long pages. WordPress adds loading=”lazy” to images by default, but it should not be applied to the first large image at the top. A lazy-loaded hero is a classic cause of poor LCP, and I cover it in how to improve LCP on WordPress.
Also mark the hero image with fetchpriority=”high” so the browser fetches it first.
6. Set Width and Height
Always include width and height attributes, or use the CSS aspect-ratio property, so the browser can reserve space before the image loads. This prevents layout jumps and protects your CLS score. See how to fix CLS for more.
7. Use a CDN
An image CDN stores your images in many locations and delivers them from the closest one. Many also resize and convert on the fly. This is particularly useful if you serve visitors in several regions, such as North America, the UK, Europe and Australia.
8. Rethink Video and Backgrounds
Autoplaying background videos are extremely heavy. If you must use video, compress it, keep it short, and consider a still image on mobile. For YouTube or Vimeo, replace the standard embed with a lightweight preview image that loads the player only when clicked. This can save hundreds of kilobytes per embed.
9. Clean Up Your Media Library
Over time, libraries fill with unused uploads and oversized originals. Remove what you do not use, but be careful: some plugins and page builders reference images in ways WordPress cannot easily detect. Take a backup before any cleanup, and use a tool that shows where each image is used.
A Quick Image Checklist
- Resize to the displayed size before uploading.
- Export as WebP or AVIF, with SVG for logos and icons.
- Compress to a quality of about 75 to 85.
- Keep the hero image eager and high priority.
- Lazy-load everything below the fold.
- Set width and height on every image.
- Add descriptive alt text for accessibility and search.
Images are a rare case where the right changes make a site both faster and better looking. If you would like a full review of your media, hero sections and templates, request a free speed audit and I will point out the biggest wins.
