Images are one of the biggest culprits of slow loading teams for websites, which have a negative effect on user experience. To ensure better loading times and better usability, make sure your image files are reduced in size.
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!
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.
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.
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.
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.
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:
<img src="example.png" width="300" height="200"/>
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!
Monitor, analyze and optimize your images with Ryte FREE
Published on 03/08/2018 by Eva Wagner.
Eva is an experienced content marketer. Until May 2018 she was a member of online marketing team at Ryte. Using her creativity and the knowledge of current topics, she was responsible for the German Ryte Magazine and the Ryte Wiki. She also organized Ryte’s presence at major trade fairs such as the dmexco in Cologne.