Image File Formats and the Web

📅   ⌚ 7 minutes  

Image formats are an important consideration when developing for the web. As well as performance you need to keep in mind support, use-cases, and alternatives. Picking the best image format for your project is often a case of weighing up the pros and cons.

What are image file formats?

Image files arrive in different formats. These image file formats are digital data stores containing information within the file itself, so they can be displayed or printed.

Rasterization converts this data into a grid of pixels, each of which has a number of bits to designate color, and in some cases the transparency. Vectorization contains geometric descriptions that allow smooth rendering at any display size. Vector graphics must still be rasterized during the display process.

The data within image files can be uncompressed or compressed.


Image file sizes

Before taking compression into consideration, it is possible to correlate the file sizes of raster-based image files with the number of pixels in the image and the color depth or 'bits per pixel'.

Example: 1,200 x 1,000 pixels with 24 bit color...

1200 * 1000 * 24 = 28,800,000 bytes / 27.466 megabytes.


Image file compression

Image file compression is achieved with algorithms, of which there are two types.

  1. Lossless compression
  2. Lossy compression

Lossless compression algorithms are designed to preserve an exact copy of the original image.

Lossy compression algorithms are designed to preserve a representation of the original image that appears identical to the naked eye.

Since lossy compression does not in fact maintain an exact copy of the original image, it is possible for the algorithm to achieve much smaller file sizes than you can with lossless compression.

Vector formats such as SVG cannot be compressed in the same way as a raster format image. One way to compress SVG files is with gzip [1].


Image formats compared

Image formats and the web

Since the infancy of the web, we have seen changes to the image formats that are used as best-practice. There are image formats that are recommended for different situations, e.g. PNG for graphics and JPEG for images. There are also performance & support considerations to factor in. So the best image formats for the web are in a constant state of flux.

Prior to the late 90s the most common image formats on the web were the GIF and JPEG formats. GIF was used for graphics and JPEG was used for photographs.

There were other formats too. There was: BMP, IFF, PICT, TIFF - to name a few. This page, published in 1996, at Brown University contains a more complete list of file formats in the mid-90s.

At the end of the 1990s, the bitmap formatted GIF and JPEG were supposed to be replaced by PNG, SVG, and JPEG 2000, as described in this 1999 article by apache web review.

The PNG format had success in replacing GIF as a graphical user format, but we did not see JPEG 2000 replace its counterpart. The lack of adoption (and support) of SVG and JPEG 2000 formats in the early 00s is often why they are often mistaken as new formats.

Adoption of new formats has always been an area of debate, whether rational or not, these debates are one of the main reasons that superior formats fail to become widely adopted.

According to MDN (Mozilla Developer Network) the most used image formats on the web today are:

AbbreviationFile formatMIME typeFile extension
AVIFAV1 Image File Formatimage/avif.avif
APNGAnimated Portable Network Graphicsimage/apng.apng
GIFGraphics Interchange Formatimage/gif.gif
JPEGJoint Photographic Expert Group imageimage/jpeg.jpg, .jpeg
PNGPortable Network Graphicsimage/png.png
SVGScalable Vector Graphicsimage/svg+xm1.svg
WebPWeb Picture formatimage/webp.webp

Source: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

Formats in the Present & Future

Today, the oldest formats are still among the most common on the web. Despite the fact that these old formats perform worse when compared to newer formats such as WebP or AVIF.

Some old formats such as JPEG are pursuing other formats for transcoding. The JPEG committee is looking at losslessly transcoding existing JPEG files to JPEG XL. This goes to show that there are still conflicting ideas about the best way forward for image file formats on the web.

Another matter is browser support. While browser support has been a historic issue, some of the older browsers are fast being discontinued. Additionally, the HTML Spec has often offered provisions known as fallbacks to allow websites to use newer formats while providing options for browsers without support.

In 2020, Safari finally announced native support for WebP which means it now has full-support across all modern browsers. This does come with a caveat however... You have to be using an upto date version of iOS and OSX in order for WebP to work natively in your browser.

Put in simple terms. Support is no longer the issue it once was - Safari is still the main issue.

Image formats you should be using:

The following are the best image file formats for the web today, with a little further explanation of each.

WebP

First released in 2010, WebP is developed by Google and stands for 'Web Picture format'.

WebP is one of the best image formats for the web today, with full browser support in all modern browsers, there is no longer any need for adding fallback methods.

Another old criticism of WebP is the loss of important metadata. In 2011, Google introduced an 'extended file format', support was then enabled by default in 2012.

The RIFF container allows for metadata (exif or XMP), alpha channel (transparency), animation, lossless compression, and an embedded ICC color profile.

This makes the WebP format a suitable replacement for JPEG, PNG, and GIF file formats.

In terms of file size reduction, it can range from image to image. In some cases offering up to a 92% reduction over the JPEG format.

AVIF

AVIF is an abbreviation of 'AV1 Image File format'. It is based on the AV1 video format, offering compression with AV1 in the HEIF file format and was introduced by Netflix in 2018.

The AVIF compression provides better image file size reduction than counterparts such as WebP. Some other supported features includes lossless and lossy compression, alpha transparency, several color profiles. AVIF also supports 8, 10, and 12-bit color depths.

While the AVIF format looks set to become the long-term successor to WebP - it is not the best choice at present. For instance, it took WebP around a decade to gain full browser support... While browsers development cycles are faster today, the AVIF format is still far from being well supported.

You can monitor the support progress here - https://caniuse.com/avif

SVG

Scalable Vector Graphics (SVG) image files are an XML-based vector image format. Unlike WebP and AVIF, SVGs are not a new image format. The initial release came in 2001 and it has been developed by the World Wide Web Consortium (W3C) since 1999.

Vector image formats can be scaled gracefully without losing image clarity and this important characteristic is why SVG enjoys full support from all major modern browsers.

SVG files are not only superior for certain graphic uses to PNG files for this reason alone. They also offer smaller file sizes, as much as 90% in some cases. SVG files can even be used for your websites favicon, with a fallback in place for the old .ico format.

With small file sizes, great functionality, full browser support, and the flexible re-sizing going for it the SVG image format is a great one for using on your web projects.


Final thoughts

We will continue to see the use of many image formats on the web for years to come.

That said, as developers we should be looking to provide the most optimal solution. In almost all cases on the web, you can do that by working with just a few image file formats.