The What, Why & How Of Image Compression For Fast-Loading Websites

You might have heard about the importance of website speed. A faster website can improve your organic search performance, while also improving user experience in the process. Image compression is a major part of that process.

It sounds complicated at first. But once you break it down, it’s actually a simple part of both building and maintaining your website. In this guide, we’ll provide that breakdown for you.

Learn about the basics of image compression, why it needs to be a priority, and how you can go about getting it done to improve your website performance.

The Basics Of Image Compression

At its most basic, image compression is the process of editing an image to decrease its file size. That’s typically done by either reducing the quality of the image, or by finding and combining patterns within its individual pixels that reduce the bits needed to display it.

More specifically, you can compress your images in one of three ways:

1. Lossy image compression simply removes some parts of the image. Often, that’s a lower pixel density, making it appear more blurry or pixelated at its most extreme. The file size gets smaller, but so does the image’s quality.
2. Lossless image compression reduces the file size without reducing quality. File types like PNG images, for instance, combine pixels into patterns so they don’t all need saved individually. That preserves quality, but only somewhat reduces the size as options are limited.
3. Glossy image compression is a compromise between the two. Exclusive to the image compressor ShortPixel, glossy compression preserves image quality to the point where differences with the original are almost imperceptible, while at the same time reducing file sizes more than lossless compression could.

ShortPixel is among our favourite compression tools (more on those below), but other services have begun to offer similar options. When available, glossy compression tends to be your best bet when it comes to your website. 

All types of image files can be compressed. In terms of web-optimised files, JPG is a lossy type of compression, while PNG offers a lossless alternative. GIF is a lossy format only in its colours; if the original file has more than 256 colours, it will be compressed to fewer (and lose vibrancy) when compressed into a GIF.

4 Reasons Image Compression Is Crucial For Your Website

According to Google, nearly two thirds of a website’s total weight (which is the combination of all the files a visitor needs to load) comes from images. Reducing that size comes with a few significant advantages for organisations looking to improve their web performance and UX:

1. Faster page load times. Research consistently shows that the longer your site takes to load, the more likely users will be to abandon it. You lose attention, conversions, and revenue. Compressed images reduce the load on your visitors’ browser and Internet speed, causing your website to load much faster for them.
2. Improved SEO. Put simply, Google cares about both page load speed and image compression. Prioritise both, and you could see a significant boost in your search rankings. Smaller, and more streamlined, always tends to be better.
3. Quicker website backups. A lower total file size for your website means it will be easier, and faster, to back up the site. Considering the importance of regular website backups, that can be a differentiator in your web security efforts.
4. Lower hosting bandwidth. Finally, you just might save some money because of compressed images. You’ll need less space on your website host, which can come in handy especially as your website gets more complex over time.

In other words, it’s not necessarily optional if you truly care about your website performance and user happiness. Fortunately, it’s also not very complex. You just need to implement it at the right time.

Image Compression In Action

None of the above is only theoretical. We frequently see image compression make a real difference for our clients. Bakels Group, for instance, a long-time partner of Impact Media, saw a significant reduction in bandwidth and storage space needed through our image compression services.

• Average compression of files = 70.25%
• Disk space saved = 1.9 GB
• Bandwith saved = 18.52. TB

When Should You Care About Your Image Sizes?

Ideally, image compression is a part of website construction from the very beginning. Embraced at the build stage from the time the first images are selected, the website can be lightning fast when first released into the wild.

But at that point, the job isn’t done. Hero images will need swapped out, blog posts will require visuals, and new pages will require new product listings or other image-based items.

It’s not just about making sure the images are the right size, either. Resizing images will help, but file sizes will remain comparatively high.

Instead, ongoing image and file compression processes need to be in place to keep the site as fast as it was at first launch.

How to Integrate Image Compression Into Your Website Strategy

It tends to start with a simple conversation with your web developer as the website is first built. Beyond that, you can take image compressions in your own hands if needed.

A number of tools are available either free or for reasonable prices to help in this process. These are our favourites, used for our own website builds and recommended regularly to our clients:

• ShortPixel, which as mentioned above champions the glossy image compression mode.
• WP Smush, a WordPress plugin that can both resize and compress your images right in your WP build.
• ReSmush.it, another WordPress plugin that offers optimisation services in addition to its compression algorithm.

Depending on the tool and process you use, compression happens either before or as images are loaded into your CMS. You set the settings once, and the tool does the rest. It does require some manual maintenance, of course.

Alternatively, you can work with a development partner who will help you not just as part of the initial build, but in your day-to-day maintenance as well.

At Impact Media, we’re obsessed with the speed and performance of every website we create, which is why include image compression in every build for our clients.

It’s also included in our Support & Maintenance plans for day-to-day optimisation. Check it out, and let us know if you’d like to talk more.