Services Tools Pricing About Process Referral Program News Contact Get Started
WordPress Image Optimisation: Faster Loading Photos That Keep Visitors Happy

WordPress Image Optimisation: Faster Loading Photos That Keep Visitors Happy

Learn how to optimise WordPress images properly. Simple steps to compress photos, choose the right formats, and speed up your website without losing quality.

Your website's photos are probably slowing it down. Most WordPress sites we audit have image problems that add 3-5 seconds to loading times. That's enough to lose half your visitors before they even see your content.

Here's how to fix it without touching a line of code.

Why WordPress Image Optimisation Matters

Large images are the biggest culprit behind slow websites. A single unoptimised photo can be 5MB or more. That's painful on mobile connections.

Fast-loading images improve your website's page speed, which affects:

  • Visitor experience (nobody waits for slow sites)
  • Google rankings (speed is a ranking factor)
  • Conversion rates (faster sites sell more)

The good news? Fixing this doesn't require technical skills.

Step 1: Choose the Right Image Format

Not all image formats are equal. Here's when to use each:

JPEG - Best for photos with lots of colours (product shots, team photos, landscapes) PNG - Best for graphics with transparency or few colours (logos, icons) WebP - Best overall format, 25-35% smaller files, supported by all modern browsers

Quick rule: If you're uploading photos to WordPress, use JPEG or WebP. Avoid PNG for photos unless you need transparency.

Step 2: Resize Images Before Upload

This is the biggest mistake we see. Don't upload a 4000px wide photo if it'll display at 800px on your site.

How to resize:

  1. Check how wide your content area is (usually 1200px or less)
  2. Resize photos to match or slightly larger
  3. For hero images, 1920px wide is plenty

Free tools for resizing:

  • Windows: Paint or Photos app
  • Mac: Preview app
  • Online: TinyPNG or Squoosh (Google's tool)

Step 3: Compress Images Without Losing Quality

Even after resizing, you can reduce file sizes by 60-80% without visible quality loss.

Option 1: Use a WordPress Plugin (Recommended)

Smush (free version):

  1. Install from your WordPress dashboard
  2. Go to Media > Smush
  3. Click "Bulk Smush" to optimise existing images
  4. Enable auto-compression for new uploads

ShortPixel (freemium):

  1. Install the plugin
  2. Get a free API key (100 images/month)
  3. Set compression to "Lossy" for best size reduction
  4. Run bulk optimisation

Both plugins handle WebP conversion automatically.

Option 2: Manual Compression (More Control)

Use TinyPNG or Squoosh before uploading:

  1. Visit tinypng.com or squoosh.app
  2. Upload your image
  3. Download the compressed version
  4. Upload to WordPress

This gives you more control but takes longer.

Step 4: Enable Lazy Loading

Lazy loading only loads images when visitors scroll to them. This speeds up initial page loads significantly.

WordPress 5.5+ has built-in lazy loading, but it's basic. For better control:

  1. Install Lazy Load by WP Rocket (free)
  2. Go to Settings > Lazy Load
  3. Enable lazy loading for images
  4. Test your site to ensure it works

You'll see "loading='lazy'" added to your image HTML. That's working correctly.

Step 5: Use WordPress's Responsive Images

WordPress automatically creates multiple image sizes when you upload photos. This is good - it serves smaller images to mobile devices.

To check this is working:

  1. Right-click an image on your site
  2. Select "Inspect Element"
  3. Look for srcset in the image code

If you see multiple URLs with different sizes, WordPress is serving responsive images correctly.

Step 6: Optimise Your Image File Names

Before uploading, rename your images descriptively:

Bad: IMG_1234.jpg, DSC_0001.jpg Good: cardiff-office-team-photo.jpg, blue-widget-product.jpg

This helps with SEO and makes your media library easier to manage.

Common Issues and Solutions

Images look blurry after compression:

  • Try lower compression settings
  • Check if the original image was sharp enough
  • Consider using PNG for graphics instead of JPEG

Lazy loading breaks your slider:

  • Exclude slider images from lazy loading
  • Most lazy loading plugins have exclusion options

WebP images don't show in older browsers:

  • Good plugins provide fallbacks automatically
  • Older browsers (IE) will see JPEG instead

Plugin slows down your admin area:

  • Disable auto-compression during bulk uploads
  • Process images in smaller batches

Testing Your Improvements

Use these tools to check your progress:

  1. GTmetrix - Shows image optimisation opportunities
  2. Google PageSpeed Insights - Official Google tool
  3. Our free website audit tool - Quick WordPress-specific analysis

Look for improvements in:

  • Overall page load time
  • Largest Contentful Paint (LCP)
  • Image compression scores

Advanced: Content Delivery Networks (CDNs)

For busy sites, consider a CDN. These serve your images from servers closer to your visitors.

Cloudflare (free tier available):

  • Automatically optimises images
  • Serves from global network
  • Works with any WordPress hosting

MaxCDN/StackPath (paid):

  • More control over image processing
  • Better for high-traffic sites

What's Next?

Image optimisation is just one part of WordPress performance. Consider these next steps:

Remember: every second counts. Visitors notice the difference between a 2-second and 5-second loading site. Your images shouldn't be the reason they leave.

Start with the plugin approach if you're not technical. It handles most optimisation automatically and improves your site immediately. You can always fine-tune later as you learn more about WordPress performance.

WC

Web Cardiff

Cardiff's WordPress specialists helping Welsh businesses grow online.

Need help with your website?

Get a fast, secure website that wins you business.

Get in touch