What image format should I use on my website?

So, we thought we’d put together a simple guide to help steer our clients through this minefield.

In this post, we’ll look at the web image formats which you can use today that work in the majority of browsers; and my next post will investigate the next generation formats that are on the horizon (and already supported by some browsers).

Current web image formats

There are four main image formats widely used in web design & development today:

• GIF
• JPG
• PNG
• SVG

Each of these image formats has unique characteristics which align themselves to a particular set of uses.

Let’s investigate each of these formats in more detail…

When to use a GIF

GIF stands for Graphical Interchange Format and was developed by Compuserve in 1987. The creators intended it to be pronounced with a soft “g” like in “gym” however the internet decided to go with a hard g as in “golf”.

While it never had the quality of the earlier JPG format when it came to photos, GIFs had 2 superpowers for the early web:

1. You could utilise them to create simple animations
2. You could implement transparent backgrounds (leading to a less boxy-looking web)

The GIF format is going through a renaissance with sites like Instagram, Giphy and the latest trend Cinemagraphs.

GIFs are great for the following uses:

• Adding small video clips. Especially in emails where normal video forms are not supported.
• Adding fun animations to websites and social platforms, especially if you do not have the know-how to create them with SVG’s (see below) and Javascript.

Avoid using the GIF format for these types of images:

• Photos (Due to its bitmap format GIFs can become quite big files if used for photos and graduations).
• Transparent images (PNGs are much better).

When to use a JPG

JPG or JPEG (Joint Photograph Expert Group) has always been the best way to display photos on the web. In the future, this might change, but for now, it’s your go-to format.

JPGs can be compressed at different levels, providing better image quality or better download times (smaller file size) depending upon your requirements.

Fine-tuning this process can help your page speed, but keep an eye out for blurring sharp diagonal edges (see below) in the photo where you see artefacts appear as the compression increases.

Also, make sure your images are set to the right size. Modern phones and cameras create huge MB files where even the largest full-screen images on the web only need to be 1920 px maximum width and most can be much smaller.

Where possible, avoid using JPGs for images that include words. Inexperienced designers often combine photos with text, although this can cause larger files, reduced legibility (after compression) and issues with responsiveness (type pushing off the side of an image – see below).

Type within the image can be seen moving outside the image area.

When to use a PNG

PNG (Portable Network Graphic) is a relatively new format, and for web developers at least, took over in no small degree from the humble GIF.

GIFs are limited to 256 colours (not a problem when launched) but now look a bit tired on today’s new hi-def screens. PNGs fixed this limitation and also allowed for transparent backgrounds without the jagged edges you would see in a GIF.

PNGs are perfect for line drawings and photos where you need to cut out the background, although they can be a heavier (larger file size) than JPG or GIF.

Avoid using PNGs if you can use SVGs instead.

When to use SVG

SVGs (Scalable Vector Graphics) are the latest fully-supported format. They are XML-based vector format, made using very lightweight code, and can – as the name suggests – be scaled. You could use the same SVG in the header of a mobile website and then use it to project onto the side of a building. Also, when combined with additional code, they can be bought to life with interactive animations.

SVG image format limitations

SVGs should only be used for line drawings and typography, which makes them ideal for logos, icons and infographics.

PNG: 29kb	SVG: 12kb

SVGs produce far crisper lines which are much more noticeable when viewing logos on retina displays.

Optimising images for better SEO

Image optimisation is one of many factors that play into improved SEO. Why? Because well-optimised images mean faster page load speed, which Google likes to see.

Our advice is to use a service such as Tinypng for both PNG and Jpeg optimisation. GIFs can be compressed using EZgif.

Photoshop does allow for a certain amount of control over the compression of images, but we always find that running your images through a 3rd-party tool reduces file sizes even further.

SVGs can be compressed using Vecta.io, but we tend to use the original vector illustration tool for this, such as Adobe Illustrator.

We hope this article has been helpful for when you next ask yourself ‘What image format should I use on my website?’.

Next time around we’ll be looking at next-generation formats.