Lighten the Sleigh: Optimising Images for Fast Delivery

Welcome to Day 9 of the MyWebHost Advent Calendar! 🛷

Yesterday, behind Door 8, we upgraded your reindeers with NVMe fuel. Now your engine is powerful, efficient, and ready to race.

But there is still a problem. Even the fastest reindeers in the world will struggle to fly if the sleigh is filled with lead bricks.

In the digital world, those bricks are Images.

Images are the heaviest part of the modern web. They usually account for 50% to 75% of the total file size of a web page. If you are uploading photos straight from your iPhone or your stock photography site without shrinking them first, you are essentially forcing your visitors to download massive files over their mobile 4G/5G data just to view your home page.

The result? Your site loads slowly, your visitors get bored, and they leave before they even see your content. Google studies show that 53% of mobile users abandon a site if it takes longer than 3 seconds to load. The first impression of your brand isn’t your logo or your headline; it is your speed.

Today, we are going to learn how to “Lighten the Sleigh.” We will show you how to shrink your images by up to 90% without losing visual quality, making your site fly faster than ever before.

The “Megabyte” Mistake: Why Size Matters 📉

The most common mistake beginners make is uploading “Raw” photos directly from a camera or smartphone.

The Scenario:

You take a beautiful photo of your Christmas product with your iPhone. Modern phones are designed to take photos high-quality enough to print on a billboard.

• Original Size: 4032 x 3024 pixels.
• File Size: 5.2 MB (Megabytes).
• Resolution: High enough for a glossy A3 print.

You upload it to your website header.

• The Problem: Your website header is likely only 1200 pixels wide on a desktop, and barely 400 pixels wide on a phone.

The Impact:

When a user visits your site, their browser has to do two difficult things:

1. Download: It has to pull that massive 5MB file through the internet cables. On a standard 4G connection, that takes about 4–6 seconds. That is 4 seconds of a white screen.
2. Process: Once downloaded, the browser has to use the User’s Phone Battery and CPU to physically resize that giant image to fit the small screen. You are literally heating up your customer’s phone to show them a picture.

The Goal:

We want that same image to be:

• Size: 1200 pixels wide (Exact fit).
• File Size: 150 KB (Kilobytes).

That is 35x smaller. It loads instantly, costs your user almost zero data, and displays immediately.

Step 1: Resizing (Fitting the Gift in the Box) 📏

Before we talk about compression (quality), we must talk about Dimensions (pixels).

Imagine trying to wrap a full-sized bicycle in a small jewellery box. It physically doesn’t fit. You are wasting wrapping paper.

Similarly, don’t upload a billboard-sized image for a stamp-sized space on your sidebar.

The Golden Rules of Dimensions:

These are safe maximums for most modern WordPress themes:

1. Full-Width Hero Banners: Max 1920px wide. (Anything larger is wasted on 99% of screens).
2. Blog Post Images: Max 1200px wide.
3. Product Gallery: Max 1000px wide.
4. Thumbnails/Team Photos: Max 300px wide.

A Note on “Retina” Screens:

Modern iPhones and MacBooks have “Retina” or High-DPI screens that pack more pixels into every inch. To keep images crisp on these screens, some designers upload images at 2x size (e.g., 2400px wide for a 1200px slot).

• Advice: Only do this for your Logo and main Hero Image. For standard blog photos, the extra file weight isn’t worth the tiny improvement in sharpness.

How to Fix It:

You don’t need Photoshop.

• Windows: Right-click the file -> Open with Photos -> Resize.
• Mac: Open Preview -> Tools -> Adjust Size.
• Online: Use Canva or Squoosh.app (more on this later).

Step 2: Compression (Squeezing the Air Out) 🗜️

Once the image is the right size (dimensions), we need to compress the file data. Think of this like using a vacuum bag for your winter duvet. You suck out the empty air (unnecessary data) so it takes up less space, but when you unpack it, it is still the same duvet.

Lossy vs. Lossless

• Lossless Compression: Shrinks the file slightly (maybe 5-10%) by reorganizing the data more efficiently. It doesn’t change a single pixel. This is vital for technical diagrams or medical imaging where 100% accuracy is required.
• Lossy Compression: This is the magic used for web photos. It works by removing colour data that the human eye literally cannot see. It spots that there are 50 shades of red in a Santa hat and reduces them to 10 shades. The eye blends them together, so the photo looks identical, but the file size drops by 80%.

