Image optimization for WordPress: formats, sizes and lazy loading

On most websites, images make up more of the page weight than everything else combined. That makes them the easiest place to win back speed. Here's how I handle images on every WordPress site.

Upload sensible sizes

A photo straight from a phone or camera can be 4000 pixels wide and several megabytes. Very few layouts need more than about 2000 pixels for a full-width image.

WordPress helps a little here: since version 5.3, it automatically scales uploads larger than 2560 pixels down to that size and keeps the original separately. But that's still large, so resize images before uploading when you can.

Let WordPress serve the right size

When you upload an image, WordPress creates several smaller copies. Images inserted the normal way get a srcset, a list of these sizes that lets the browser download a small version on a phone and a larger one on a desktop.

This only works if you use the media library properly. Background images set in CSS and some page builder widgets don't always get it, so check what your key pages are actually loading.

Use modern formats

• WebP is much smaller than JPEG and PNG at the same quality, and every modern browser supports it. WordPress has supported WebP uploads since version 5.8.
• AVIF can be smaller still. WordPress supports it from version 6.5, as long as your server's image library can handle it.
• SVG is ideal for logos and icons. Be careful, though: SVG files can contain scripts, so only allow uploads from trusted users and use a plugin that sanitises them.

An image optimization plugin can convert existing images automatically and serve the modern format to browsers that support it.

Compress

Most images can lose a large share of their file size with no visible difference. Optimization plugins compress on upload and can bulk-process your existing library. Lossy compression at a high quality setting is almost always fine for photos.

Lazy-load, but not the hero

Since WordPress 5.5, images get loading="lazy" by default, so off-screen images are only downloaded when the visitor scrolls near them. That's great for long pages.

The exception is the main image at the top of the page. Lazy-loading it delays the most important content and hurts your Largest Contentful Paint. WordPress tries to skip lazy-loading for the first images, but page builders, sliders and plugins can override that, so check your hero.

Always set dimensions

When an image has no width and height, the browser doesn't know how much space to reserve, so the page jumps when it loads. WordPress adds dimensions for images inserted through the editor. Custom code, embeds and some widgets may not, which shows up as layout shift.

Use a CDN for busy sites

A content delivery network stores copies of your images on servers around the world, so visitors download them from somewhere close by. For sites with an international audience or a lot of images, it's a worthwhile upgrade.

A quick checklist

1. Resize before uploading; around 2000px wide is plenty for most full-width images
2. Serve WebP or AVIF
3. Compress everything, including the existing library
4. Lazy-load below the fold, never the hero
5. Make sure every image has width and height set

Want your images, and the rest of your site, optimised? Get in touch.