JPEG, WEBP & AVIF: EVERYTHING YOU NEED TO KNOW ABOUT IMAGE FORMATS
Why and how to use new image formats to speed up your website
JPEG AND PNG ARE STILL THE DOMINANT FORMATS
Since the invention of AVIF, in 2019, and WebP, in 2010, the available image formats for showcasing your website’s images have greatly improved. The quality to size ratio of these formats is shockingly superior to JPEG. Still, most websites have not adopted the formats which make your websites load faster and look sharper.
While JPEG and PNG are still the most dominant image formats on websites, the future depends on more optimized formats that will maintain visual quality in smaller file sizes. Google has decided not to use JPEG-XL for Chromium-based browsers which hold over 77% of the market share. So barring some unseen change, the future of the internet’s media will definitely be a fight between AVIF and WEBP.
Currently, the internet’s images are 76.6% JPEG, while only 6.3% use WebP. PNG, which is a great original source image format, is still used by 82% of websites, usually as heavily-compressed source images. JPEGs are generally used for photographs and PNGs, like SVGs, which are used by 53.7% of websites are more often used for graphics. JPEGs cannot have transparent backgrounds, which is a must for most UX design.
Beyond not being able to do everything an image needs for web design, JPEG is a 30 year old image format, ideal for lossy image compression. It was developed specifically as a compression tool for websites in the pre-broadband to be able to use images. Anyone over 30 remembers how long it took for these blurry JPEGs to load. Today the issue of loading is not so extreme. We’re not sitting for minutes waiting for a photograph to load, but as websites incorporate heavier media (high-quality images and videos), loading speed is still a huge concern for websites, especially on mobile devices.
Slow-loading websites have an inherent disadvantage in their industries. The problem with the JPEG format is that the same quality (visually lossless) WEBP or AVIF file is up to 50% smaller, and can in some cases, be compressed beyond that and still look visually appealing.
WEBP VS AVIF: WHICH IMAGE FORMAT HAS BETTER QUALITY?
So let’s explore the relative advantages of WEBP and AVIF. If file size is of no importance to you, JPEG and PNG have much higher maximum resolution. In certain cases, such as medical imaging, there may still be a place for these formats. And as of now PNG is the perfect format for original source images and photographs, before the images are optimized for websites. However, ultra-high resolution images will make any website too slow to function properly, which is why nearly every website uses some form of compression.
While every image is different, some argue lossless compression is about 30% better on AVIF than WebP. Check out this tool where you can compare the lossless compression values of the different formats for a variety of different images. AVIF does considerably better in many cases. The issue is that not all files are alike and sometimes AVIFs which are designed specifically to highlight key points of interest will lose quality around the edges where there are less details. For smaller websites, the rule of thumb is to manually use a compression tool like Google Squoosh, which will allow you to losslessly compare image formats and even compress these photos where it’s necessary to do so.
If you’re a larger website with over 50,000 monthly visitors, you need a solution that will do the work for you at scale.
SPEEDSIZE HANDLES EVERY FORMAT
So how do you optimize images at scale? The answer is Speedsize™
While the merits of AVIF are hard to ignore, some browsers don’t support the format or require an extension to make it visible. SpeedSize is a new technology that uses AI to deliver images and videos in the optimal format, while reducing the file size to previously impossible levels. It does this with Neuroscience Media Optimization, a process similar to rendering that removes all the bits of information in a media file the human brain simply doesn’t process on a screen.
But back to formats. SpeedSize delivers AVIFs instead of the older files in most instances. But sometimes we will deliver older formats like PNG or WEBP, because we don’t blindly deliver AVIFs to all the Chromium browsers and devices, and we ensure every visitor can see every image presented to them in the smallest file size without sacrificing perceptible resolution. Our code actually fights for every kilobyte, and in some cases, other older formats will perform better than AVIF by up to 20%.
That is why SpeedSize has elected to use automated code to make very smart format decisions for our customers. Our platform will deliver the best original quality, in the most advanced formats available, in the best size to quality ratio. The result is smaller, properly resized images for every device and browser, without any visible quality reduction.
Our Psychovisual Compression Index will test the recreated image against the original, to ensure that the recreated image is perceptibly identical to the original, in the optimal resolution for each unique browser and device.
In many cases this means ~99% smaller file size, which can make your website load up to 10x faster. While we recommend using the highest quality original source images and videos–yes we can do the same media optimization for videos–, just by integrating with SpeedSize the weight of a website’s media will be cut to unprecedented levels, to automatically improve site speed and keyword rankings, as Google prefers faster websites. They also get more conversions.
To learn more and see how SpeedSize™ can AI-optimize your media, book a personalized demo here, where we will analyze your site and show you live examples of how much sharper and faster your site can be.
