Blog

Different image file formats explained

27th April 2022

Thanks to smartphones we're all taking more pictures.

Whether it's for work or in our personal lives, gone are the days of snapping a quick polaroid (nostalgic hipsters notwithstanding) or having to develop a roll of film.

It's easier than ever before, but infinitely more complicated. You didn't have to worry about dimensions or image file formats when taking photos with your old Kodak.

But why does it matter?

If you've read our blog post, 'How to create digital assets for social media', you'll have learned how important image dimensions are for certain platforms, but what about image formats?

Let's take a look at the most common formats, and their specific use cases.

JPEG

JPEG files (Joint Photographic Experts Group) are the most commonly used on the web, and probably the most familiar to you.

JPEGs use 'lossy compression', which means it gets rid of the image data not visible to the human eye.

What's it good at?

That compression means JPEGs are very 'lightweight'. That is, the file sizes can be reduced much more than other image file formats.

This means they're ideal for websites because they load quickly while still being of a high enough quality for digital use. It's also worth noting that web page load speed is a recognised SEO ranking factor, which means using optimised images is even more important.

What's it not so good at?

If you need high resolution imagery, JPEGs won't be the best option for you. Also, bear in mind that the file is compressed each time the image is saved, reducing quality further.

They also can't include transparency, so if you want to place a logo on a background that's not white, you're going to run into trouble.

Which leads us nicely onto PNGs…

PNG

Unlike JPEGs, PNGs (Portable Network Graphics) use 'lossless compression', which means it retains the original colours and sharpness.

What's it good at?

PNGs are a great option when you want images that are high quality, and you can make the background of the image transparent too.

What does this look like in practice? Exactly how the logo in our navigation bar is supposed to look:

What's it not so good at?

Lossless compression retains image quality, but it also retains file size. This means you shouldn't use PNGs extensively across your website, especially when it's not necessary.

GIF

If you're not familiar with the name 'GIF' (Graphics Interchange Format), you've almost certainly seen and used them.

GIFs are those short, repeating animations that crop up in your family WhatsApp group, social media feed or company Slack channel.

What's it good at?

GIFs are perfect for adding humour, flair or demonstrating a process within a piece of content, but they can also be used for non-animated images.

GIFs use LZW (Lempel-Ziv-Welch), a type of lossless data compression algorithm, and they're suitable for graphics that use a few colours. This means they can be used for simple icons, diagrams, shapes and logos, but nothing that includes a gradient.

Although their small file size also makes them an alternative to JPEGs for icons and logos on a website, PNGs are more efficient and offer proper transparency support.

What's it not so good at?

The colour limitations of GIFs mean they aren't suitable for more complex images that require a higher resolution.

SVG

SVG stands for Scalable Vector Graphics, but what's a vector?

Vector graphics are digital images based on geometric shapes, designed in software like Adobe Illustrator.

What's it good at?

Although JPEGs and PNGs offer good quality for digital use cases, they can't be easily scaled. This is where SVGs come in.

These images retain the same high quality even when drastically resized, which makes them perfect for things like company logos that frequently need to be resized depending on where they're used. This makes SVG a great solution for the web, but also for printing purposes.

Whenever you're creating a new vector graphic it's worth making an SVG version alongside PNG and JPEG.

What's it not so good at?

Although SVGs are great for the web, social media platforms don't support them, so make sure you've got JPEG or PNG versions of any graphics you think you'll want to share.

TIFF

Although not suitable for all use cases, there is one area where TIFF (Tagged Image File Format) excels…

What's it good at?

TIFFs use lossless compression like PNGs, but unlike the other image file formats we've looked at, TIFFs offer significant advantages for image editing. They support RGB and CMYK colour models, and have a high colour depth of up to 32 bits per component. Layers, masks and transparencies can be saved too.

In short, this makes TIFFs perfect for printing high quality images.

What's it not so good at?

The high quality and lossless compression mean they're not suitable for the web. In fact, most web browsers don't even support them.

Steer clear of TIFF images unless you're printing them out.

ResourceSpace supports the uploading of all of these images, so you can always achieve what you need with your visual assets.

Want to find out more about our Digital Asset Management (DAM) platform? Request your free DAM instance below.