Optimize Images

Method Type: User (images)
(this means that the method is handled by the webmaster)

Introduction:

As images are integral part of almost any modern website, they can put quite a strain on the loading speed of the site. The right file format, size and compression are very important when it comes to dealing with images.

How Optimizing Images works:

There are a few ways to optimize images each with its own benefit to the loading speed of a page.

Firstly the image should be in the correct format corresponding to its purpose. In most cases the PNG format will do just fine. If you wish to have a photographic image JPEG is a better choice. In general you will want to stay away from the uncompressed and data heavy formats like TIFF and BMP. Lossy compression is also a good choice for images used on the web as the compression removes a lot of data without a significant quality loss, especially for smaller images.

Resizing the images to the needed dimensions is much better than simply using a CSS to resize them. You may resize a 1920x1080px image to a mere 290x200px but the web browser will still need to download the full size before applying the CSS resizing.

Optimizing Images provides the following Advantages:

• Up to 80% faster load speed depending on the amount of images on the page
• No CSS needed for resizing images if they are already correctly sized
• Less bandwidth being used

There are different tools that can help you with optimizing your website's images. One way to do it is to run them through Optimizilla.

This is a free converted that will shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality which can be customized from the slider on the side.

The difference is not that noticeable even when we lowered the quality slider to 50% of the original while the size dropped with 53% to only 5.7K considering the fact that the image is 400x400px.