Throughout all the change and innovation of the past 20 years, there has been (seemingly) little change in the formats we use to share images online.
But changes are already here! Let’s take a quick look at the image formats we all use now, and learn about new formats we could be using instead.
Anyone who’s interacted with the web should be familiar with the “big 3” image formats– JPG, GIF and PNG. We use them to share images on social media, email attachments to friends and family, upload images to our website or blog, or build libraries of images for work and our personal life.
As someone who’s been working on websites for over 20 years, I don’t recall a time when we didn’t have these options, and I’m sure many of you feel the same. These “old school” image formats have really stood the test of time, especially when you consider how much else has come and gone over that same time period.
As a quick refresher, let’s discuss exactly what these three formats are, and how they’re used today.
JPG
The "Joint Photographic Experts Group" format (.jpg or .jpeg) has been around since 1992. This format allowed everyone to save large, high quality images at a fraction of the sizes offered by other formats such as TIF or EPS. There were (and are) drawbacks to its compression format, most notably in that image quality does suffer when highly compressed, and each time a JPG is opened and edited (re-saved), the quality goes down. Similar to copying a cassette from an existing tape (if you’re old enough to remember that). It is a “lossy” format.
While not ideal for print (though that’s changed over time), JPG quickly became the ideal choice for people wanting to share images over the Internet, where size and bandwidth mattered. And amazingly, even though we’ve gone from dial up modems to fiber optic networks, size still matters. The smaller the size, the faster the page load, and more people will engage with your online content. Of course with larger sites and huge libraries of images, the value of good image compression increases exponentially.
JPG images can be saved and served progressively, meaning users get a lower-quality preview of the image even as it is still fully rendering. And JPG images can contain metadata about images (EXIF). But there is no support for animation or transparency, however, and JPG doesn’t do as well when rendering images with type.
GIF
The “Graphic Interchange Format” (.gif) has been around longer than JPGs (since 1987). GIF was initially recommended for icons, illustrations, and other non-photographic images. It was also the only format that supported “animation” online, prior to Flash and some newer formats. Not complex or high quality animations, but a rudimentary series of images with some kind of motion effect. The humble GIF continues to be fully supported across all web browsers with no additional plugins required.
It’s somehow hung around, even after newer formats were designed to supplant it. Today the primary purpose of GIFs are animated GIFs – those funny, annoying, ever-present parts of message boards, text messages and wherever else you want to show some cheap, quick animated…thing. The primary ingredient of Internet memes.
But newer image formats discussed below, with support for animation, should eventually replace GIFs entirely and retire this (mispronounced) format permanently.
PNG
I’m old enough to remember when the PNG format (Portable Graphics Format) was introduced in the late 90s as a replacement for GIFs. In fact the name itself stands for “PNG replacing GIF." It was designed as both a superior format to GIFs, but more importantly, one that did not cost royalties to use the format (unlike GIF, until 2004). It does not support animation, however, and (thus) has yet to fully eliminate the use of GIF files.
Today it's still widely used across the web for every type of image imaginable. While JPG is still arguably the best choice for quality photos, PNGs can be used for photos, illustrations, backgrounds, icons and more. Unlike JPGs, it is a lossless format, meaning data is not lost in compression.
The chief advantage to using PNG is its built-in ability to support transparency. If you want to upload an image with a transparent background (and universal browser support), you need to use a PNG file.
WebP
Google acquired this new image format called WebP back in 2010, and has worked on improving it ever since. The primary benefit to this new format is a much higher rate compression at similar (or improved) quality to JPGs– 25% to 50% smaller file size!
Given the scale of image libraries maintained by Google, having 25% or greater reductions in filesize has had great benefits to the company in terms of file storage and energy required to serve images to the public (better site performance). And Google encourages all web developers to switch to using WebP for improved site performance.
WebP is supported by the latest versions of all major browsers (Chrome, Safari, Firefox and Microsoft Edge), making it one of the most viable options for a new and improved image format. It supports alpha transparency and animation as well, advantages previously held only by GIF and PNG files. And it also supports EXIF metadata on images.
There are a few drawbacks. WebP only supports 8-bit color, meaning it can’t support HDR (high dynamic range) and wide color-gamut images. It doesn’t support progressive downloads, like JPGs. And for sites where images are generated automatically (such as a CMS), they may need more time to process the images versus a JPG (thus negating some of the performance benefits), or currently lack the ability to save images in WebP format.
But it is still a very exciting newer format that can be used on most production sites today. Probably the only reason to consider anything else at this point is the promise of our next format, AVIF.
AVIF
AVIF was first released in 2019, as an open-source image format based on the AV1 video format. It is the newest of image formats we’re discussing here today, but one of the most promising.
Similar to WebP, AVIF offers superior image compression (with increased image quality) over standard JPG images. It also supports alpha transparency, animation and image metadata.
AVIF somehow improves on the compression and image quality levels of WebP, however, offering even greater reductions in filesize– 50% smaller than comparable JPGs. And unlike WebP, AVIF supports 12 bit color, which allows for high dynamic range and wide color gamut images.
Being open-source, AVIF can be used by other services without licensing fees. But given its newness and the lack of a giant corporation like Google behind it, support for AVIF across browsers isn’t as wide as it is for WebP. Currently it is only supported by Chrome and Firefox.
Another drawback may be the time to generate AVIF images dynamically in a CMS or other program. Similar to WebP, these can take longer to render than JPGs, negating some of the gains of smaller file sizes. This is rapidly improving, however, and should be less of an issue in the near future.
HEIF and HEIC
The HEIF format (High Efficiency Image File Format) was introduced in 2015 as a new format for images and “image sequences” like a burst of photos or “live” photos. The newer format saves images with a significantly smaller file size than JPGs while promising better image quality too (16-bit color). AVIF is based on HEIF.
Apple adopted the format in 2017 for images saved to the iPhone and iCloud space, calling it the HEIC format, and making it much more widely used across their entire ecosystem. As of 2022, there are still no web browsers that support it (not even Apple’s Safari browser!), making it of no practical use on websites.
SVG
I thought I'd add a quick mention of the SVG format as well.
SVGs (Scalable Vector Format) are not new at all. It’s been around since 1999. But it’s not as widely used as our previous three, and still has a bit of “new car smell” to it. Now that all modern browsers support it, there’s really no reason to not use SVG format for all your non-photographic images– logos, illustrations, icons, etc.
Unlike all the other formats listed here, SVG is vector based, meaning it can never be used for a raster-based photograph. There are no pixels involved. It is written in XML code, meaning it can be read and manipulated for all kinds of purposes, such as recoloring an image or animating it through movement.
Its number one superpower, however, is scalability. Unlike our previous 3 formats, you can scale any SVG file up and down in size without a loss of image quality. And given the wide range of screen sizes and devices in use, having an image that can resize on the fly like this is invaluable. It took a long time to be widely supported, but now at least a small part of every modern website.
Now that you know more about some of the newer choices in image formats, how can you get started using WebP or AVIF on your own websites?
Saving and Encoding
If you use a CMS, you can probably skip to the next section. But if you’re doing this manually, the first step is having software to save and encode your images in these formats. If you are used to using a tool like Photoshop, there are plugins you can download to save your images as WebP or AVIF files. There are also online and desktop applications, such as Squoosh and GIMP, which can convert your images to either format.
For best results, start with the best quality version of your images before converting (instead of starting with a highly compressed JPG, for example). Once you have your images saved, you can add them to your websites. But where to begin?
First consider browser support. If you use WebP, you can be fairly certain that it will be supported by all modern browsers. AVIF format support isn't as wide. In those cases, you can serve AVIF images with a fallback of JPG, using the <picture> element to include multiple versions and formats of your chosen image.
For Drupal and other CMS
Most content management systems such as Drupal have software to handle media. This means that as a site editor, you upload an image once to the system, and then can place and reuse that image across multiple pages. A CMS like Drupal can be configured to process, crop and resize images automatically, depending on where the image is to appear on the site, or on what device and screen.
As of Drupal 9.2, WebP is supported natively, meaning that your Drupal developers can configure images to be automatically resized and rendered as a PNG, JPG or WebP image! WordPress has added similar support to core.
For browsers lacking in WebP support, the WebP module can be used to generate both WebP versions of all your images, and a fallback image format where needed (such as JPG). Used together, there’s little reason not to try using WebP on your site today.
AVIF support in Drupal is still a work in progress, but there are some smart minds working on it. We can hope to see increased support as time goes on (perhaps in Drupal 10?).
Given the wide browser support for the WebP, together with its capacity to greatly reduce image file sizes, now is a great time to start using it. Give it a try on your website and see what kind of performance improvements you can gain, especially on areas where you are serving up large images or large collections of images on a page.
At Electric Citizen, we’ve begun using WebP as the default image format on all our client websites.
But keep an eye on AVIF. Given that it’s open source, and that it promises the best results in terms of file size and image quality, it could soon replace WebP as the format of choice
Join the Discussion +