How to optimise images for your website

Understanding the trade-offs

Before we dive into the technical details, it’s important to understand there’s no single “perfect” way to save images. Instead, you’re always balancing three factors:

The key is making these trade-offs consciously rather than by accident.

---

Part 1: Image Dimensions (Getting the Size Right)

The first and most important step happens before you even upload: sizing your images to match how they’ll actually be displayed.

Why dimensions matter

If you upload a 6000px wide image to display in a 1200px wide container, your users are downloading 5x more data than necessary. Their browsers then have to resize that massive image every time the page loads – wasting bandwidth, slowing down the page, and hurting your SEO.

Practical sizing guidelines

Responsive considerations

Modern websites adapt to different screen sizes. Ideally, you’d serve different image sizes to mobile vs desktop users. WordPress and most modern CMS platforms handle this automatically by creating multiple sizes when you upload. That’s why it’s still important to upload sensibly-sized originals rather than massive files – the CMS generates smaller versions from your upload.

Pro tip: If you’re unsure what size you need, inspect your live website with browser developer tools to see the actual display dimensions, then size your image to roughly double that (to account for high-resolution displays).

---

Part 2: Choosing the Right Format

Different image formats exist for different purposes. Using the wrong format is one of the most common mistakes we see.

JPG / JPEG – For photographs

How compression works: JPG uses “lossy” compression – it discards some image data to reduce file size. At 100% quality, you get everything. At 60-80% quality, you get a much smaller file with quality loss that’s barely noticeable. Below 60%, degradation becomes more visible.

Recommended quality settings:

• 80-85% for hero images where quality matters
• 65-75% for general content images
• 60-70% for thumbnails and smaller images

The visual test: Always preview your compressed image at 100% zoom. If you can’t spot the compression artefacts, you’ve found your sweet spot.

PNG – For graphics and transparency

When to use PNG: If your image has transparency, you need PNG (or SVG for simple graphics). If it’s a screenshot with text, PNG keeps text sharp. For photographs without transparency, JPG is almost always better.

SVG – For scalable graphics

WordPress note: See the bonus section below on enabling SVG uploads in WordPress.

Modern formats: WebP and AVIF

WebP offers better compression than JPG/PNG and is now supported by all modern browsers. AVIF is even more efficient but still gaining adoption.

The catch: Not all image editing software supports these formats well yet, and older browsers may not display them.

Our recommendation: Let your CMS or image optimisation tools handle conversion to WebP automatically. Upload JPG/PNG as your source, and let the system serve WebP to browsers that support it.

---

Part 4: SEO and Performance Considerations

Search engines care deeply about page speed, and images are your biggest opportunity to improve it.

How images affect SEO

Page load speed is a direct ranking factor. Google’s PageSpeed Insights will specifically flag oversized images. Each second of load time can mean:

• Higher bounce rates (users leaving before the page loads)
• Lower search rankings
• Fewer conversions

But here’s the nuance: A visually impressive site can outrank a faster site if users engage more with your content. The question isn’t “should I prioritise speed or quality?” – it’s “where’s my optimal balance?”

Finding your balance

For portfolio and photography sites: You’re showcasing visual work, so quality is paramount. Acceptable approach:

• Larger file sizes for hero and portfolio images
• Higher JPG quality settings (80-85%)
• Fast-loading thumbnails that lead to high-quality detail views
• Consider lazy loading (images load as users scroll to them)

For business and information sites: Speed and accessibility take priority over visual perfection. Recommended approach:

• Aggressive but sensible compression (65-75% JPG quality)
• Correctly sized images, not oversized ones
• WebP conversion where possible
• Focus on overall page performance

For eCommerce: Product images need sufficient quality for purchase decisions, but speed affects conversion rates directly. Middle ground:

• Medium-high quality for main product images (75-80%)
• Smaller file sizes for thumbnails and gallery images
• Multiple sizes for responsive delivery
• Fast initial page loads with larger images loading on interaction

File size targets

Rough guidelines:

• Hero images: Aim for under 200KB, maximum 400KB
• Content images: Aim for under 100KB, maximum 200KB
• Thumbnails: Under 50KB

Reality check: These are goals, not absolutes. A stunning hero image at 350KB is better than a mediocre one at 100KB. But a content image at 800KB is almost certainly too large.

---

Part 5: Image Sourcing

Where you get your images matters both legally and practically.

Copyright considerations

Never use images from Google Image Search without verification. Just because an image appears in search results doesn’t mean you can use it.

Free stock photography:

• Unsplash – High-quality photography, completely free
• Pexels – Large collection, free for commercial use
• Pixabay – Photos and illustrations, all free

Paid stock photography:

• Shutterstock, iStock, Adobe Stock – Professional quality, requires licence
• Usually offers more specific and polished options
• Consider the free alternatives first for most projects

Your own photography: This is always the best option for authenticity and brand consistency. Even smartphone photos, when properly lit and composed, often work better than stock photography.

---

Practical Workflow Summary

When you’re ready to add images to your website, follow this process:

1. Decide on purpose and placement
   • Where will this image appear?
   • What dimensions does it need?
   • How important is visual quality vs file size?
2. Size your image
   • Resize to appropriate dimensions (not just before upload, but as the first step)
   • Use image editing software or online tools
   • Remember 2x dimensions for retina displays if relevant
3. Choose format
   • Photograph → JPG
   • Logo/icon with transparency → PNG (or SVG if vector)
   • Screenshot with text → PNG
   • Simple graphic → Consider SVG
4. Compress
   • Use Compressor.io or similar tool
   • Compare before/after at 100% zoom
   • Aim for smallest file that maintains acceptable quality
5. Upload and test
   • Check the image on your live site
   • Test on mobile devices
   • Use PageSpeed Insights to verify you’ve hit reasonable file sizes
6. Iterate if needed
   • If quality suffers, re-export with higher quality settings
   • If file size is too large, try more aggressive compression or smaller dimensions

---

Remember: The goal isn’t perfection – it’s finding the right balance for your specific website and audience. A site that loads quickly with good-enough images will almost always outperform a slow site with perfect images.

---

Bonus: Enabling SVG Uploads in WordPress

By default, WordPress blocks SVG files for security reasons. If you want to upload SVG logos or icons, you’ll need to enable support.

Option 1: Add code to your theme

If you’re comfortable editing theme files (or have a developer who can help), add this to your theme’s functions.php:

/**
 * Allow SVG upload
 */
add_filter('upload_mimes', function( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});

Option 2: Use a plugin

For a no-code solution, install a plugin like SVG Support from the WordPress plugin directory. This handles SVG uploads safely without touching any code.

---

Need Help?

If you’re working on a website project and want guidance on image optimisation, or if you’d like us to audit your existing site’s image performance, get in touch. We’re here to help make your website as fast and effective as possible.