December 5th, 2017

Imagery on a website is the single biggest performance issue for page load speed. As you can see from the chart below, they typically account for two-thirds of the total file size of a web page.

Today we’re going to look at why it is important to save images, compressed, in the correct format, as well as the tools that can be used to make each image as small as possible, without losing quality.

Why is this so important?

In terms of website content, smart image format choice is the single most important decision you can make to ensure the page that you are creating will look its best while having the smallest impact to the total page size and load time. Picking the incorrect format will mean either the final file size will be much bigger than it should be or look poor in quality.

Image formats

There are three main formats in use on the web today: GIF, JPEG and PNG. Each have a specific use which can be easily identified.

GIF: The Graphic Interchange Format

The GIF format is one of the oldest image formats. It is one of the trickiest to compress and for the most part, is the least preferable option. However, its redeeming feature is that it can be animated! The GIF format is a reliable and simple way to introduce animated imagery.

When to use it:

  • When an image needs to be animated (only).

PNG: Portable network graphics

When you think about PNG think flat, sharp-edged grpahics. PNG images are all about maintaining the colours and edges within an image, which is why it’s perfect for any kind of image where this is a priority. The most common types of images that benefit from using PNG formats are illustrations, icons, logos and text. There is one other benefit of PNG that comes in handy – this format will allow parts of an image to be transparent. Transparency is most commonly utilised when overlaid onto other graphics, such as text or layered imagery.

When to use it:

  • Flat graphics (illustrations, icons, logos & text)
  • Transparent backgrounds

JPEG: Joint Photographic Experts Group

The JPEG format is, at its heart, designed to reproduce photographic imagery at a smaller file size. JPEG will always be the standard and most common format.

When to use it:

  • Any kind of photographic image

Compression

Image compression is a way to modify an image so it has the smallest possible file size without compromising too much on how the original image should be presented.

All image editors should offer options to compress images, though it can seem complicated in terms of the options to get the best result. This is why we recommend using an automatic image compression service or app.

Image compression services

The are many image compression services available and each offers a very similar approach.

Any of these tools can give great results and while there may be some differences between each, the important thing is to use something you’re comfortable with and can produce the results you want to attain.

As an example, we’re going to show you how to use our personal favourite TinyPNG.

1. Tiny png has a simple drag and drop interface. So, simply drag your images onto the browser where required and watch as it uploads and compresses each image.
2. Once it’s finished you get to see how small the final images are and then are given the option to download the images, either individually or as a collected zip file.

That’s it! Simple and easy, and makes a massive difference to your website’s load times and now, Google SEO ranking.