If you have ever had to export pictures from any of the major image editing software (Photoshop etc) then you will know that there are quite a few image types you can use. What many people don’t know is when to use each format, and what some formats can do that others can’t.
Here is a quick and dirty outline of some of the major image formats and typical use cases for them.

Raster Formats

Raster or rasterised graphics come in many different formats, but all follow the same base idea. With raster formats images are stored in a big grid where each cell of the grid has a value that tells the computer what color to draw in that square, when it’s time to draw the image.
For example you could have a raster image that says to draw white at 0,0 (generally top left most square) then black at 0,1 (next square along), and so on until you get a checkerboard image. This image from Wikipedia does a great job of illustrating this concept.

JPG (JPEG)

JPEG (or JPG) is one of the most common image formats you can run across. It is commonly used by digital cameras due to its flexible image compression and reasonable accuracy. This compression come in pretty handy when using JPEG’s on the internet so it is not uncommon to see this image format on the internet as well. The downsides of the JPEG image format is that it used lossy compression, so some image information will be lost when using JPEG to store your pictures. This can be mitigated with use of JPEGs image quality selector. JPEG is also not that suitable for images undergoing multiple edits, as each time you save the file it gets compressed again and some more information will be lost. To learn more visit the JPEG wikipedia page here.

Good for:

• Unedited photographic images
• Web graphics

Bad for:

• Image editing pipelines
• Line drawings
• Massive images that will be zoomed on
• Transparent backgrounds

Graphics Interchange Format (GIF)

GIF was developed to allow colour images to perform better on the internet. When GIF was developed internet speeds were the main limitation of  viewing images online. GIF was developed to allow better color images, but still keep the file size very small. GIFs also had support for animation which allowed the format to keep its popularity long after file size became less important for online images. GIF has mostly been replaced by PNG for image files and MP4 or WEBM for animated content. GIFs are great when image/animation file size is the most important, but falls short on image quality and color depth.

Good for:

• Small file sizes
• Animations

Bad for:

• Image quality
• Color depth

Portable Network Graphics (PNG)

PNG was designed as a replacement for GIF as a good image format for internet media. It has much better support for color space (24-bit RGB, 32-bit RGBA), as well as transparency, and lossless data compression (there is no information lost on saving the image). The increased color space, support for transparency, and lossless compression makes it a okay image format for internet and interactive media pipelines, though the lack of support for CMYK color pallets makes it suitable for print media. Unlike GIF, PNG does not support animation.

Good for:

• Internet media
• Image quality
• Editing images
• Transparency

Bad for:

• File sizes
• Not many applications support PNG with good color ranges
• Basic print media

Tagged Image File Format (TIFF)

TIFF is a image format designed to be used by image manipulation and design software. It is most commonly used in desktop publishing and print media design. TIFF is a very flexible image format which can even contain other image formats (like JPEG) or store image data itself. TIFF has support for layers and pages which are very important in print media and media design. TIFF is currently owned by Adobe and as such has good support from the Adobe Creative Suite list of software, but can have limited support from other software.

Good for:

• Print media
• Editing pipelines
• Image Quality
• Color Depth

Bad for:

• Image sizes
• Software compatibility
• No browser support

Vector Formats

Unlike raster formats, vector base images don’t deal directly with pixels. Instead vector images are a set of instructions for how to create a image from a predefined set of moves (lines, arcs etc). Think of it more like a join the dots style of computer imagery.  An example of one such instruction could be “Draw a line from 0,0 to 100,100” which would draw a diagonal line across the page. The specifics of these instructions are dependant on the vector format chosen. The benefit of this approach is that vector images can be scaled to almost any size without loss of image quality.

Scalable Vector Graphics (SVG)

SVG is a very common vector graphics implementation where the instructions are written in XML format. SVG has support for basic shapes, text, painting (fills, etc), gradients, interactivity (clickable content, hover, etc), and animations. This wide range of functionality makes SVG formats a great choice for scalable web images which can then be animated and interacted with on the client’s computer. As such you will often see SVG’s on websites with active content, or websites where there is a lot of customizability (color themes, animated images, etc). Due to their text based format SVG’s are also quite a small file size and such are extra suitable for the web.

Good for:

• Scalable web images
• Interactive images
• Animations
• Computer manipulated images

Bad for:

• Client performance
• Client software compatibility

Portable Document Format (PDF)

PDF is designed as a scalable format for communicating documents between computers and print systems, abstracted from the software that the file originated from. PDF started with basic text, image, and line style formatting but has expanded to include the ability to have scripting, interactive forms, embedded raster and vector images, and embedded videos. This makes PDF’s one of the most flexible file formats around. You will typically see PDFs used for downloadable documents, reports, exports from proprietary software, and online forms.

Good for:

• Documents
• Forms
• Software compatibility
• Exports

Bad for:

• Rendering in browsers

That’s a quick rundown on some common image file formats and when you should use them.

Until next time
Tim Gray
Coffee to Code