website image formats

STUART WATKINS

Founder

Connect

November 25, 2019

What image format should I use on my website?

JPG, PNG, GIF? What image format should I use on my website? We like to empower our clients; arming them with a flexible easy to use CMS. It's not all plain sailing though. We often hear about load times increasing and poor image quality, which for the most part, is down to the (incorrect) use of image format.

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

Falling into 2 parts, 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 looking at the next generation formats that are on the horizon (and already supported by some browsers).

Current web image formats

  • GIF
  • JPG
  • PNG
  • SVG

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, GIF’s 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, Giffy and the latest trend Cinemagraphs.

GIF’s are great for…

  • 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 GIF’s for…

  • Photos (Due to its bitmap format GIF’s can become quite big files if used for photos and graduations).
  • Transparent images (PNG’s 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.JPG’s 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 speeds, but keep an eye out for 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 JPG’s for images that include words. Users often combine photos with text as a quick fix although this can cause larger files, reduced quality and issues with responsiveness (type pushing off the side of an image).

Headmasters Website Images are always beautiful and crisp

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 took-over in no small degree from the humble GIF. GIF’s are limited to 256 colours (not a problem when launched) but now look a bit tired on today’s new screens and browsers. PNG’s fixed this and also allowed for transparent backgrounds to images without the jagged edges you would see in a GIF.

PNG’s 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 PNG’s if you can use SVG’s instead.

When to use SVG

SVG’s (Scalable Vector Graphics) is the latest fully-supported format. An XML-based vector format, they are 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.

There are limitations to the format. They should only be used for line drawings and typography, but this makes them ideal for logos, icons and infographics.

Caranday Logo PNG Image Format Caranday Logo SVG Image Format
PNG: 29kb SVG: 12kb

It’s just the image weight with SVG. The lines are far crisper and this can be noticed much more when viewing logos on retina displays.

I hope this has been helpful. Next time round we’ll be looking at next-generation formats. In the meantime please get in touch if you have any questions.

 

Can we be of help?

next post background

LWDA Launch

Read more