Image fortmats

16.11.2015

Image Formats

There is a lot of talk about different image formats on the web, and which one is the best. I’m going to go through the basics of the “standard” formats, and how they work. I’m not going to go into the fine details of how to use them, but I am going to explain some of the technical details.

The formats I will write about are PNG, JPEG, GIF and SVG as well as briefly talk about WebP.

I will start with the bitmap formats. As most of you probably know, a bitmap image is rectangular field of pixels of a certain height and width. Each pixel is represented by a value indicating the colour of the pixel in the image. The actual formats are usually a bit more complicated, but this is what they all represent.

There are a few different ways to represent the colours:

Indexed colours

Indexed colours is a way to represent a limited number of total colours in the image that takes very little space. A palette of a certain amount of colours are assigned, and each pixel in the image refers to the number of the colour, where the colour is defined in greater detail. This method is good for illustrations, icons of text, but not for photos.

Formats supporting indexed colours are GIF, and PNG.

RGB colours

With RGB colour space, each pixel can have whatever value possible within the colour space used. The colours represented are red, green and blue. This means that the image can use a lot more colours, but it usually also take up more space.

There are a few different colour depths that are used, or have been used.

A few once popular, but now obsolete modes were 12bit, 15bit and 16bit colour modes. 12 bit used 4bits for each colour (Red, Green and Blue) for a total of 4096 colours. 15 bit used 5 bits for each colour for a total of 32768 colours. The 16th bit was usually used for transparency, or alpha as it is usually called in this context. 16 bit usually used 5 bits for red, 6 bits for green, and 5 bits for blue. This produced a total of 65536 colours.

Modes used today are 24bit or 32bit for 8 bits per colour with and optional 8 bits for alpha, and 48bit or 64bit, for 16 bits per colour and alpha. These modes can represent millions or more colours. 16 bits per colour is not used on the web, but usually used for photographs taken in RAW mode. This means that you can do more manipulation on them, and still end up with a 32 bit image.

Formats that support RGB mode are JPEG, PNG and SVG.

Grayscale

If the image is entirely in black and white, it can be represented in a grayscale colour mode. These are very similar to the RGB modes, but has only one “channel” for each pixel. It is essentially the same as having the red, green an blue all having the same value per pixel. This mode is mainly used to save space.

CMYK colours

CMYK colours, or cyan, magenta, yellow and key, are used exclusively for images used in print. Using them for the web is pointless, because browsers will need to convert them to RGB in order to display them on the screen. They are used because colour printers use these colours when printing images.

Formats that support CMYK mode are JPEG and SVG.

The formats

GIF

The Graphics Interchange Format or GIF is an older image format that uses indexed colours. Nowadays, there is really only one reason to use GIF, and that is animations. As it is the only web format that has built in support for animations, it refuses to go away. GIF images can support at most 256 indexed colours, and this is the reason why GIFs look grainy or has big fields with the same colour.

GIFs should really only be used for animations. And if you are designing something for the web from the ground up, you should probably use canvas or video instead.

JPEG

JPEG or JPG (on account of the MSDOS 3 letter file extensions) is a format that is popular for photographs. The name in an acronym for the Joint Photographic Experts Group. JPEG is a lossy format. That means that if you save an image as a JPEG, you will lose information, and can never restore the image to it’s original form. But it is one of the most efficiently compressed formats for photographs and is good to use on the web because of it’s small size.

JPEGs should only be used for photographs or images that is very similar to photographs. Because of the aggressive compression of JPEG it produces “artefacts” that is very easily spotted on fields that is all the same colour, or has sharp edges. As such it should be avoided for text or clip-art.

PNG

Portable Network Graphics, or PNG is the newest of all the well supported web bitmap formats. It uses lossless compression, and is the only well supported web format who can display full colour images without losing quality. PNG has support for both indexed colours and RGB. PNG also support alpha channels.

PNGs can be used for most things on the web. The only reason not to use it is size, or if you need animation support. There are PNG based formats that support animations, but they are not supported by most browsers. PNGs support full alpha channels and as such are very good as icons or design elements.

Really if you don’t know specifically why you should use something else, you should always use PNG.

Vector graphics

Unlike bitmaps that represent specific pixels on the screen, vector graphics represent shapes in the for of lines and curves. The advantage of this is that it can be drawn in any size and still remain sharp. This is especially useful with the high resolution screens used today both on computers, and on mobile phones. It is no longer the case that in image a certain amount of pixels represents an approximate relative size on the screen. Vector graphics are usually a lot simpler than bitmap images can be. It is impossible or impractical to represent photographs or similar images as vector graphics.

SVG

The most used vector graphics format on the web is Scalable Vector Graphics or SVG. It is now supported on all modern browsers. While it has been possible before to display vector graphics in browsers with the Flash plugin, SVG is the first format to gain widespread native support. It’s an XML based format, which means that images can easily be generated or modified dynamically by both server side scripting like PHP or client side scripting like JavaScript. SVG images are natively text based XML, but can be losslessly compressed using the gzip algorithm. Even if not specifically compressed, most http and all http 2.0 connections use build in compression, that means that SVGs load fast on the web, unless they are really complex.

The future?

There is an up and coming format called WebP spearheaded by Google that carries a lot of improvements over existing formats. Specifically it is aimed at replacing JPEG, with better compression and more features. WebP supports both lossy and lossless compression, animations, alpha channels and a lot of other things missing from JPEG. It has received some criticism for not being able to store images with as high quality colours as JPEG on account of the colour profiles used in the lossy version, but as it is intended for use on the web, this is not considered a big problem. It is mainly intended for photographs, but is also pretty good in other uses on account of it’s versatility.

The browsers have been slow to adapt support for WebP, so it is not really usable yet. Currently it is only supported natively on Chrome and Opera. Some other browsers can display it with the help of JavaScript.

Niklas Schönberg

Comments

comments