Best Practice Guide for Image Compression

Images make up a pretty big portion of your website. The format and size of images on a 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 focus on image compression. In this compact guide, we’ll show you how!

Image Formats and Their Use

There are many different file formats for images, which are suitable for a variety of different applications. For images used on the web, however, you basically only deal with jpeg, gif and png.

• The best image format is considered to be JPG (Joint Photographic Experts Group). It’s used by most digital cameras, the internet and sometimes in print. The main advantage of this format is that it can be compressed more than other image formats.
• PNG (Portable Network Graphic) is also well suited for use on the Internet. Compression of this file format works differently than for JPG, because mostly just the amount of colour in the image is reduced. For some photos, it may be that you are looking at the compressed version. PNG is also capable of supporting transparencies, for example a logo with a transparent background can be easily integrated onto a website if it’s a PNG.
• Images in GIF format can be animated, which gives it a major advantage over JPG and PNG. However, it can only display 256 colours.

Why you should compress images for the web?

Images are a great way to make your website more illustrative and attractive to your users. However, images in particular have the risk of increasing the file size of your website, leading to slow loading times which will negatively impact the user experience. Visitors won't have the patience to wait for the page to load, and will quickly leave your site.

Luckily, there are some simple and loss-free ways to compress images for the web.

Image Compression with Optimizilla & Co.

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.

Image Compression with Photoshop

The most professional way to edit or compress images is considered to be with Adobe Photoshop. The image editing program offers a variety of possibilities that can sometimes make you lose track of things. Nevertheless, compressing images for the web is very easy to do with Photoshop. Open the image you want to edit, and, if necessary, adjust the size by going to the menu option "Image> Image size" and then going to "File> Save for web". There are a lot of ways here to adjust the size, file format, quality and compression of the image.

Images in PNG or GIF format can be saved here in addition to JPEG, depending on what is needed. Probably the only downside to using Photoshop is that the program is not cheap. It really is only worth it for people who often need to edit images and for whom the other features of the program are interesting.

Figure 2: Resizing an image in Photoshop.

Image Compression with Free Tools

If you want to compress images quickly and easily, you can use free tools that are relatively self-explanatory. One of them is the freeware program IrfanView, which is available for both Windows and Mac. This not only reduces the size of individual pictures, but also several directly by stacking them.

IrfanView is essentially an image viewer that can read and convert all popular image formats. In addition to standard formats such as JPG, GIF, PNG or TIF, IrfanView also supports RAW and ICO. The program can compress images and also modify dimensions or colour depth.

In addition, the edited images can also immediately be given a watermark to protect them with copyright. IrfanView offers various options for compressing images. To change the size directly in pixels or percent, select the Save dialog and then from there you can choose 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 can be used, for example, to adjust the image size, convert the images to another file format and adjust the compression.

Figure 3: Image editing with IrfanView (screenshot).

Additional tips for optimizing your images for a faster loading time:

As a general rule, you should only use images that have been optimized for use on the internet. Photos and high-quality graphics should be .jpeg, and graphics smaller than 10 x 10 pixels should be .gif.

Indicate the corresponding image size in the source code: if a browser has to calculate the dimensions of graphics on its own, this can result in a slower 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 with CSS.

<img src="example.png" width="300" height="200"/>

Remove meta tags and EXIF data: if you use pictures from your own camera or smartphone, for example, they contain a lot of additional information such as location, camera used and other data. You can remove this extra information with a tool like TinyPNG to save storage space.

If a page’s content contains a lot of images, you can reduce the loading time by using a Content Delivery Network (CDN), meaning the images are offloaded to an external server so they are available faster.

Conclusion

Uncompressed images are still a common reason for long website loading times, but compressing images is really easy. If you don't need to integrate images onto your website frequently, you can use an online-based program such as Optimizilla.

If you need additional customization options for compression, you should install a program that offers more features, although in most cases the free tools are sufficient. The use of Photoshop only makes sense for professional users who need the additional functions or image editing. Compare the costs to the possible benefits to find the right tool for your website!