Image File Formats for the Web: The Quick and Dirty guide

Confused about image file formats? We’ve put together a quick and dirty guide for you, so you always use the right format where you need it.

We’ll cover JPEGs, GIFs, PNG files, SVG files, and TIFs – what they are, and when you should use them.

JPEG (Joint Photographic Expert Group)

JPEGs are the default file format for a huge range of applications, including digital cameras, images and graphics in Word documents.

They’re usually used when you need to store lots and lots of complex colours (up to 16 million), like in a photograph. (Hence why they’re the default for digital cameras.)

When it comes to the web, JPEG is often favoured because it can be compressed to a fraction of the size of the original – down to about 5% of the original size. And when you’re hosting images with limited server space, that reduction becomes critical.

And of course, the smaller you images the faster they’re going to load for your users.

JPEGs are compressed with Lossy compression, meaning that it gets rid of some data to make the file smaller. To compress images and retain as much quality as possible, JPEGs use an algorithm to get rid of colour blends that the human eye can’t detect. Therefore, it can retain as much quality as possible for us while also keeping files nice and small.

Best practice says to compress images up to 75% of their original size to keep the quality as high as possible.

Pros

• JPEGs can get very small
• You can resize and reduce your images to be as small as you need it to be
• Easy file to deal with – every single program can read and manage JPEGs

Cons

• Can look grainy and terrible
• Doesn’t support transparency
• Data is irretrievably lost when you compress images

Best used for…

GIFs (Graphic Interchange Format)

Originally created for the painfully slow dialup speeds of web 1.0, GIFs are very small and every simple files. For example, they only have an 8 bit, 256 colour palette to choose from, compared to the 24 bit, 16 million colours of JPEG.

Because they limit the colour options they are very small images. For pictures with less than 256 colours, they allow for easy, lossless compression. That means you cans shrink them and they’re still going to look great.

However, for images with more than 256 colours, they lose an enormous amount of data because of how they compress.

GIFs compress two ways: first, they combine small recurring patters into one big pattern. That’s what gives GIFs their soft look sometimes.

The second way is much more important. Because they only have 256 colours to choose from, they combine them to make new colours. This means less colours to store, so a small file.

However, there is some quite noticeable loss of quality when GIFs compress this way.

Pros

• Allows animation
• You can compress them without losing any data (sort of)
• Are very simple, small files

Cons

• Can look grainy and terrible
• For images with more than 256 colours, there’s enormous data loss

Best used for…

PNGs (Portable Network Graphics)

Designed in the mid-1990s to get around patent problems with GIFs, PNGs combine the best of both GIFs and JPEGs.

On the one hand, they can be saved as 8-bit or 24-bit files, so they can be tiny files with a simple colour scheme, like a logo. Or, they can be huge detailed files with a broad range of colours, like a photograph.

PNGs also support transparency. This means that PNG files can be loaded into any colour background and not have any problems. It also means that PNG files can be faded and made to look more or less transparent.

Consider the image of the fading dot above – its solid black in the centre, but as it fades out it becomes transparent (hard to tell because it’s on a white background, but trust us - it’s transparent.)

A  common example of using PNGs for their transparency is when a website layers images like logos over another image. The logos can be a shape other than a square or rectangle, without needing a white background to fill in the edges, which is really only possible with PNGs.

This transparency function makes PNGs a favourite file image for graphic designers.

Pros

• Supports transparency
• Is relatively easy to deal with – can be opened by most programs
• Lossless compression for both simple and complex images

Cons

• Totally unsuitable for print
• Larger 24-bit images tend to be very large.

Best used for…

SVG (Scalable Vector Graphics)

So far, we’ve dealt only with raster images. These are images that are series of pixels, combined to make an image. A little bit like paint-by-numbers, but with pixels instead.

SVG files are vector images. Instead of being based on pixels, which have a finite size, vector images are based on proportions and ratios between various points. These are calculated using various formula, but the end result is that you can make them as big or as small as you want, from a tiny sticker to an enormous billboard (you can learn more about vector and raster images here.

Anyways, SVG files are vector images and based on XML, so you can create them in something like Notepad. Basically, to create an SVG file you describe the picture you want to create using various attributes that XML recognizes.

For that reason, it’s a lot like HTML or CSS more so than a file format for a picture. So if you know HTML or CSS, then SVG files should be easy enough for you to create fonts, logos, and other graphics.

SVGs are popular because they can be created, deployed, and tweaked quickly online, right from a text editor. Plus, the outputs from SVG editing tend to be very small, making them easy to store on a web server.

Pros

• Can be resized to any size you want, with no effect on quality
• SVG files are very small – smaller than GIF or PNG on average
• Better for the web because it’s based on text, which web crawlers can read, and is compatible with every web  browser (to some degree)
• Prints better than PNG files

Cons

• Not a lot of programs can open SVG files
• You need to have at least some tech and design skills to do anything with them

Best used for…

TIFF (Tagged Image File Format)

Fans of Apple will recognize TIFF images. Sometimes, they’re called TIF files, for their file extension .TIF. TIFF are the crème de la crème for image quality.

Originally designed for desktop publishing, they’re compatible with CMYK or greyscale printing, and they’re probably one of the best ways to save images for maximum quality. As a result, they’re favoured by designers and photographers who need top-end raster images.

However, that extra data comes at a cost – TIFF images are very large. So big, in fact, that they can bring load times to a gruelling halt.

For that reason, it’s simple to convert TIFF to other image formats, and compress them from there.

Pros

• Great for print
• Awesome quality
• Stores all layers, transparencies, and effects of photo editing (e.g. Photoshop)

Cons

• Huge files – essentially unusable for the web (especially mobile data)

Best used for…

Conclusion

It’s more about picking the right image format for what you need. Hopefully, this guide will help you out.

Here’s a quick summary:

• JPEGs are good multi-purpose image files for photographs and other complex images.
• GIFs are good for small, simple images (logos) and animation.
• PNGs are a balance of both JPEGs and GIFs, plus they support transparency.
• SVGs are vector images, and are awesome for simple graphics that few shapes. But you need to be comfortable in a program like Illustrator to use them.
• TIFF images are giant, all-star raster images, but are understandably heavy. Great for print and photo editing, terrible for the web.