Image Compression For Web

Design Lab Status: Research

The borders of responsibility between a Web Developer and a Web Designer sometimes can be blurred or overlap but if you are a bit like me – you need to be both when it comes to building a website. The reason why I am stating this first is because it’s often a bit of a handball when it comes to who’s responsible for the Page Load speed? This often also includes some input or work from the System Administrator who is managing the hosting environment for the website.

Tweaking or Changing the Page Load Speed is what’s known as Performance Tuning and is a bit of a can-of-worms scenario as there is ALWAYS something to tweak, change or alter in order to shave off milliseconds from the page load time.

Overly large or incorrectly sized images is usually my ‘Go To’ thing to investigate when I am helping a client reduce their websites page load speed. This is because it is the easiest and quickest item to change in order to reduce the page load speed.

Image Optimisation can be divided into four factors;

1. Dimension.
2. File Type.
3. Quality.
4. Compression or file size.

For this Lab – I just wanted to focus on the image compression and not the other 3 factor’s, however, I have added a quick little summary just to give you an idea;

Dimension

This is fundamentally the size of the image you are using, if you are using an image on your website that will never be larger then 900px (pixels) wide then there is no point in having the image as 1800px wide and using other techniques like CSS to reduce the size to what you want – It would literally double the size of the image.

File Type

Unless you are using an image that needs to have a transparent background there is no point in having the image as a .png file type. PNG’s are usually quite large in comparison to its JPEG sibling and simply changing the file type can drastically reduce the image file size.

Quality

You can usually alter the JPEG’s quality when exporting it from such applications such as Photoshop, this process will most likely be a trial and error till you can get that sliding scale of quality to file size that you are happy with. I am usually happy with having the quality at 50% for most images.

Alright – so that was a quick overview of the other 3 factors now let’s talk about the reason why my downloads file has a bunch of new downloads : )

Image Compression

On my adventure to find the best image compression application, I made these rules first;
1. I would use a complicated image.
2. The image quality would remain unaltered.
3. The image dimensions would also remain untouched.

I made these rules so that I would be solely looking at the images filesize reduction percentage as opposed to crossing over to Image Optimisation.

The original image that I used was this beautiful photo taken by Jonathan Pie (the guy is awesome) and the photo was downloaded from unsplash.

It is;
Image Type: jpeg
Image File Size: 2,401,722 bytes (2.4 MB)
Image Dimension: 4017 × 2683

Under Compression

I used a couple of online applications and a couple of local applications during my adventure to find the best system to use to compress an image.

1. The first website that I visited was Optimizilla and although the little cartoon logo was quite cute and the website was really easy to use without delays, the end result was an image that was: 2,224,162 bytes (2.2 MB on disk)

2 The second website that I decided to test was Kraken.io and this honestly looked really promising as it had a nice interface, had a paid version and a feel trial etc so it seemed quite well thought out, promising and professional. It does, however, have a lot of options for me tune the compression so there might be some potential for it to generate better results with someone who is a bit more patient behind the wheel – As I wanted a more ‘point and shoot’ method for compressing the images.

The end result was: 2,224,162 bytes (2.2 MB on disk)

Pivoting

I really couldn’t find any other websites that seemed like they had potential as there were a lot of SPAMMY websites out there that need my email address etc in order to process the compression, so I decided to turn my attention to an application that I could run on my Mac.

Again, not a huge variety out there for me to play with but after a couple of hours of downloading (then deleting instantly for someone) I narrowed my options down to 3 applications.

1. ImagOptim
Free and a fairly small application, but be warned that it will override the original image with the compressed one. This makes sense especially if I started using it for Web Design but I wanted the option to do that or not. Either way, the results weren’t that impressive as the file size ended up: 2,224,162 bytes (2.2 MB on disk).

2. Optimage 3
Has a paid version ($9 once off) and a free version, the main difference appears to be that the free version can only handle 24 images within 24 hours – which seems fair.

The price doesn’t bother me because if it could do the job then $9 gives it good value to me.

Optimage 3 did a great job at compressing my original image as it reduced the file down to 2,135,399 bytes (2.1 MB on disk) which is a 10% reduction!

This may not seem like much of a reduction but you need to consider that we didn’t touch any of the images dimensions or quality levels and simply got a 10% reduction. #Winning.

Now, if I use photoshop to reduce the image quality to 50% (instead of 100%) then I can get the image filesize down to 1.8 MB.

If I then reduce the width of the image to 2400px, which is my go-to width when using a full-page image such as a hero image – the file comes down to 549 KB.

Results

I am confident that there is a better application or compression method out there as times are changing but I think for $9 and the ability to compress images by bulk – Optimage 3 will be my application of choice.