In Brief
Images typically account for 30-50% of your page weight and are the main cause of slow sites
WebP format produces files 70-80% smaller than JPEG with no visible quality loss
Resize images before uploading to approximately 1.5x your content width
Free plugins like Imagify or ShortPixel handle compression automatically
WordPress has built-in lazy loading since version 5.5
Your WordPress site is running slowly, and Google PageSpeed Insights keeps flagging images as the culprit.
This is one of the most common problems we see with small business websites.
Large, unoptimised images drag down loading times, yet many site owners don’t realise how simple the fix can be.
The consequences go beyond frustrated visitors. Google uses site speed as a ranking factor, which means sluggish pages can hurt your search visibility.
Research shows that 53% of mobile users abandon websites that take longer than three seconds to load. If your homepage weighs in at several megabytes because of oversized photos, you’re losing potential customers before they even see what you offer.
This guide covers everything you need to know about WordPress image optimisation.
You’ll learn which file formats work best, how to compress images without losing quality, and which plugins can automate the process. By the end, you’ll have a clear action plan to make your site noticeably faster.
Table of Contents
Why Image Optimisation Matters
Images typically account for 30-50% of a web page’s total size.
On image-heavy pages like portfolios or product galleries, that figure often exceeds 70%. When visitors load your site, their browser downloads every image on the page. Larger images mean longer download times, particularly on mobile connections where many of your visitors browse.
The business impact is real and measurable. Slow sites have higher bounce rates, meaning visitors leave without exploring further.
For e-commerce sites, every second of delay can reduce conversions by up to 7%. Even a one-second improvement in loading time can make a noticeable difference to how many visitors stay and take action.
The Core Web Vitals Connection
Google measures website performance through Core Web Vitals, and one key metric is Largest Contentful Paint (LCP). This measures how long it takes for the biggest visible element to load, which is often your hero image or main banner. Google recommends LCP under 2.5 seconds for good performance.
If your main image is a 3MB file straight from your phone, you’ll struggle to meet that threshold regardless of how fast your hosting is.
Understanding Image Formats and When to Use Each
Before optimising anything, you need to understand the different image formats and their strengths. Choosing the wrong format can mean unnecessarily large files or poor image quality.
JPEG, PNG, WebP, and SVG Explained
JPEG works best for photographs and images with many colours. It supports compression, allowing you to reduce file size at the cost of some quality. For most product photos and blog images, JPEG remains a solid choice.
PNG handles graphics with transparency, like logos with clear backgrounds. However, PNG files are typically much larger than JPEGs. Use PNG only when you need transparency; otherwise, stick with JPEG or WebP.
WebP is the modern standard and the format you should aim for. Developed by Google, it produces files 70-80% smaller than JPEG at similar quality levels. All modern browsers now support WebP, including Chrome, Firefox, Safari, and Edge. Most optimisation plugins convert your images to WebP automatically and serve JPEG versions to the handful of older browsers that don’t support it.
SVG is ideal for logos, icons, and simple graphics. Unlike the other formats, SVG files are vector-based, meaning they scale to any size without losing quality. They’re also typically tiny in file size. If your logo is currently a large PNG, converting it to SVG could reduce the file from 200KB to under 5KB.
Think of WebP as your default choice for photographs and complex images. Use SVG for logos and icons. Reserve PNG for situations where you need transparency and WebP isn’t an option.
How to Optimise Images Before Uploading
Many site owners skip this step and upload images straight from their phones or cameras. Those images are often 3000-4000 pixels wide and several megabytes in size.
Even with plugin compression afterwards, you’re wasting storage space and server resources.
Resizing before uploading makes a significant difference. Your content area is probably around 800-1000 pixels wide. Uploading a 4000-pixel image to display at 800 pixels means the browser downloads roughly five times more data than necessary.
Finding the Right Dimensions
A good rule is to make images 1.5 to 2 times your content width. If your blog posts display at 800 pixels wide, images around 1200-1600 pixels work well. This provides enough resolution for high-density screens (like Retina displays) without excessive file sizes.
Free tools make resizing straightforward.
On Mac, the Preview app handles basic resizing. On Windows, Paint works for simple adjustments. For more control, try Squoosh (a free web tool from Google) or TinyPNG.
Compress your image after resizing, then upload the smaller version to WordPress.
Keep your original files stored locally as a backup. If you ever need a larger version for print or other uses, you’ll have it available.
WordPress Image Optimisation Plugins
Manually optimising every image on an existing site isn’t practical, especially if you have hundreds of photos in your Media Library.
This is where image optimisation plugins prove their worth. They handle bulk compression of existing images and automatically process new uploads as you add them.
Recommended Free Plugins
Several excellent free plugins exist, each with different strengths.
Here are four worth considering:
Imagify offers straightforward setup and automatic compression of new uploads. It converts images to WebP format and provides three compression levels. The free tier includes 20MB per month, which suits smaller sites with modest upload needs.
ShortPixel delivers impressive compression ratios and includes 100 free image credits monthly. It handles WebP conversion and offers both lossy and lossless options. The interface is clean and particularly beginner-friendly.
EWWW Image Optimizer stands out because it works locally without requiring an external account. There’s no monthly limit on the basic features, though advanced options require payment. It’s a good choice if you prefer keeping everything on your own server.
Smush is one of the most popular options, though the free version limits you to 50 images at a time. It’s well-maintained and integrates smoothly with WordPress.
Lossy vs Lossless Compression
When setting up your plugin, you’ll choose between lossy and lossless compression.
Lossy compression removes some image data to achieve smaller files. Lossless keeps all original data but produces larger files.
For most websites, lossy compression at around 80-85% quality provides excellent results. The visual difference is virtually undetectable, but the file size reduction is substantial. Your visitors won’t notice slightly reduced quality, but they will notice faster loading times.
Don’t worry about permanently damaging your images. Most plugins keep your originals intact and create compressed versions separately. You can restore originals if needed.
Lazy Loading and Why It Helps
Lazy loading stops your browser from downloading every image the moment a page loads.
Instead, images load as visitors scroll down to see them. For pages with many images, this dramatically improves how quickly the visible content appears.
Since WordPress 5.5, lazy loading is built into WordPress core. It works automatically without any configuration needed. When someone visits your page, their browser loads only the images visible on screen, then fetches others as they scroll.
Lazy loading is particularly valuable for blog posts with multiple images, product galleries, and portfolio pages. The top of your page loads quickly because the browser focuses on what visitors can actually see.
As they scroll, images appear smoothly just before coming into view.
This approach helps your performance scores by reducing initial load time. Search engines understand lazy loading and won’t penalise you for images that load on scroll.
Don’t Forget Alt Text
While we’re discussing image optimisation, it’s worth mentioning alt text.
This is the descriptive text you add to images that helps search engines understand what each image shows. It also displays if an image fails to load and helps screen readers describe images to visually impaired visitors.
Good alt text is brief but descriptive. Instead of “image1.jpg” or just “photo”, write something like “small business owner reviewing website analytics on laptop”.
Include relevant keywords naturally, but don’t stuff them in artificially.
Alt text won’t speed up your site, but it supports your broader SEO efforts and makes your site more accessible.
Maintaining Optimised Images Over Time
Image optimisation isn’t something you do once and forget. As you publish new content, you need processes to keep images optimised consistently.
Set your chosen plugin to automatically optimise new uploads. This ensures every image you add gets compressed without manual intervention. Check that WebP conversion is enabled so visitors receive the smallest possible files.
Cleaning Your Media Library
Over time, your Media Library accumulates unused images. Deleted blog posts leave behind orphaned images that still take up space. Old featured images from redesigned pages linger unnecessarily.
Periodically review your Media Library and remove images you no longer use. Plugins like Media Cleaner can identify orphaned files, though always take a backup before bulk deletions. A leaner Media Library means faster backups and easier management.
Testing Your Results
After optimising your images, test your site speed to see the improvement. Run your homepage through Google PageSpeed Insights or GTmetrix. Compare the results to any previous tests you ran. You should see improved scores for LCP and overall performance.
Monitor your PageSpeed scores monthly. If you notice speed declining, check whether recent uploads need optimisation or if new plugins are affecting performance. Consistent monitoring catches problems before they noticeably impact visitors.
Getting Started
Begin by installing an image optimisation plugin and running it on your existing images. Imagify or ShortPixel both work well for beginners and have generous free tiers.
Enable automatic optimisation for new uploads and turn on WebP conversion.
Going forward, always resize images before uploading them.
Get into the habit of checking dimensions and compressing files before they reach WordPress. This combination of pre-upload preparation and automatic plugin optimisation keeps your site consistently fast.
After optimising, test your site speed and note the improvement. Your visitors will enjoy quicker loading times, and Google will recognise your improved performance in its rankings.
If you’d rather not manage this yourself, professional WordPress maintenance services can handle image optimisation as part of ongoing site care. Either way, faster images mean a better experience for everyone who visits your site.
Frequently Asked Questions
WebP is the best format for most WordPress images. It produces files 70-80% smaller than JPEG at similar quality levels. All modern browsers support WebP, and optimisation plugins automatically serve JPEG fallbacks to older browsers. Use PNG only when you need transparent backgrounds, and SVG for logos and icons.
Use Google PageSpeed Insights or GTmetrix to analyse your site. These free tools identify oversized images and show exactly how much they affect loading time. Look for warnings about image file sizes and Largest Contentful Paint (LCP) scores. Images flagged as too large need compression or resizing.
Read more: Why Is My WordPress Site So Slow?
No, not if you use sensible settings. Lossy compression at 80-85% quality reduces file size significantly with virtually no visible quality loss. Most visitors cannot tell the difference between compressed and original images when viewed on screen. You can always restore originals if you’re unhappy with results.
Yes. Free plugins like EWWW Image Optimizer, Imagify, and ShortPixel offer excellent compression for small to medium sites. The free tiers include enough monthly credits for most small businesses. Paid plans only become worthwhile if you upload hundreds of images monthly or need advanced features.
Resize images to approximately 1.5-2 times your content width before uploading. If your blog content displays at 800 pixels wide, upload images around 1200-1600 pixels wide. This provides enough resolution for high-density Retina screens without creating unnecessarily large files.
Lazy loading delays downloading images until visitors scroll to see them. This speeds up initial page loading because the browser focuses on visible content first. WordPress includes lazy loading by default since version 5.5, so you likely have it enabled already without needing to do anything.
Yes. Image optimisation plugins include bulk optimisation features that process your entire Media Library. This handles all existing images automatically. Running bulk optimisation on an existing site typically takes anywhere from a few minutes to several hours, depending on how many images you have.
Resize before uploading whenever possible. While WordPress creates multiple sizes automatically, uploading a 4000-pixel image when you only need 1200 pixels wastes storage and processing resources. Pre-resizing also means faster uploads and less strain on your hosting server.