If you want to improve the user experience, loading speed and visibility of your website, you should make sure to compress images properly. In this guide, we will show you how!
Images are among the elements that make up the largest part of a website. The format and size of the images on a website, therefore, have a major impact on the loading times and also on the ranking in the search engines.
Why you should compress images for the web
A picture says more than a thousand words – as the saying goes. A picture is often the only factor that decides whether we read the article or buy the product. High-resolution, expressive images are part of a successful user experience and thus make a significant contribution to the success of a website.
The downside? Pictures take up more storage space than thousands of words. The average download volume of images from online shops is almost 2 MB – per page view! The result: slower page speed.
At least since the Google algorithm speed update, we have known that page speed is a direct ranking factor and affects SEO performance. In 2021, the loading speed and loading stability in the form of the Core Web Vitals will come even more to the fore. What use are the most beautiful product photos if the user loses patience while they are loading and leaving the website?
For the best possible user experience with many high-resolution images and fast page speed, you should therefore compress images. In this guide, we will show you various methods and options, whether through programs, online in the browser or through automated services.
Image formats and their use
In general, there are two different types of image formats: lossless and lossy. Lossless format images retain all of the original image information, even when compressed. Lossy format images can lose information in the process. But you have a higher optimization potential. The most important image formats at a glance:
JPEG, also JPG (Joint Photographic Experts Group)
JPEG is the best-known and most used image format on the internet. Flexible in colour depth and modes, it is the compression standard for most digital cameras and is also used for print processes. Lossy JPEG compression is best used for photos and images with a lot of detail. By dividing it into quality levels, an optimal degree of compression can be determined.
PNG (Portable Network Graphics)
The lossless PNG format can display transparencies and can thus be placed in front of a background of a different colour. PNG compression is less suitable for photos. On the other hand, it can compress images with few details and areas of the same colour much better than, for example, JPEG. PNG is therefore ideal for logos or infographics.
GIF (Graphics Interchange Format)
GIF is also a lossless image format that allows for transparent surfaces. However, since only 256 colours can be displayed with it, more modern PNG compression should be preferred. The GIF format has experienced a small revival thanks to its possibility of animation among meme lovers. As a website operator, you should still do without it.
WebP
The WebP image format developed by Google offers both lossless and lossy compression and can therefore be used flexibly. Fully optimized for “ Web Performance ”, the relatively young format could mean the changing of the guard for JPEG and PNG. Already, it can shrink PNG images by 26% with the same quality. WebP is supported by the most important browsers and image programs.
Compress images on Windows and Mac
Compress images with ImageMagick
If you’re comfortable with the command line, you can compress images from there. Programs like ImageMagick, jpegoptim , and Optipng can be used to optimize images with a single statement, saving time. ImageMagick can be installed for all common operating systems. With the “convert” command, for example, JPEG images can then be set to a specific quality level.
Compress images with Photoshop
The most important program for editing and preparing images is still Adobe Photoshop. Under “Image > Image size” you can reduce the image. After processing the image, the question of its compression arises. Photoshop offers all common formats under “File > Save for Web”. WebP can be added via a plugin.
Due to the many compression options, Photoshop is a professional tool for compressing images. However, if you don’t want to create or edit images yourself, but just want to compress them, Photoshop is not the best alternative. It is also the most expensive of the programs presented here. The manual compression of many images one after the other can also be very time-consuming.
Compress images with freeware programs
If you want to compress images quickly and easily, you can use free tools to do so. One of them is the freeware program IrfanView, which is available for both Windows and Mac. IrfanView supports all common formats and also WebP via a plugin. In addition to the option of compressing images, dimensions and colour depth can also be modified. In addition, the edited images can also be stamped directly to protect your own copyright.
IrfanView offers various options for compressing images. To change the size directly in pixels or percentages, select the save dialogue and select the file format and compression level. Another possibility is the so-called batch conversion, in which large quantities of images can be processed at the same time. This allows you to adjust the image size, convert the images into a different file format and adjust the compression.
Compress images online with Optimizilla & Co.
If you don’t want to install an additional program, you can edit images directly online. There are several offers on the net for this, such as Compressjpeg or Optimizilla. With the former, up to 20 JPGs can be uploaded via drag & drop, which are then automatically compressed. These can then be downloaded individually or as a ZIP archive.
Optimizilla basically works the same way but can do a little more. The online optimizer uses an intelligent combination of the best optimization and compression algorithms to shrink both JPEG and PNG images to the minimum possible size while maintaining the required level of quality. The quality settings and the degree of compression can be edited here.
Another handy image compression tool is TinyPNG. TinyPNG uses intelligent compression techniques to reduce the file size of your PNG files. Also, by selectively reducing the number of colours in the image, fewer bytes are required to store the data.
Automatically compress images
For the operators of websites with many images and photos, such as online newspapers and online shops, the regular compression of images is associated with considerable effort. In order to find a compromise, they usually do without individual image optimization and instead rely on fixed quality levels for all images. This often results in minimal compression and little savings in page speed.
In order to consider the optimization potential of each individual image and to achieve maximum compression, algorithms can be used that assess the image quality like the human eye. Providers such as the cloud service wao.io rely on such algorithms to automatically compress images. The optimization can be set up with just a few clicks and is then sent to the users of the website in compressed form.
Check image sizes with Ryte
If you are not sure about the file sizes of your images and which of your images should be compressed, you can easily check them in Ryte Web Performance. The “File Sizes” report shows the sizes of all existing website documents. You can use the document type filter to view your images separately and in the table view you can see all image sizes in detail.
Image optimization tips for faster page speed
You should only use images on your website that are optimized for web use. In general, photos and high-quality graphics should be used as .jpeg. Graphics that have fewer details and monochromatic areas than .png. Here we give you tips on how to optimize your website for images in order to improve page speed.
Not all browsers currently support the WebP format:
If you want to use WebP images and ensure cross-browser display, set up a fallback to a JPEG or PNG image.
Specify the appropriate image size in the source code:
If a browser has to calculate the dimensions of the graphics itself, this can take up loading time. The specified size should correspond to the original size of the image stored on the server. You can also define the output of the image size via CSS.
Remove meta tags and EXIF data from images:
If you use images from your own camera or smartphone, for example, they have a lot of additional information such as the location, camera used and other data. With a tool like TinyPNG, you can remove them and save storage space.Conversion to HTTP/2:
If your images are loaded via a normal HTTP connection, each image must be requested individually. By switching to HTTP/2 in the web server, all images and other files on the website are loaded via a single connection, which can significantly reduce loading times. An SSL certificate is required for HTTP/2.Use of a CDN:
If, despite all the optimization, many large images still have to be loaded, they can simply be brought closer to the user. A Content Delivery Network (CDN) such as the wao.io mentioned above caches the images on your website on fast servers and transmits them to the user from there.More tips for faster loading times are in
our detailed article on page speed optimization
Conclusion:
Better website performance through image compression
Good image compression can significantly improve the page speed of your website. Modern formats such as WebP are pioneering here. However, care must always be taken to maintain the quality of an image so that it still appears appealing to the user. In terms of user experience, a good compromise must therefore be found between the compression of an image and its quality.
We have shown various methods that can be used to compress images. This begins with detailed work on individual images in Photoshop or other image programs. Batch processing with online applications allows multiple images to be edited quickly. Anyone who makes many images available on their website and wants to keep the effort involved in image optimization as low as possible is well advised to use an automated alternative.