Image formats: When and where to use them

With so many images on the web, one has to wonder: what is the best image format?

Unfortunately, there’s no straightforward answer to this. Each format has their own merits and faults. And it all depends on your particular situation and what you are willing to sacrifice. It’s more or less a give and take situation.

Think of image formats as different types of batteries. An AA battery may not necessarily be better than a car battery since they have very different uses, and this logic applies to image formats as well!

Why do image formats matter?

Using the wrong image format can easily mess up the user experience of your site, be it slowing down your site or making products look much worse than they actually do.

In fact, it can even drive traffic away, with potential customers never even visiting your site! This is because the speed at which your website loads at also affects search engine optimisation and where your site stands at Google’s SERP rankings.

But before we dive into the topic, there are a few things you should know before we start comparing the different image formats.

Lossy vs. Lossless compression

When we discuss about images, we can’t avoid the topic of lossy and lossless compression. These terms refer to image compression techniques and while they both reduce the sizes of image files, the way they go about it as well as the end product differs quite a bit.

Lossy Compression

Lossy compression occurs when some data from the original image is permanently removed during the compression process. This reduces the file size of the newly compressed image at the expense of image quality. And the lower the image quality, the lower the file size and vice versa.

Lossless Compression

Lossless compression on the other hand, removes only the non-essential metadata instead. As a result, the image quality remains mostly as good. However, lossless compression does not reduce file sizes as much as lossy compression.

To sum up Lossy vs Lossless Compression:

Lossy compression – smaller file size, lower image quality
Lossless compression – bigger file size, higher image quality

Raster vs. Vector

Two other common terms that you might hear being tossed around are raster and vector. Both refers to how an image is constructed.

Raster Images

Raster images are images that are formed from individual pixels and these pixels are limited. And by limited, we mean that they cannot be resized larger without a trade-off in image quality usually in the form of pixelization or blurriness.

Vector Images

On the other hand, vector images are constructed using paths that are shaped by mathematical formulas. As a result, they can be resized without any trade-offs in image quality or file size.

To sum up Raster vs Vector Images:

Resizing raster – to be avoided
Resizing vector – not a problem

What formats are commonly used?

Now, back to the topic of image formats.

Typically, a website would utilize four main image formats: JPEG, PNG, GIF and SVG. These are the main image formats we will be discussing about in this article.

There are other file formats out there such as TIFF, PSD, EPS and so on but those aren’t typically used on websites as browsers by and large don’t support them. 

JPEG/JPG

Probably the most common image format of the bunch, JPEG or JPG, stands for ‘Joint Photographic Experts Group’, named after the committee that created and maintains the standard.

First things first. JPEG and JPG is essentially the same thing. There is no difference between these two file extensions and renaming your file from .jpeg to .jpg will still give you the same format.

You might ask: why is there even such a difference in the first place? Well, back in early versions of Windows, there was a limitation of three characters on file extensions while other operating systems such as MAC did not. This resulted in Windows users adopting the .jpg format while MAC users continued to use .jpeg. The former has since become the default image format on many image software such as Photoshop.

Strengths of JPEG

Firstly, JPEG offer the most flexibility when it comes to compression, allowing the user to choose the compression level. And as JPEG is considered a lossy image format, this choice of compression level can help users get the balance they seek between image quality and file size. JPEG is also widely supported across browsers and operating systems, meaning visitors to your website are less likely to run into an error box.

Weaknesses of JPEG

As a raster file type, JPEG cannot be up scaled without compromising the quality of the image.

So it’s best to avoid using JPEG for photographic images such as product images and images of people. Avoid using JPEG when creating graphics, especially those with small text as well as for illustrations.

To sum up JPEG:

1. JPEG = JPG
2. JPEG allows users to choose level of compression
3. Relatively small file size
4. Widely supported
5. Good for photographic images – product images/images of people
6. Avoid using for graphics, especially with text

PNG

PNG is another popular image file format. PNG, short for “Portable Graphics Format”, is a raster file format that uses lossless compression.

Strengths of PNG

