What’s The Best Image Format for Web?
What’s The Best Image Format for Web? Modern Images for a Modern Internet
Now more than ever, the internet is a visual medium. Whilst text matters and content is king, human beings respond most immediately to images. Images featuring people are immediately relatable, graphs and charts render complex information immediately comprehensible and logos will instantly associate your website with your brand. Back in 2015 it was estimated that about 15% of total internet usage was people searching for pictures of cats.
An image really is worth a thousand words.
Sadly, on the internet, images are many thousands of times more costly than words. The word ‘cat‘ can be stored on disk using 3 bytes of data. Whereas …
… this small image of a cat, when saved as a web optimised JPEG file, occupies 24.3Kb of disk space – that’s about 24,300 bytes … more than eight thousand times bigger.
File sizes matter. Every scrap of information required to build your webpage must be transferred from your web server or CDN (Content Delivery Network) to the user’s device at least once. Mobile users may have limited data allowances – in such cases you are literally using their resources to display your site. Large files take longer to download than small files … negatively affecting your users’ experience and potentially affecting your search engine ranking.
Images are typically, by far, the largest assets to be downloaded to create a web page. “What’s The Best Image Format for Web?” is a question it makes more sense than ever to answer correctly.
Why So Big?
To understand why images get so big (and are only getting bigger). It makes sense to understand what goes into one.
By far the most common means of storing images on computers has always been as bitmaps.
A bitmap image, also known as a raster image, is a digital graphic composed of a matrix of pixels, where each pixel represents a tiny individual square of colour – not unlike a single tile in a mosaic. A pixel is normally described as RGB or RGBA – Red, Green, Blue (which describe hue and brightness) and Alpha (which describes transparency). Each of those attributes is recorded as a single byte.
The illusion of a photographic representation requires that each pixel is small. The resolution of a raster image is determined by the number of pixels per inch (PPI) or dots per inch (DPI), and higher resolutions generally result in clearer and more detailed images.
A modern smartphone can display up to 470 PPI. Thus, a single inch-square RGBA image on a mobile phone could occupy as much as 883,600 bytes (4702 x 4) or 88.6Kb on a disk. Modern desktop monitors can display images thousands of pixels wide.
Image file formats optimise storage a great deal but significant disk usage and data transfer will be inevitable.
Popular Bitmap Formats
The bitmap image formats in most common use on the internet are JPEG, PNG, and GIF.
Even though each of these traditional image formats are made roughly the same way, there are differences in the way the files are encoded (the way the data is organised) which makes them suitable for different tasks.
Geek alert. This is going to get technical and use many, many TLA’s.
JPEG
The JPEG format is still, as of early 2023, probably the most widely used image format on the internet. For a long time for many applications it has been the best image format for websites.
JPEG files are best used for photos. By permanently removing some of the image data and cleverly repeating patterns, images can use far less disk space. Just how much data should be lost is chosen by your designer as they save the file.
Although this “lossy” compression means that file sizes can be reduced greatly, the compression can result in significant loss of quality and unwanted elements (‘artefacts’) appearing in the image. These artefacts are particularly visible around hard, high-contrast edges in an image. This means JPEG makes a very poor choice for displaying logos and diagrams.
GIF
The GIF was designed more than 30 years ago, when the internet was slow. Images needed to be a lot smaller to be shared easily over the web. By and large computers then couldn’t show as many colours on screen. As a result, GIF files are themselves far smaller. Each file can only describe 256 colours in total (compared with the 25 million or so that a JPEG can contain).
But GIF files support (some) transparency and limited animation. The way in which they are encoded (run-length encoding or RLE) can result in huge compression when dealing with a diagram or drawn image. As such, despite its age, the GIF format remains useful for displaying logos and some diagrams.
PNG
Relatively new kid on the block, the PNG (Portable Network Graphics) format implements lossless compression of images, making it suitable for storing graphics with sharp details and transparent backgrounds.
PNG supports a full range of colour depths and an alpha channel for transparency. Unlike JPEG, PNG compression does not result in any loss of image quality. PNG files are commonly used for web graphics, logos, icons, and images where maintaining a high level of detail and transparency is crucial.
Additionally, PNG supports interlacing, allowing images to be displayed progressively, providing a better user experience when loading over slower internet connections.
Roll Over Beethoven
Rapidly gaining popularity with developers internet-wide are two newer image formats: WebP and SVG.
WebP
WebP is a modern image format developed by Google. It is designed to provide high-quality compression and faster loading times for web images.
OK: File size – 283Kb
Better: File size – 181Kb
Best: File size – 19Kb
WebP employs both lossy and lossless compression techniques and supports features like transparency and animation. WebP images typically have much smaller file sizes when compared to traditional formats like JPEG and PNG. Despite this compression, the WebP format retains exceptional image quality.
So Why Isn’t Everyone Using WebP?
Although it was released by Google in 2010, adoption of the WebP format has been slow. Both Adobe Photoshop and Apple’s Safari browser have only recently rolled out support for the format.
To guarantee backwards compatibility, you need to offer a fall-back image for older devices to use. Something like this:
<figure>
<!-- WebP image with source type and fallback to JPEG -->
<picture>
<source srcset="example-image.webp" type="image/webp">
<img src="example-image.jpg" alt="Fallback JPEG Image">
</picture>
<figcaption>Caption for the image</figcaption>
</figure>Code language: HTML, XML (xml)This makes the code more complicated. And complicated code:
- is bigger – four tags are needed instead of just one.
- is harder to maintain.
- requires two images to be stored, not just one.
Some developers are just sitting this decision out, waiting for universal support of the format.
But this will not take long.
Google is pushing the WebP format hard. If your statistics in Google Lighthouse® are disappointing, it is likely that, amongst the recommendations, is the instruction to “adopt next-gen(eration) image formats”. This means WebP.
SVG
Finally, something new. If it is in any way acceptable to have a ‘favourite’ image format, this is mine.
Scalable Vector Graphics (SVG) is an XML-based vector image format widely used for describing two-dimensional graphics. It is entirely useless for displaying photographs.
SVG is not a raster image format. SVG files contain instructions that defines shapes, paths, text, and other graphic elements using a coordinate system. Similar to the print-based EPS format, SVG files are entirely resolution-independent. Whether displayed at 50 pixels wide or 50,000, an SVG image will always be pin-sharp and require no more disk space.
SVG graphics can be manipulated with CSS (Cascading Style Sheets) and animated using JavaScript, allowing for dynamic and interactive web content. SVG is the best image format for web when displaying icons, logos, maps and other graphics where scalability, interactivity and accessibility are essential.
The open standard nature of SVG promotes cross-browser compatibility, making it a versatile and widely supported format.
So Why Isn’t Everyone Using SVG?
Well, as stated, it’s unsuited for photographic images. It will never be a one-size fits all solution.
Although widely adopted, support isn’t yet universal – fallbacks are advised.
Finally, SVG files are created and edited using different software. The skills and tools which work with raster images are much more widely available.
So What Is The Best Image Format for Web Use?
Make no mistake, whilst not yet universally supported, WebP and SVG are far superior to their traditional counterparts. You can check the current level of support at any time here and here.
As a developer or a designer, if they are not your first choice when creating a new site, they should be.
Updating older projects will take time, and changing existing images may need to wait until your next major website update. But if you want site speed, happy users and great search engine rankings – your adoption of WebP and SVG should be rapid.