When I run a speed audit on a slow WordPress site, images are the first thing I look at, and they’re usually the biggest problem. A homepage hero uploaded straight from a phone at 5MB. Product photos at 4000 pixels wide displayed in a 300 pixel box. Twenty gallery images loading before the visitor has even scrolled.
The good news is that images are also the easiest place to win back speed. Unlike database problems or bloated plugins, image issues usually have simple fixes, and many of them can be automated. Done properly, image optimization can cut page weight dramatically without anyone noticing a difference in quality.
Here’s how I approach it on client sites.
Why images matter so much
Images often make up the majority of a page’s total size. Every extra kilobyte has to travel over the network, which matters most on mobile connections. Large images also affect Core Web Vitals, the metrics Google uses to measure user experience:
- Largest Contentful Paint (LCP) measures how quickly the main content appears. On many pages, the largest element is an image, so a heavy hero image means a poor LCP.
- Cumulative Layout Shift (CLS) measures how much the page jumps around while loading. Images without defined dimensions cause content to shift as they load.
Fix the images and you often fix both.
Choose the right format
JPEG
Still a solid choice for photographs, with good compatibility everywhere. Use it when you need maximum compatibility, though modern formats usually do better.
PNG
Best for graphics with sharp edges, text or transparency, like logos and screenshots. PNG photos are usually far larger than they need to be. If you have photographs saved as PNG, converting them is often an instant win.
WebP
WebP produces noticeably smaller files than JPEG or PNG at similar quality, and supports transparency. All modern browsers support it, and WordPress has supported WebP uploads since version 5.8. For most sites today, WebP is the sensible default.
AVIF
AVIF compresses even better than WebP in many cases, especially for photographs. WordPress added support for AVIF uploads in version 6.5, provided your server’s image library supports it. Encoding AVIF takes more processing power, so check that your hosting handles it well.
SVG
Ideal for logos and icons, because SVGs are vector graphics that stay sharp at any size and are often tiny. WordPress doesn’t allow SVG uploads by default, for good reason: SVG files can contain scripts. If you enable SVG uploads, use a solution that sanitises the files, and restrict uploads to trusted users.
My usual approach: WebP for photos and most images, SVG for logos and icons, PNG only where specifically needed.
Size images for how they’re displayed
The most common mistake I see is uploading images far larger than they’re ever displayed. If an image appears at 800 pixels wide on the largest screen, there’s no reason to upload it at 4000 pixels.
WordPress helps here more than people realise. When you upload an image, it automatically creates several smaller versions: thumbnail, medium, medium_large, large and any sizes your theme registers. Since version 5.3, WordPress also scales down very large uploads to a maximum of 2560 pixels by default, keeping the original separately.
Even so, it’s good practice to resize images before uploading. A sensible maximum for most full-width images is around 1920 to 2400 pixels wide. For content images in a blog post, often 1200 to 1600 pixels is plenty.
Responsive images with srcset
WordPress automatically adds srcset and sizes attributes to images inserted through the editor. This lets the browser choose the most appropriate size for the visitor’s screen. A phone downloads a small version, a large desktop screen downloads a larger one.
This only works well if your theme registers sensible image sizes and uses WordPress functions to output images. Custom themes that hard-code full-size image URLs lose this benefit entirely. If you build themes, always output images with functions like wp_get_attachment_image:
This generates the srcset, sizes, width, height and alt attributes for you.
Compress images properly
Compression reduces file size by removing data the eye won’t miss. There are two types:
- Lossless compression reduces size without changing any pixels. Savings are modest.
- Lossy compression discards some detail for much bigger savings. At sensible quality settings, the difference is invisible to most people.
For photographs, lossy compression at a quality setting around 75 to 85 percent usually gives a great balance. Always compare before and after on a real screen. Some images, like product photos with fine detail, may need slightly higher quality.
You can compress images before uploading with desktop tools, or let a plugin or CDN handle it automatically. For sites with many contributors, automation is far more reliable than expecting everyone to compress images manually.
Automate with plugins or a CDN
Image optimization plugins can compress images on upload, convert them to WebP or AVIF, and bulk-process your existing media library. Image CDNs go further: they resize, convert and compress images on the fly and serve them from servers close to your visitors.
When choosing a solution, consider:
- Whether processing happens on your server or theirs. Server-side processing can strain cheap hosting.
- Whether original images are kept, so you can reprocess later.
- How modern formats are served, either by rewriting image URLs or using server rules.
- Cost, especially if pricing depends on the number of images or bandwidth.
On sites I manage with my own servers, I often handle conversion at the server level. On managed hosting, a well-regarded plugin or CDN is usually the easiest route.
Lazy loading, used correctly
Lazy loading delays loading images until they’re about to scroll into view. A long page with many images loads much faster, because the browser only fetches what the visitor actually sees.
WordPress has added native lazy loading to images since version 5.5, using the loading=”lazy” attribute. You usually don’t need a plugin for it.
But there’s an important exception. Never lazy load the main image at the top of the page. If your hero image is lazy loaded, the browser waits before fetching it, which delays LCP. WordPress tries to avoid this automatically by skipping lazy loading for the first images in the content, but themes and page builders sometimes get it wrong. Check your hero image’s HTML.
Prioritise your LCP image
Beyond not lazy loading it, you can tell the browser your main image is important. The fetchpriority=”high” attribute asks the browser to fetch that image early. Since version 6.3, WordPress adds this automatically to the image it thinks is most likely to be the LCP element.
If your theme outputs the hero image in an unusual way, for example as a CSS background, the browser can’t discover it early. In those cases, use a regular img element where possible, or preload the image in the page head.
Always define width and height
Images without width and height attributes cause layout shift. The browser doesn’t know how much space to reserve, so text jumps down when the image finally loads. That’s frustrating for visitors and hurts your CLS score.
WordPress includes dimensions automatically for images inserted through the editor. Problems usually come from custom code, page builders or images added with CSS. Make sure every image has dimensions, then use CSS such as max-width: 100% and height: auto to keep them responsive.
Don’t forget alt text
Alt text describes images for people using screen readers and helps search engines understand them. Describe what the image shows and why it’s there, in plain language. Decorative images should have empty alt text so screen readers skip them. Avoid stuffing keywords into alt attributes; write for people.
Clean up your media library
Over the years, media libraries fill up with unused images, duplicates and enormous originals. They don’t slow down page loads directly, but they inflate backups, slow migrations and waste storage.
Periodically review large files and images that aren’t attached to any content. Be careful with automated cleanup tools, though. Images used in page builder layouts, custom fields or theme settings may not appear as “attached” and could be deleted by mistake. Always back up before cleaning.
Testing your results
After optimizing, measure the difference:
- Run your key pages through a performance testing tool and compare page weight and LCP before and after.
- Check the field data in Search Console’s Core Web Vitals report over the following weeks.
- Look at the network tab in your browser’s developer tools to confirm images are served in modern formats and sensible sizes.
Frequently asked questions
Will converting to WebP reduce image quality?
At sensible quality settings, most people can’t tell the difference. WebP generally achieves similar visual quality at smaller sizes than JPEG. Always compare a few images before applying settings across your whole library.
Do I still need an optimization plugin with modern WordPress?
WordPress handles responsive sizes, lazy loading and fetchpriority, but it doesn’t heavily compress images or convert existing ones to modern formats on its own. A plugin, CDN or server-level solution fills that gap.
Should I use AVIF or WebP?
WebP is the safe, widely supported choice. AVIF can produce smaller files, especially for photos, but encoding is slower and depends on your server. Many optimization tools serve AVIF where supported and fall back to WebP.
Why is my LCP still slow after optimizing images?
The image may be lazy loaded, discovered late because it’s a CSS background, or the server itself may be slow to respond. Check time to first byte and the hero image’s HTML attributes.
Final thoughts
Image optimization isn’t glamorous, but it’s one of the highest-impact improvements you can make to a WordPress site. Use modern formats, upload sensible sizes, let WordPress generate responsive versions, compress properly and handle your main image with care. Your pages will load faster, your Core Web Vitals will improve and your visitors will simply have a better experience.