PNG boasts a better text readability than JPEG while still having a similar level of widespread support on commonly used browsers.

And unlikes JPG, PNG images allow for transparency, which can be useful in certain situations.

Weaknesses of PNG

However, these advantages comes its own set of drawbacks as well.

For starters, PNG file sizes tend to be bigger than their JPEG equivalent and this can sometimes differ by a significant margin.

Typically, you would want to use PNGs for graphics with texts or line drawings. And although we mentioned that JPEG is the ideal format to use when it comes to photographs, PNG is an alternative to consider if you want to display photographs in a higher quality without any compression.

To sum up PNG:

1. Allows images to have transparency
2. Relatively big file size
3. Widely supported
4. Good for images that have texts

GIF

GIF, short for Graphics Interchange Format, is yet another raster file format that uses lossless compression.

Strengths of GIF

Best known for enabling brief animations, GIFs generally have a small file size (even smaller than that of JPEGs) despite utilizing lossless compression. This is because it was designed with the circumstances of early computer standards in mind, when dial up modem speeds were the norm. This small size allows the format to be used for short animations without having to worry too much about huge file sizes slowing down your website.

Weaknesses of GIF

However, GIF’s tendency for small file sizes comes at a price. It’s limited by its 256 palette of 24-bit colors as compared to the possible 16.7 million of PNG files.

Despite its limitations, GIF is still a decent format option when it comes to graphics, especially those that requires brief animations and small file sizes.

To sum up GIF:

1. Limited colors
2. Smallest file size when compared to it’s JPEG and PNG counterparts
3. Widely supported
4. Good for graphics that contain limited colors

SVG

Lesser known than its aforementioned brethren, Scalable Vector Graphics or SVG for short, is a vector style format that uses lossless compression.

Strengths of SVG

SVG utilizes Extensible Markup Language (XML) to form images instead of relying on pixels like the previously mentioned raster file formats. In simpler terms, it means that unlike JPEGs or PNGs, you can upscale SVGs infinitely without any occurrences of pixelation.

Another benefit of SVG files is that they tend to have smaller file size as compared to JPEGs and PNGs, although this depends on the level of complexity and detail of the artwork.

Weaknesses of SVG

While the file format is still supported by all the major browsers, certain platforms like WordPress do not support SVGs by default, although this may be resolved by using certain plugins. SVGs are also not supported by social media networks like Facebook Or Twitter when it comes to sharing.

To sum up SVG:

1. Freely scalable in image editors like Photoshop
2. Lower file size than JPEG or PNG for simple images with few details.
3. Supported by all major browsers
4. Not supported on some social media platforms for sharing
5. Needs plugins to work on vanilla WordPress

WebP

WebP is a new, emerging image format that’s developed by Google.

Strengths of WebPs

It allows both lossless and lossy compression for images with better optimized compression to reduce file sizes with minimal quality loss.

This allows for similar quality images to their JPEG and PNG counterparts while being smaller in size in most cases.

Weaknesses of WebPs

Sounds like a very good deal doesn’t it? Well, before we go further, do take note that support for WebP is not supported on certain older browser versions and even entire browser platforms like Internet Explorer or Safari, which only partially supports the format.

One way to bypass this issue is to have both WebP and JPEG/PNG fall back versions of each image. However, this workaround can sometimes be more effort than it’s worth depending on how much your file sizes were even reduced.

WebP is also not natively supported on Photoshop and Lightroom, needing a plugin in order to edit them.

To sum up WebP:

1. Options for lossy and lossless compression
2. Provides a lower file size than JPEG or PNG most of the time
3. Not supported by some older browser versions, only partial support on
4. Needs plugins to work on Photoshop and Lightroom
5. Not meant to replace JPEG and PNG completely (for now at least), rather meant to be used to serve browsers that support the format

Different Image Formats, For Different Needs

You are now better equipped to choose the right image format!

With so many image formats around, choosing the right image can be daunting at times but don’t worry and simply focus on your desired end result.

We hope you’ve learnt something from this post and if you’re looking for someone to take care of all your website needs, feel free to contact us!