Compress and resize images: Here's how to do it 

Today, images are an elementary part of every website and also make up at least its largest part. At the same time, factors such as loading speed are an important aspect of the user experience: If a website takes too long to load, potential visitors become impatient, may abort the loading process and will avoid the website in the future.
But long loading times can not only be annoying for visitors and potential customers, they also directly affect the ranking with the major search engines. Long loading times due to insufficiently compressed images are therefore doubly damaging to your website.
In this guide, you will learn how best to compress your images and what steps are required to do so.

Why should you compress your images

The first image that catches the visitor's eye when they visit your website can already have a decisive impact on their impression. An appealing look is generally associated with professionalism by users, which is even more important if your web presence is of a business nature. A spartan look of your website or plain texts could raise doubts about professionalism among prospective customers. A predominant presentation of the content in boring text form is also not recommended: on the one hand, such a presentation of the content appears boring, and on the other hand, reading long explanations is time-consuming, which could quickly cause any visitors to leave your site and search elsewhere. After all, a better offer is only a click away. 

Meaningful and high-quality images are therefore without doubt one of the essential keys to a successful web presence.
The other side of the coin, however, is that images, depending on their quality, take up a lot of storage space. Today, the average download volume of images when visiting online stores accounts for around 2 megabytes. And that's for every single call. 

This can result in slow page speed. Page speed is the time that elapses between the submission of a query and the complete delivery of the queried content. In recent years, the algorithms of the major search engine providers have placed increasing importance on loading speed and loading stability. If you want your website to contain appealing images, but at the same time you don't want it to fall out of favor with users and search engines because of long loading times, you won't be able to avoid compressing your images.

Which image formats are available for the WEB and which one do I use when?

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

The JPG / JPEG format is probably the most commonly used digital image format. JPG can represent up to 16.7 million colors and offers the advantage that a strong compression of the file is possible. However, this process is associated with quality losses. The strengths of this format lie in the representation of many colors and strong contrasts, which is why JPG - files are particularly suitable for saving photos or photo-like graphics. 

The PNG format can display 256 to 16.7 million colors and is therefore now similarly popular to JPG. However, it offers the advantage that, compared to JPG, it can be compressed almost losslessly, so that it is particularly suitable for storing logos and graphics, but also for texts in image form. Such images, which contain only a few colors, can be compressed to a fraction of the original size in these files.

Although the GIF format can only display 256 colors, it is popular due to the fact that it can be used to play several images strung together in the form of a small animation. This makes files in GIF format especially popular on social media platforms.

You might now wonder why files in JPG format might be preferable to those in PNG format, because according to the above explanations, it seems that the PNG format is superior to the JPG format.
The choice between the formats is decided by what exactly the image in question is supposed to represent, because, between the two formats, there are two significant differences:

1. One advantage of PNG is that it supports transparency. You can use a transparent background in this file format, which you can place around an unevenly shaped object, for example. By choosing the PNG format, you avoid white or other colored boxes appearing around your image. Therefore, if transparency effects are desired, the PNG format is the right choice.

1. The advantage of JPG, on the other hand, is the high compression even of complex photos with many colors and contrasts. PNG allows high compression only for relatively few colors. JPG files therefore require less storage space. For color-rich and high-contrast photos, the JPG format therefore usually offers a better compromise between quality loss and file size

You can easily convert files with JPG and PNG format into each other with all image editing programs.

What are the options for compressing images for web pages?

Compression of images online

You don't necessarily have to install special software to compress your files with image content. You can find options on the Internet that offer compression for free. These websites are often set up so that you can drag and drop your image file into a window. Then your file will be uploaded to the website and the compression process will start. The disadvantage of these free offers is a limitation of the supported file formats and a lack of choice in the degree of compression. There are also limitations on the number of files that can be uploaded and processed within a certain period of time. Moreover, you must always keep in mind that your images, to which you may have a copyright or which are not yet intended for the eyes of the public, will be made available to third parties once you upload them to someone else's website.

Compression of images using Photoshop

Photoshop is probably still the gold standard among image editing programs. The extensive tool from the house of Adobe offers a wide range of options for designing and customizing images. For the operators of websites, the function "Save for Web" is particularly suitable. This mode supports not only the common formats JPG, PNG and GIF for compression, but also the raster graphic format WBMP, which is specially tailored for mobile devices. You can also convert the respective formats.
In Photoshop Web Optimization mode, you can select the desired target formats as well as optimize the color depth and dimensions of the photo for your website. Conveniently, Photoshop compares both the original and the target image, so you can see at a glance how much the intended compression will affect the image quality.
If you want to optimize a file in Photoshop so it can later be uploaded to your website, open a photo and choose "File", then "Save for Web". Then you can select the file format you want.
The optimization options are displayed on the right side of the dialog box. Here you can select compression and color options, among others. You will also see two images in this box: The one on the left shows the original, the one on the right shows the state after the file has been processed.

Compression of images using Kraken.io

On kraken.io you will find another excellent way to compress and convert your images so that they can later be uploaded to your website without any problems. They specialize in SEO-friendly image conversion and compression.
What's special about this image processing tool is that not only can you manually optimize files and convert them to other formats, but there are also plugins for popular systems like WordPress that automatically optimize the content. 

Users of Photoshop will not miss any functions with Kraken.io, on the contrary: for the previous top dog in the field of image editing, Kraken .io is a perfect complement, because you can first perform image compression using Photoshop and then achieve further compression by using Kraken.io. This can reduce the file size by another 5% to 10%. This may not sound like much of a benefit at first: But here the amount of traffic on your website plays a crucial role. If you have uploaded dozens of images that are downloaded by visitors every time they visit your site, 5% to 10% smaller files will quickly make a big difference.

The improved page speed will inevitably be rewarded by the search engines of the algorithms and can give you a decisive advantage over all the website operators who have so far only used the classic image editing programs for converting and compressing their files. In today's Internet, where algorithms decide whether your website or online store will be seen or not, improving your page speed can give you an edge over other operators.

Kraken.io offers a free trial version, but unlike the paid version, its features are not available. The operation is extremely intuitive: you drag your file into the pre-drawn window, whereupon it is uploaded and can be edited. After that, you can choose between three optimization modes, with the "Expert" option offering a wide range of options that can be used to save metadata during conversion, for example. All images stored at Kraken.io can be converted into a ZIP format and then downloaded in a significantly compressed form, which is especially useful for particularly large image collections.

Conclusion

Files containing images should be as small as possible in terms of page speed. Too large files reduce the page speed and make your website not only unattractive for users, but also cause it to be listed lower by the algorithms of search engine operators. Accordingly, it is recommended to pay attention to the smallest possible disk space usage of the files uploaded to your website. The question of whether JPG or PNG is a suitable format depends on the individual case, as both formats have advantages and disadvantages.

If you have made a mistake in your choice, this is not a problem, because you can convert the formats into each other with an image editing program. The offer from kraken.io can give you an advantage over other website operators. After compressing your file, for example using Photoshop, this allows you to reduce the memory usage of your file by 5% to 10% in most cases, without any loss of quality. 

If you want professional support in optimizing the loading time of your website, online store or landing page, our agency will be happy to help you!