If your website is slow, images are almost certainly the main culprit. They're not just a contributor to the problem - they're usually the problem. The good news? Fixing them is straightforward, doesn't require technical skills, and often produces dramatic improvements.
Why Images Are Such a Big Deal
According to HTTP Archive data, images account for roughly 50% of the average webpage's total weight. On image-heavy sites like portfolios or e-commerce stores, that figure can reach 80% or more.
Here's a real scenario that plays out constantly:
A business owner takes a beautiful photo with their smartphone. Modern phones capture images at 12-48 megapixels - resulting in files that are 4-10MB each. They upload this directly to their website as a hero image.
That single image now takes 4-8 seconds to load on a typical mobile connection. The visitor has left before seeing anything else on the page.
The same image, properly optimized, could be 200KB - loading in well under a second with no visible difference in quality.
This isn't a marginal improvement. It's transformative.
Understanding Image Formats
Before diving into optimization techniques, let's understand what we're working with. Different formats serve different purposes.
JPEG (or JPG)
Best for: Photographs and images with many colours and gradual tonal variations.
JPEG has been the web standard for photos since the 1990s. It uses "lossy" compression, meaning it permanently removes data to reduce file size. At reasonable quality settings (75-85%), this removal is imperceptible to human eyes.
Strengths: Universal browser support, good compression for photos, adjustable quality levels.
Weaknesses: No transparency support, quality degrades with repeated editing/saving, not ideal for graphics or text.
PNG
Best for: Graphics, logos, screenshots, images requiring transparency.
PNG uses "lossless" compression - no data is permanently discarded. This makes it excellent for graphics with text, logos, and anything requiring crisp edges or transparent backgrounds.
Strengths: Supports transparency, lossless quality, perfect for graphics.
Weaknesses: Much larger file sizes than JPEG for photographs, often misused for photos where JPEG would be better.
WebP
Best for: Almost everything. The modern replacement for both JPEG and PNG.
WebP was developed by Google and offers significantly better compression than JPEG while maintaining similar quality. It supports both lossy and lossless compression, plus transparency.
Strengths: 25-35% smaller files than JPEG at equivalent quality, supports transparency, supported by all modern browsers.
Weaknesses: Very old browsers don't support it (IE11, very old Safari), though this affects less than 2% of users now.
AVIF
Best for: Maximum compression when browser support isn't critical.
AVIF is the newest format, offering even better compression than WebP - typically 30-50% smaller files. However, browser support is still catching up.
Strengths: Best compression available, excellent quality.
Weaknesses: Not yet universally supported, slower to encode, not worth the compatibility headaches for most sites.
Choosing the Right Format
Here's a simple decision tree:
Is it a photograph or realistic image?
- Yes: Use WebP (with JPEG fallback if you're concerned about old browsers)
- No: Continue below
Does it need a transparent background?
- Yes: Use WebP or PNG
- No: Continue below
Is it a simple graphic with few colours (under 256)?
- Yes: Consider PNG-8 or SVG
- No: Use WebP or PNG
In practice: For most business websites, you'll use WebP for everything (photos, graphics, backgrounds) and PNG only when you specifically need transparency and are worried about the 2% of users on outdated browsers.
Compression: Lossy vs Lossless
Understanding compression types helps you make better decisions.
Lossy Compression
Permanently removes image data that humans typically can't perceive. Think of it like MP3 audio - the compression discards frequencies most people can't hear.
Results: Dramatic file size reductions (often 60-80%), with quality loss only visible at aggressive settings.
Use for: Photographs, hero images, backgrounds, product photos.
Lossless Compression
Reduces file size without discarding any data. The original can be perfectly reconstructed.
Results: Modest file size reductions (typically 10-30%), with zero quality loss.
Use for: Logos, graphics with text, images that will be edited further, anything where every pixel matters.
The Sweet Spot
For most website images, lossy compression at 75-85% quality provides:
- Significant file size reduction
- No visible quality difference to normal viewers
- Fast loading times
This is the setting you should use for hero images, background images, product photos, and team photos.
The Dimension Problem
File size isn't just about compression - the actual pixel dimensions matter enormously.
Here's math that explains why:
- A 4000 x 3000 pixel image contains 12 million pixels
- A 1200 x 900 pixel image contains 1.08 million pixels
That's 11 times more data in the larger image - before any compression is applied.
What Dimensions Should You Use?
The rule is simple: export images at the size they'll display, doubled for retina screens.
| Display Size | Export At |
|---|---|
| 600px wide | 1200px wide |
| 400px wide | 800px wide |
| Full-width hero (1200px max) | 2400px wide |
Your phone's 48-megapixel photos are spectacularly oversized for web use. A 4000px image displaying at 600px isn't sharper - it's just slower.
Common Scenarios
Hero/banner images: 2400px wide maximum. Even on a 27-inch monitor, this provides crisp display with good file sizes.
Blog post images: 1600px wide maximum. Most content areas are 600-800px, so 1600px gives crisp retina display.
Thumbnails and cards: 600-800px wide. These display at 300-400px typically.
Background images: 1920px wide for full-bleed backgrounds. Consider whether full quality is needed (subtle patterns can be more compressed).
Free Tools for Image Optimization
You don't need expensive software. These free tools handle everything.
Squoosh (squoosh.app)
Best for: Manual optimization with full control.
Google's free web app lets you compare original and compressed versions side-by-side, adjust quality in real-time, and export to any format.
How to use it:
- Go to squoosh.app
- Drag your image onto the page
- Select WebP or JPEG output
- Adjust quality slider until file size is acceptable
- Enable "Resize" and set your target dimensions
- Download the optimized image
Pro tip: The side-by-side comparison is invaluable. Drag the slider to spot any quality differences before committing.
TinyPNG (tinypng.com)
Best for: Quick batch compression without decisions.
Despite the name, TinyPNG handles both PNG and JPEG files. It applies intelligent compression automatically, typically achieving 60-80% reduction.
How to use it:
- Go to tinypng.com
- Drag up to 20 images onto the page
- Wait for compression
- Download all
Limitation: No dimension resizing. Use your image editor to resize first, then TinyPNG to compress.
ImageOptim (Mac only)
Best for: Desktop workflow, especially for multiple images.
A Mac application that compresses images by dragging them onto the app. It's lossless by default but can be configured for lossy compression.
Online converters for WebP
If your image editor doesn't export WebP, sites like CloudConvert or FreeConvert handle format conversion. Though Squoosh is usually easier.
Lazy Loading: Load Images Only When Needed
Here's a powerful technique that costs nothing and requires minimal effort.
The concept: Instead of loading all images when the page first loads, lazy loading waits until an image is about to scroll into view. A page with 20 images might only load 3-4 initially, loading the rest as needed.
The impact: If your page has ten images below the fold (not visible without scrolling), lazy loading removes them from initial page load entirely. This can reduce initial load time by 50% or more on image-heavy pages.
How to Implement Lazy Loading
Modern HTML (works everywhere):
Add loading="lazy" to your image tags:
<img src="photo.webp" loading="lazy" alt="Description">
That's it. Modern browsers handle the rest automatically.
WordPress: Most caching plugins include lazy loading. WP Rocket, Perfmatters, and Jetpack all offer this. WordPress itself now adds loading="lazy" to images by default.
Website builders: Squarespace, Wix, and Shopify all include lazy loading automatically on modern themes.
What Not to Lazy Load
Don't lazy load your hero image or anything "above the fold" (visible without scrolling). These should load immediately for good Largest Contentful Paint scores. Only lazy load images that require scrolling to see.
WordPress Image Optimization Plugins
If you're on WordPress, plugins can automate much of this work.
ShortPixel
What it does: Automatically compresses images on upload, converts to WebP, generates multiple sizes.
Cost: Free for 100 images/month, then ~£4/month for unlimited.
Verdict: Excellent choice. Good compression, easy setup, includes WebP conversion.
Imagify
What it does: Similar to ShortPixel - automatic compression and WebP conversion.
Cost: Free for 20MB/month, then from ~£5/month.
Verdict: Slightly more aggressive compression by default. Same makers as WP Rocket, so they work well together.
Smush
What it does: Compression and lazy loading in one plugin.
Cost: Free version available (limited), Pro from ~£5/month.
Verdict: The free version lacks WebP conversion, which limits its usefulness. Pro version is capable.
EWWW Image Optimizer
What it does: Server-side optimization without sending images to external services.
Cost: Free for basic compression, premium features from £6/month.
Verdict: Good for privacy-conscious users. Does the work on your own server.
My Recommendation
For most WordPress sites: ShortPixel or Imagify on the paid tier. The automatic WebP conversion alone is worth it. Set it up once and forget about it - every image you upload gets optimized automatically.
Important: Even with plugins, it's better to resize images before uploading. A plugin can compress a 4000px image, but it's still processing and storing unnecessarily large files.
Before and After: Real Examples
Let's look at what proper optimization achieves.
Example 1: Hero Image
Before:
- Original camera photo: 4032 x 3024 pixels
- Format: JPEG (uncompressed from camera)
- File size: 6.2MB
- Load time on 4G: 8+ seconds
After:
- Resized to 2400 x 1350 pixels
- Converted to WebP at 80% quality
- File size: 186KB
- Load time on 4G: Under 1 second
Reduction: 97% - with no visible quality difference at display size.
Example 2: Product Photos (set of 12)
Before:
- Original size: 12 x 3MB = 36MB total
- Initial page load: 15+ seconds
After:
- Resized to 800px, WebP at 80%
- 12 x 45KB = 540KB total
- Plus lazy loading for off-screen images
- Initial page load: Under 2 seconds
Reduction: 98% - page now loads instantly.
Example 3: Team Page (8 portrait photos)
Before:
- PNG format (wrong choice for photos)
- 1200 x 1600 pixels each
- Average 2.4MB per image = 19.2MB total
After:
- JPEG at 85% quality, resized to 600 x 800
- Average 65KB per image = 520KB total
- Lazy loading enabled
Reduction: 97%
What You Can Do This Week
Here's your action plan - tackle one task per day if you're short on time.
Day 1: Audit Your Current Images
- Run your homepage through PageSpeed Insights (pagespeed.web.dev)
- Look for "Properly size images" or "Serve images in next-gen formats" opportunities
- Note which images are flagged as oversized
Day 2: Fix Your Hero Image
Your hero image impacts every visitor and contributes significantly to your Largest Contentful Paint score.
- Find your current hero image file
- Open Squoosh.app
- Resize to 2400px wide maximum
- Convert to WebP at 80% quality
- Upload and replace the old image
Day 3: Optimize Your Largest Problem Images
Address whatever PageSpeed flagged:
- Take the top 3-5 largest images identified
- Process each through Squoosh
- Replace them on your site
Day 4: Enable Lazy Loading
WordPress: Install a caching plugin like WP Rocket or Perfmatters that includes lazy loading, or check if your theme has the option.
Other platforms: Check your platform's documentation - most modern platforms include this.
Manual: Add loading="lazy" to image tags below the fold.
Day 5: Set Up Ongoing Optimization
WordPress: Install ShortPixel or Imagify. Configure it to auto-optimize uploads.
Other platforms: Create a personal checklist for image preparation before uploading.
Day 6: Re-test
Run PageSpeed Insights again. Compare your new scores to Day 1. You should see significant improvement in:
- Overall Performance score
- Largest Contentful Paint (LCP)
- Total page weight
Common Mistakes to Avoid
Uploading images straight from your camera. Always resize and compress first.
Using PNG for photographs. PNG is for graphics; JPEG or WebP for photos.
Ignoring mobile. Most visitors are on phones. Test on real mobile devices.
Over-compressing. Quality below 60% usually shows visible artifacts. Stay at 75-85%.
Forgetting alt text. While optimizing, ensure every image has descriptive alt text for accessibility and SEO.
Lazy loading hero images. Your main above-the-fold images should load immediately.
The Bottom Line
Image optimization is genuinely the lowest-hanging fruit for website speed. It's:
- Free - using tools like Squoosh costs nothing
- Easy - no coding required
- Impactful - often produces the single biggest speed improvement
- Permanent - once done, the benefits persist
A few hours of work can transform a sluggish, frustrating website into something that loads almost instantly. For the return on investment, nothing else comes close.
Your visitors won't consciously notice that images load quickly. But they'll absolutely notice when they don't. Fast-loading images create the foundation for everything else on your site to work effectively.
Start with your hero image today. The difference will be immediate.