Images are one of the biggest culprits of slow loading times for websites. This has a negative effect on user experience. To ensure better loading times and better usability, compress your images with our guide.
Images make up a large portion of your website. The format and size of images used on your website have a major impact on the page speed, and, therefore, rankings in search engines. If you want to improve your website’s user experience and visibility, then you need to compress images. In this compact guide, we’ll show you how!
One picture is worth a thousand words, as the saying goes. It’s often the only factor that decides whether we read an online article, or buy a product. High-resolution, engaging images are part of a successful user experience, and make a significant contribution to the success of a website.
The downside of using them? They take up way more storage space than a thousand words. The average download volume of images from online shops is almost 2 MB – per page view! The result: slower page speed .
We know that page speed is a direct ranking factor, and affects SEO performance. In 2021, this became even clearer with the emergence of Core Web Vitals. What use are the most beautiful product photos, if the user loses patience while they are loading and leaves the website?
For the best possible user experience with many high-resolution images and fast page speed, you should therefore compress images.
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.
Here are the most important image formats for websites:
This is the most widely-used image format on the internet. It offers flexibility in color depth and modes, and is the compression standard for most digital cameras. It’s best used for photos and images with a lot of detail. By dividing into quality levels, an optimal degree of compression can be determined.
The PNG format can display transparencies, and can therefore be placed on different backgrounds. The PNG format is less suitable for photos, but it’s perfect for logos and other images that have large blocks of the same color.
GIF is a lossless image format that allows for transparent surfaces. However, since only 256 colors can be displayed with it, the 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 can do without it.
The WebP image format developed by Google offers both lossless and lossy compression, and can therefore be used flexibly. It’s fully-optimized for “ Web Performance ”, and could mean the eventually supersede JPG and PNG (it can shrink PNG images by 26% with the same quality, for example). WebP is supported by the most popular web browsers, but not all.
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:
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 pro-level 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’s 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.
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 color 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 percentage, select the ‘save’ dialog 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.
If you don’t want to install an additional program, you can edit pictures directly online. There are several tools available for this on the internet, such as Compressjpeg or Optimizilla. In Compressjpeg, up to 20 JPGs can be uploaded via drag & drop, and the files are then automatically compressed. These can then be downloaded individually, or as a ZIP archive.
Optimizilla essentially has the same functions, but can do a little more. The online optimizer uses a combination of the best optimization and compression algorithms to reduce both JPEG and PNG images to the minimum size possible while still maintaining the required quality level. Here, the quality settings and the degree of compression can be edited.
Another useful image compression tool is TinyPNG. TinyPNG uses compression techniques to reduce the file size of your PNG files. By selectively reducing the number of colours in the image, fewer bytes are needed to store the data:
Figure 1: Reduce image size with TinyPNG.
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 however.
In order to consider the optimization potential of each individual image and to achieve maximum compression, algorithms can be used to 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.
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.
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 are some 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, like this:
<picture>
<source srcset="img/testbild.webp" type="image/webp">
<source srcset="img/testbild2.jpg" type="image/jpeg">
<img src="img/testbild2. jpg" alt="fallback image">
</picture>
Specify the appropriate image size in the source code: If a browser has to calculate the dimensions of 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.
<img src="testimage.png" width="300" height="200">
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 a CDN: If you still have many large images despite optimizing them as described above, the next step is to bring them 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.
For more tips on cutting loading times, read our detailed article on page speed optimization
Good image compression can significantly improve the page speed of your website. Modern formats such as WebP are pioneers 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 the detailed work on individual images in Photoshop or other image programs. Batch processing with online applications allows multiple images to be edited quickly.
Finally, anyone who makes many images available on their website and wants to keep the effort involved in image optimization as low as possible should look into using an automated alternative.
Optimize your website with a free Ryte trial
Published on 03/25/2022 by Editorial Team.
The editorial team's mission: to help brands and agencies improve their website user experience. Ryte's content specialists regularly produce guides, explainers and other resources on a variety of topics, from SEO to accessibility, compliance and more.