The Sweet Spot:

If you compress a JPEG to 80% quality (sometimes called “High” quality), nobody can tell the difference from the original, but the file size drops by half.

Step 3: Modern Formats (The New Wrapping Paper) 🎁

For 20 years, we relied on JPEG for photos and PNG for logos. They are classic, reliable, and compatible with everything. But they are old technology, built for an older internet.

The new standard is WebP.

• What is it? An image format developed by Google specifically for the web. It combines the best of both worlds: it handles photos like JPEG and transparency like PNG.
• The Benefit: A WebP image is typically 30% smaller than a JPEG of the exact same quality.
• Support: It is now supported by all modern browsers (Chrome, Safari, Edge, Firefox). If an old browser visits (like Internet Explorer), WordPress is smart enough to show them the old JPEG instead.

In 2025, you should be serving WebP images to virtually everyone.

The Workflow: How to Do This Automatically ⚙️

You don’t want to manually resize, compress, and convert every single photo you upload for the next 5 years. That would take forever. Instead, we use tools to automate the process.

Option A: The “Manual” Way (Best for Hero Images)

For your “Money Images”—the big banner on your homepage that everyone sees—it is worth spending 2 minutes doing it manually to get the absolute best quality-to-size ratio.

1. Go to Squoosh.app (a free tool by Google).
2. Drag in your image.
3. Resize: Toggle “Resize” on and set width to 1920px.
4. Compress: Set quality to 75%. You can use the slider to see exactly when the quality starts to drop. Stop just before it looks blurry.
5. Format: Choose “WebP”.
6. Strip Metadata: Ensure the option to remove “EXIF Data” is checked. This removes hidden data like the GPS location of where the photo was taken (great for privacy and file size).
7. Download and upload to WordPress.

Option B: The “Plugin” Way (Best for Everything Else)

For the hundreds of blog photos, product images, and gallery shots, let a plugin do the heavy lifting.

Recommendation: ShortPixel, Smush, or LiteSpeed Cache

1. Install the plugin.
2. Bulk Smush: Run this once. It will scan your entire existing media library and compress every image you uploaded in the past.
3. Auto-Optimise: Keep the plugin active. Now, every time you upload a huge photo, the plugin will intercept it, resize it to your max width (e.g., 1920px), compress it, and convert it to WebP before saving it. You never have to think about it again.

Bonus Trick: Lazy Loading (Don’t Unwrap It Yet) 😴

Why load an image at the bottom of the footer if the user has only just landed on the header?

Lazy Loading is a technique that tells the browser: “Only download this image when the user actually scrolls down to look at it.”

This makes the initial page load much faster because the browser only has to download the top 2 or 3 images (the ones “Above the Fold”) to make the site look ready. The rest are loaded seamlessly in the background as the user reads.

Good News: Since WordPress 5.5, “Native Lazy Loading” is enabled by default. You don’t need to do anything! However, sophisticated performance plugins (like WP Rocket or LiteSpeed Cache) offer “Advanced Lazy Loading,” which can do clever things like replacing heavy YouTube video players with a simple image thumbnail until you actually click play—saving massive amounts of data.

Summary Checklist: Your Diet Plan

1. [ ] Audit: Run your site through PageSpeed Insights. Look for the warning: “Serve images in next-gen formats.” If it’s there, you need WebP.
2. [ ] Resize: Ensure no image currently on your site is wider than 1920px. Use a “Regenerate Thumbnails” plugin if needed.
3. [ ] Install: Set up an optimisation plugin (ShortPixel/Smush/LiteSpeed) to handle future uploads.
4. [ ] Convert: Enable the “Create WebP versions” setting in your plugin.

By lightening your sleigh, you reduce the strain on your server (saving CPU resources), save money on bandwidth overages, and deliver your content to your visitors before they have time to blink.

🎄 Show Us Your Savings!

I recently optimised a client’s homepage for a photography portfolio. We reduced the total page size from 12MB to 1.5MB. The load time dropped from 6 seconds to 1.2 seconds, and their bounce rate improved by 20% overnight.

Check your own site today. How big is your homepage?

Drop your “Before and After” numbers in the comments—we’d love to see how much weight you managed to shed!

Check back tomorrow to open Door 10!