Compressing and reducing the size of images: Here’s how

Images are now a fundamental part of any website and, at the very least, make up the bulk of it. At the same time, factors such as loading speed are a key aspect of the user experience: if a website takes too long to load, potential visitors become impatient, may abandon the page whilst it is loading, and will avoid the website in future.
However, long loading times are not only annoying for visitors and potential customers; they also have a direct impact on your ranking on the major search engines. Long loading times caused by inadequately compressed images therefore do your website a double disservice.
In this guide, you’ll find out the best way to compress your images and what steps you need to take to do so.

Why should you compress your images?

The first image that catches a visitor’s eye when they visit your website can have a decisive impact on their first impression. Users generally associate an appealing visual design with professionalism, which is all the more important if your website is for business purposes. A bare-bones design or plain text could raise doubts amongst potential customers about your professionalism. Presenting the majority of your content in the form of dry, unengaging text is also not recommended: On the one hand, presenting content in this way comes across as dull; on the other, reading lengthy explanations takes time, which could quickly prompt potential visitors to leave your site and look elsewhere. After all, a better option is just a click away.

Meaningful, high-quality images are therefore undoubtedly one of the key factors in a successful website.
The flip side, however, is that images – depending on their quality – take up a lot of storage space. Today, the average download size of images when visiting online shops is around 2 megabytes. And that’s for every single visit. 

This can result in a slow page speed. Page speed refers to the time that elapses between a request being sent and the complete delivery of the requested content. In recent years, the algorithms of the major search engine providers have attached ever greater importance to loading speed and loading stability. If you want your website to feature attractive images, but at the same time avoid falling out of favour with users and search engines due to long loading times, you’ll have no choice but to compress your images.

What image formats are available for the web, and which one should I use in which situation?

There are several file formats you can use, and which one is suitable depends on the intended purpose. Three types of file are particularly popular:

The JPG/JPEG format is arguably the most widely used digital image format. JPG can display up to 16.7 million colours and offers the advantage of allowing high levels of file compression. However, this process results in a loss of quality. The strengths of this format lie in its ability to display a wide range of colours and strong contrasts, which is why JPG files are particularly well-suited to storing photographs or photo-like graphics.

The PNG format can display between 256 and 16.7 million colours and has therefore become almost as popular as JPG. However, it offers the advantage that, compared with JPG, it can be compressed with almost no loss of quality, making it particularly suitable for storing logos and graphics, as well as text in image form. Images of this kind, which contain only a few colours, can be compressed to a fraction of their original size in these files.

Although the GIF format can only display 256 colours, it is popular because it allows a series of images to be played back as a short animation. This makes GIF files particularly popular on social media platforms.

You might now be wondering why files in JPG format might be preferable to those in PNG format, as, based on the explanations above, it seems as though the PNG format is superior to the JPG format. 
The choice between the formats depends on exactly what the image in question is intended to depict, as there are two significant differences between the two formats:

1. One advantage of PNG is its support for transparency. With this file format, you can use a transparent background, which you can, for example, place around an irregularly shaped object. By choosing the PNG format, you can avoid white or coloured boxes appearing around your image. If you want to use transparency effects, the PNG format is therefore the right choice.

1. The advantage of JPG, on the other hand, lies in its high level of compression, even for complex photos with many colours and high contrast. PNG only allows for high compression when there are relatively few colours. JPG files therefore take up less storage space. For photos rich in colour and contrast, the JPG format therefore usually offers a better balance between loss of quality and file size

You can easily convert JPG and PNG files between formats using any image-editing programme.

What options are there for compressing images for websites?

Compressing images online

You don’t necessarily need to install any special software to compress your image files. You can find options online that offer compression for free. These websites are often designed so that you can drag and drop your image file into a window. Your file is then uploaded to the website and the compression process begins. The downside of these free services is that they support only a limited range of file formats and offer few options for adjusting the compression level. There are also restrictions on the number of files that can be uploaded and processed within a certain time frame. Furthermore, you must always bear in mind that your images – which you may hold the copyright to or which are not yet intended for public viewing – will be made accessible to third parties once you have uploaded them to a third-party website.

Compressing images using Photoshop

Photoshop is probably still the gold standard amongst image editing programmes. This comprehensive tool from Adobe offers a wide range of options for designing and customising images. The ‘Save for Web’ function is particularly useful for website operators. This mode supports compression not only for the common formats JPG, PNG and GIF, but also for the raster graphics format WBMP, which is specifically tailored to mobile devices. You can also convert between the various formats.
In Photoshop’s Web Optimisation mode, you can select your desired target formats and optimise the colour depth and dimensions of the photo for your website. A handy feature is that Photoshop displays both the original and the target image side by side, so you can see at a glance how much the intended compression will affect the image quality.
If you want to optimise a file in Photoshop so that it can be uploaded to your website later, open a photo, select ‘File’, then ‘Save for Web’. You can then choose the file format you want. 
The optimisation options are displayed on the right-hand side of the dialogue box. Here, you can select compression and colour options, amongst other things. You will also see two images in this box: the one on the left shows the original, whilst the one on the right shows the result after the file has been processed.

Compressing images using Kraken.io

On kraken.io, you’ll find another excellent way to compress and convert your images so that they can be easily uploaded to your website later. The service specialises in SEO-friendly image conversion and compression.
What makes this image-editing tool particularly special is that not only can files be optimised manually and converted into other formats, but there are also plug-ins available for popular platforms such as WordPress, which automatically optimise the content. 

Photoshop users won’t find themselves missing any features on Kraken.io either; on the contrary: Kraken.io is the perfect complement to the current market leader in image editing, as you can first compress an image using Photoshop and then achieve further compression by using Kraken.io. This can reduce the file size by a further 5 per cent to 10 per cent. This might not sound like much of a benefit at first, but the volume of traffic on your website plays a crucial role here. If you’ve uploaded dozens of images that are downloaded again by visitors every time they view the page, files that are 5 per cent to 10 per cent smaller can quickly make a big difference.

The improved page speed will inevitably be recognised by search engine algorithms, and can give you a decisive advantage over all those website operators who have, until now, relied solely on traditional image editing programmes to convert and compress their files. In today’s internet, where algorithms determine whether your website or online shop is seen or not, improving your page speed can give you a head start over other website owners.

Kraken.io offers a free trial, although unlike the paid version, certain features are not available. It is extremely intuitive to use: simply drag and drop your file into the designated window, whereupon it is uploaded and ready for editing. You can then choose between three optimisation modes, with the ‘Expert’ option offering a wide range of features, such as the ability to preserve metadata during conversion. You can convert all images stored on Kraken.io into ZIP format and then download them in a significantly compressed form, which is particularly useful for very large image collections.

Conclusion

Files containing images should be as small as possible to ensure fast page loading times. Files that are too large slow down page loading times and not only make your website unattractive to users, but also result in it being ranked lower by search engine algorithms. It is therefore advisable to ensure that the files uploaded to your website take up as little storage space as possible. When deciding whether JPG or PNG is the more suitable of these common formats, it always depends on the individual case, as both formats have their advantages and disadvantages.

However, if you’ve made a mistake in your choice, this isn’t a problem, as you can convert between the formats using an image-editing programme. The service offered by kraken.io can give you an edge over other website operators. Once you’ve compressed your file – for example, using Photoshop – this service allows you to reduce its file size by a further 5 per cent to 10 per cent in most cases, without any loss of quality.

If you’d like professional help with optimising the loading time of your website, online shop or landing page, our agency would be delighted to assist you!