Oops! We could not locate your form.
Done right, image compression can make or break your website and affect search performance. In this guide, we cover the basics, from the types of compression available to the steps you can take for your own website.
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.
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:
This 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.
This 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.
This 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.
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:
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.
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.
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.
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:
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.
