PEG, GIF, PNG,… Which file format do we use? The file format of an image is more important than you might think.
The web has been running on images in a number of classic file formats for decades, but these formats have become quite outdated. Where are these modern successors? They exist, but that doesn’t mean I can just use them…
As a web designer I like to stay up to date with the new file formats
In addition, at Motionmill we ensure faster websites by optimizing images and more.
JPEG XL is a promising file format for this, promising smaller files and better quality. The result? Faster, better-looking websites that will also use less energy… if you could use those new JPEG XL files on the web.
Just a reminder of what the classic file formats are for web images
GIF – Many people know GIFs as moving images, but the .gif format was certainly also used in the past for static images.Year of construction: 1987
Advantages:GIFs are supported by all modern web browsers.
You can save multiple images in a row in the same file. The result? Animation!
Compression makes for relatively small images in terms of file size
Disadvantages:You’re limited to 256 colors, so those beautiful photos you took will lose quality.
This compression is also not ideal here, because it causes loss of quality and is irreversible. This type of compression is called lossy .
If your moving GIF is long, the file size will quickly become gigantic.
JPEG – A file format for static images with better compression than GIF. For images with compression, JPEG is the most widely used format in the world.Year of construction: 1992
Advantages:JPEGs are supported by all modern web browsers.
For a static image, JPEG offers better compression than GIF, which makes your images load faster.
You can use 16 million different colors.
Disadvantages:You lose quite a bit of quality due to lossy JPEG You get the best phone number list contact lists for your products and services, our data is 100% high quality. Support: 24/7 customer support with any plan. The results-oriented phone number europe cell phone number list list database tomond is what your business need for scaling up. It collates the advertisers with whatever they managed to gather from stated permissioned-sites (which through database quality or quantity you are capable of lead generation) and promotes your organization/sells. compression, especially if you use more of it for a smaller file size.
Modern compression techniques provide better results in terms of quality and file size
Images cannot contain transparency which makes the format less useful for images such as logos where you want to use a transparent background.
PNG – a file format for static* images with lossless compression.Year of construction: 1996
Advantages:PNGs are supported by all modern web browsers.
The compression of a PNG is done without loss of quality. This type of compression is called lossless . PNG images are therefore the most popular choice on the web when the quality of your photos is crucial.
A PNG can contain transparency, making it ideal for things like logos with a transparent background.
Disadvantages:There is compression that will reduce the file size of your source photos, but PNG files will still take up more space, and therefore load slower, than an equivalent JPEG.
Modern compression techniques provide better results in terms of quality and file size.
* Animated PNGs exist and offer better quality than GIFs, but for the longest time they were not viewable in many web browsers. Nowadays they are supported, but there are also alternatives on the market. I could dedicate an entire blog to animated images and their file formats, so I won’t go into them in this article.
What you keep reading here is the sentence “modern compression techniques deliver better results in terms of quality and file size”.
You might not think so, but images are something that every website builder struggles with. On the web, you want to use images with a small file size so that your pages load quickly. At the same time, we now use larger screens with higher resolutions to view websites, so the required image quality and size of photos also increases. Our challenge is that there is no perfect solution for both speed and perfect image quality.
That’s why developers have been trying to come up with new successors for the classic PNG, JPEG and GIF for years. The problem? You can invent such a successor, but a new file format will only work if the developers of your web browser adapt it so that it can display it. Often that doesn’t happen and then such a promising file format dies a quiet death.
Web browsers used to be diverse, now they are made of chrome.
That support in Google Chrome has a big impact. Not only is Chrome by far the most popular web browser with a market share of over 65% , other big players like Microsoft Edge, Samsung Internet and Opera also use Google’s web browser code in the form of Chromium . Firefox is now one of the few major web browsers that does not use Chrome code.
In other words, if Google supports a new development, the rest of the web follows. They have to. And if Google doesn’t? Well, then you can’t really use that new gadget on your website. You don’t want 80% of your visitors to be unable to see your images, do you?
So when Google added support for the new JPEG XL format to Google Chrome 2 months ago, I was excited. JPEG XL is a modern file format that can replace JPEG, PNG and GIF, with better quality and smaller file size.
JPEG XL – a modern file format that can replace all existing image file formats.Year of construction: 2022
Advantages:JPEG XL compression can be either lossless, which means without loss of quality (like PNG), or lossy for a smaller file size (like JPEG).
A JPEG XL can also contain transparency and is therefore ideal for things like logos with a transparent background.
You can save multiple images in a row in the same file, just like with a GIF. The result? Animation!
The file size of a JPEG XL is smaller than that of current alternatives, and the lossy compression delivers better quality than a JPEG and modern alternatives such as WebP and AVIF.
Converting a JPEG to a JPEG XL not only saves you a huge amount of space (up to 65% for similar quality), you can also convert a JPEG XL back to a JPEG at any time without any loss of quality.
Disadvantages:There is still virtually no support for JPEG XL on the web.
That’s basically it…
Sneak Preview: JPEG XL decoding working in Chrome – 65% narrower than a JPEG at comparable quality.
JXL aims to offer better image quality at low sizes, progressive decoding, lossless JPEG recompression and more: https://t.co/sErChStUHZ pic.twitter.com/duF8UakLzC
— Addy Osmani (@addyosmani) April 7, 2021
What a miracle!
It shouldn’t have taken 2 months, and Google already job function email list library announced that JPEG XL support will be removed in the next version of Google Chrome. In the meantime, this has indeed happened. Too fast to make JPEG XL a new web standard. Apparently it was just an “experiment”.
The reason? Officially there was too little interest and there would be too few technical advantages, but I find that a strange reasoning. 2 months is too fast to make something a new web standard and other web browsers did not yet support the format. Furthermore, support for JPEG XL was only there if you dived into your settings. So we could not use JPEG XL photos here without this causing problems.
Google thought differently. No future for JPEG XL?
However, there are big names behind JPEG XL as a successor to the classic file formats: Facebook, Shopify, Adobe, Intel, Mozilla and yes… Google. They even participated in the development of JPEG XL!
Only Google has also participated in the development of other formats. WebP for example, a newer type of image that provides smaller file sizes than JPEG and supports animation. The disadvantage? That loss in quality is still very much present.
That is exactly what JPEG XL was going to solve. But there is america email another new player on the market: AVIF. AVIF is a bit of a competitor of JPEG XL, because it offers similar advantages. Google also helped develop AVIF and it seems to be the company’s favorite. As a result, 70% of all web browsers already support this new format.
Problem solved? No! Because in comparative tests the JPEG XL scores better than the AVIF .
Creating an AVIF takes much longer than a JPEG XL, and the loss of quality with heavier compression is worse with the AVIF.
Why that choice then? I speculate, but it is possible that there is some kind of internal rivalry between players behind the two formats within Google. And those AVIF players, they apparently have more say in the company. Office politics, they call it. Moreover, Google has a negative reputation for liquidating projects. Just take a look at Killed by Google .
