In Brief
Images are typically the biggest cause of slow WordPress sites, often accounting for half your page weight
Use JPEG for photographs, PNG for graphics needing transparency, and WebP for the smallest file sizes with modern browsers
Quality compression reduces file sizes by 40-60% with no visible difference to your visitors
Plugins like Imagify and ShortPixel handle optimisation automatically once you set them up
Always resize images before uploading
A single photo from your smartphone can be larger than your entire webpage should be.
If you’ve uploaded images directly to WordPress without optimising them first, your site is almost certainly slower than it needs to be.
This matters more than you might think. Over half of mobile visitors leave sites that take longer than three seconds to load. Google uses page speed as a ranking factor, and your Core Web Vitals scores directly affect where you appear in search results. Images affect both.
The good news is that image optimisation doesn’t require technical expertise.
With the right approach and a good plugin, you can reduce your image file sizes dramatically, speed up your site, and improve your search rankings. This guide shows you how.
Table of Contents
Why Images Slow Down Your WordPress Site
When you take a photo on your phone, the file is typically 3-5 megabytes.
Your entire webpage should ideally be under 2 megabytes total. Upload a few unoptimised photos, and you’ve already created a performance problem.
WordPress tries to help by generating multiple versions of each image. When you upload a photo, it creates thumbnail, medium, and large versions automatically.
However, these are simply resized copies. WordPress doesn’t compress them, so you end up with several large files instead of one.
The impact shows up in your Core Web Vitals, particularly Largest Contentful Paint (LCP). This metric measures how long it takes for the main content to appear on screen.
Since images are often the largest element, slow-loading photos directly hurt your LCP score and your Google rankings.
You can check how your images affect performance using Google PageSpeed Insights. Enter your URL and look for warnings about “properly size images” or “serve images in next-gen formats”. These indicate your images need attention.
Resizing vs Optimising: What’s the Difference?
These terms often get used interchangeably, but they’re different things that work together.
Resizing changes the pixel dimensions of your image. For example, a 4000-pixel-wide photo becomes a 1200-pixel-wide photo. You’re reducing the amount of data in the image by making it physically smaller.
Optimising (or compression) keeps the dimensions the same but removes unnecessary data from the file. It strips out metadata, reduces colour information your eyes won’t notice, and uses clever algorithms to store the remaining data more efficiently.
For best results, do both.
Resize first to get your image to the right dimensions, then let a compression plugin optimise the file further. A 4000-pixel photo compressed to 500KB is still larger than a properly resized 1200-pixel photo compressed to 80KB.
Choosing the Right Image Format
Before thinking about compression, make sure you’re using the right format. The wrong choice can double or triple your file size unnecessarily.
When to Use JPEG, PNG, WebP, and AVIF
JPEG remains the standard for photographs. It handles colour gradients and complex scenes well while keeping file sizes reasonable. Use JPEG for product photos, team headshots, and any real-world photography.
PNG supports transparent backgrounds, making it essential for logos and graphics that need to sit cleanly on different coloured sections. PNG files are larger than JPEGs, so only use this format when you genuinely need transparency.
WebP combines the strengths of both formats while producing smaller files. A WebP photo is typically 25-30% smaller than an equivalent JPEG with the same visual quality. All modern browsers support WebP, and most image optimisation plugins can convert your existing images automatically.
AVIF is the newest format, offering even better compression than WebP. Browser support is growing but not yet universal. Some plugins now support AVIF conversion, though WebP remains the safer choice for now.
If you’re unsure, WebP is your best default option. It works everywhere that matters and delivers genuine file size savings.
Always Resize Images Before You Upload
Resizing is the single most effective thing you can do to reduce image file sizes.
A photo straight from your phone might be 4000 pixels wide, but your website probably displays it at 800-1200 pixels or less.
Uploading the full-size version is unnecessary, wastes bandwidth and storage.
Why Resizing Makes Such a Difference
File size increases dramatically with pixel dimensions. A 4000 x 3000 pixel photo contains 12 million pixels. Resize it to 1200 x 900 and you’re down to just over 1 million pixels.
That’s roughly a 90% reduction in data before any compression happens.
WordPress does generate smaller versions of your uploads, but it keeps the original too. If you upload a 5MB photo, WordPress stores that 5MB file plus all the resized versions. Your media library fills up quickly, and backup files become unnecessarily large.
What Dimensions Should You Use?
Most website images don’t need to be wider than 1500-1920 pixels. Here’s a practical guide:
- Blog post images: 1200 pixels wide is plenty for most themes
- Product photos: 800-1000 pixels wide, unless you offer zoom functionality
- Featured images: Check your theme, but 1200-1920 pixels typically covers all uses
- Full-width banners: 1920 pixels wide matches most desktop screens
- Thumbnails and icons: Let WordPress generate these from your resized upload
There’s no benefit to uploading larger images than your theme can display. A 4000-pixel image displayed at 800 pixels just wastes resources.
How to Resize Images
You don’t need expensive software. Several free options work well:
On Windows: The built-in Photos app can resize images. Open the image, click the three dots menu, select Resize, and choose your dimensions.
On Mac: Preview handles resizing easily. Open the image, go to Tools > Adjust Size, and enter your preferred width. Keep “Scale proportionally” ticked.
Online tools: Sites like iLoveIMG and Squoosh let you resize images in your browser without installing anything. Upload, set your dimensions, and download the smaller version.
Bulk resizing: If you have many images to process, IrfanView (Windows) or XnConvert (Windows/Mac) can resize entire folders at once.
Get into the habit of resizing before every upload. It takes seconds and makes more difference than any other single step.
How to Compress Images Without Losing Quality
Once you have uploaded the correctly sized image it needs to be ‘compressed’ to reduce the file size further.
Compression removes unnecessary data from your image files. Done well, visitors won’t notice any quality difference, but your pages will load noticeably faster.
Understanding Lossy and Lossless Compression
Lossless compression keeps every bit of image data intact. The quality is identical to the original, but file size reductions are modest at around 10-20%. Use this for images where precision matters, such as detailed product shots or technical diagrams.
Lossy compression removes data your eyes won’t miss. It sounds alarming, but good lossy compression at 80-85% quality produces images that look identical to originals while being 40-60% smaller. For most website images, lossy compression at these settings gives you the best balance of quality and speed.
The key is that compression removes redundant information and data in frequency ranges humans don’t perceive well. Your product photos will still look sharp and professional.
WordPress Image Optimisation Plugins That Actually Work
Manually compressing each image before upload is tedious and easy to forget. A good plugin handles everything automatically, optimising new uploads and letting you compress your existing media library in bulk.
Comparing Your Options
Imagify is what we use at Respect Experts. It’s made by the same team behind WP Rocket, so they work well together. Setup is straightforward, and the automatic compression means you can upload images and forget about them. The free tier includes 20MB of optimisation per month.
ShortPixel offers 100 free image credits monthly, which suits sites that don’t upload many images. It supports lossy, glossy, and lossless compression, plus automatic WebP and AVIF conversion. The credit-based pricing keeps costs predictable.
Smush has the largest user base and a clean interface. The free version handles basic compression, while the pro version adds WebP conversion and CDN delivery. It’s a solid choice, though some features require the paid upgrade.
EWWW Image Optimizer takes a different approach by compressing images on your own server rather than sending them to external services. This appeals to privacy-conscious site owners, though it uses more server resources.
When choosing, look for automatic optimisation, bulk processing, WebP conversion, and the ability to restore original images if needed.
Understanding Lazy Loading
Lazy loading is useful because it prevents your browser from downloading images until they’re actually needed.
If your page has fifteen images but only four are visible without scrolling, lazy loading means visitors download just those four initially. The rest load smoothly as they scroll down.
WordPress has included native lazy loading since version 5.5, so your site probably uses it already. You can verify this by viewing your page source and looking for loading="lazy" on your image tags.
The benefit is a faster initial page load.
Your visitors see content sooner because the browser isn’t trying to download everything at once. This directly improves your Core Web Vitals scores, particularly LCP and Cumulative Layout Shift.
Caching plugins like WP Rocket enhance native lazy loading with features like low-quality placeholder images that fade into the full image. These create a smoother visual experience while maintaining the performance benefits.
Responsive Images and Why They Matter
Modern websites serve different image sizes to different devices.
A visitor on a mobile phone doesn’t need the same large image as someone on a desktop monitor.
WordPress handles this through responsive images.
When you upload an image, WordPress generates several sizes. Your theme should use these intelligently, serving smaller versions to mobile visitors and larger versions to desktop users. This happens through the srcset attribute in your image code.
Check whether your theme uses responsive images properly.
View your page source, find an image tag, and look for the srcset attribute listing multiple image URLs with different widths. If it’s missing, your theme may be serving oversized images to mobile visitors, wasting bandwidth and slowing their experience.
Quick Wins You Can Start Today
You don’t need to install anything to begin improving your image performance. These habits make a genuine difference.
Check file sizes before uploading. Right-click any image file and check its size. If it’s over 500KB, it almost certainly needs resizing or compression before you upload it. Getting into this habit catches problems before they reach your site.
Name files descriptively. Rename “IMG_4523.jpg” to “blue-ceramic-coffee-mug.jpg” before uploading. Descriptive file names help search engines understand your images and improve your chances of appearing in image search results.
Always add alt text. In the WordPress media library, every image has an alt text field. Fill it in with a clear, concise description of what the image shows. This helps visually impaired visitors using screen readers and gives Google context about your content. Aim for 5-15 words that describe the image naturally.
Audit your media library. Go to Media > Library in your WordPress dashboard and switch to list view. Sort by date and review older images. Delete ones you no longer use. WordPress keeps images from deleted posts, and these accumulate over time.
Test your current performance. Run your homepage through Google PageSpeed Insights right now. Note your score and any image-related warnings. After implementing the steps in this guide, test again to see your improvement.
When to Get Help
Most small business owners can handle image optimisation themselves using the guidance above. Install a plugin, configure it once, and let it work automatically.
However, some situations benefit from professional attention.
If your site has thousands of existing images, bulk optimisation can take considerable time and occasionally causes issues that need troubleshooting. Complex sites with custom image handling may need configuration adjustments.
And if you’re seeing performance problems despite optimised images, the cause might lie elsewhere.
Speed optimisation is part of what we include in our WordPress maintenance service at Respect Experts.
We set up and configure Imagify, ensure lazy loading works correctly, and monitor your site’s performance over time. If speed issues arise, we identify and fix them before they affect your visitors.
Whether you handle it yourself or get help, addressing your images is one of the most effective ways to speed up your WordPress site. The improvement in loading times, user experience, and search rankings makes the effort worthwhile.
A Quick Example
Let’s run through an example and see how the file size changes each time. First, we will download a free photo image from unsplash.com.
Next, we will resize the image to 1000 pixels wide, perfect for this page.
Now we will optimise the image.
Frequently Asked Questions
Use Google PageSpeed Insights and enter your website address. The results will show your Core Web Vitals scores and list specific issues affecting performance. Look for warnings about “properly size images”, “serve images in next-gen formats”, or “defer offscreen images”. GTmetrix provides similar analysis with a visual waterfall showing exactly how long each image takes to load.
Not with sensible settings. Quality compression at 80-85% removes data your eyes can’t detect, so the visual difference is imperceptible. Good plugins let you compare the original and compressed versions side by side before committing. They also keep backup copies, so you can restore originals if you’re ever unhappy with the results.
Both are modern formats offering better compression than JPEG. WebP is more established with universal browser support and typically produces files 25-30% smaller than JPEG. AVIF is newer, offering even better compression, but browser support isn’t complete yet. For most sites, WebP is the practical choice today, with AVIF worth considering as support improves.
Using a plugin is more reliable because it happens automatically every time. You won’t forget, and the plugin optimises all the additional sizes WordPress creates. That said, resizing large images before upload is still worthwhile. A plugin compressing a 5MB original produces a larger result than one compressing a 1MB original.
All three handle the fundamentals well. Imagify integrates smoothly with WP Rocket and has a simple interface. ShortPixel offers more free monthly credits and supports AVIF. Smush has the largest community and extensive documentation. Try the free version of whichever appeals to you. Switching later isn’t difficult if you change your mind.
No, Google specifically recommends lazy loading. Search engines understand the technique and index lazy-loaded images normally. In fact, lazy loading can help SEO by improving your Core Web Vitals scores. WordPress has included native lazy loading since version 5.5, and Google’s own PageSpeed tool suggests enabling it.
Results depend on your starting point. Sites with many large, unoptimised images commonly see 40-60% improvements in loading time. Even well-maintained sites typically improve by 20-30%. The real measure is your Core Web Vitals scores in Google Search Console, which affect your search rankings.
Yes, all major plugins include bulk optimisation. Go to the plugin’s settings and look for a bulk optimise or compress all option. The plugin works through your existing images, compressing each one. This runs in the background, so you can continue using your site normally. Large libraries may take several hours to process completely.