Among image formats, WebP is gaining ground this year. Using the technology that Google acquired from On2 Technologies, Google developed and released its own lossy and lossless image format.
Google made headlines in 2010 with its WebP press conference, which has been around for a while now. But the technology had some initial difficulties, as any new technology does. As WebP is at version 1.0.0 today, we thought it would be great to talk about what makes WebP so powerful, and why it’s such a great option for web designers and developers. The purpose of WebP is not just to make images smaller, but also to explain why and how they must be made smaller before we move on to describe what WebP is.
Your conversion rates and SEO could suffer from design mistakes. While CSS or JavaScript is in charge of some parts of a website, like blocking rendering, images now make up the majority of it. As a result, users on slower connections will have trouble navigating your website (unless it is an AMP).
Recently, we posted an article regarding website optimization. This is an interesting area of expertise, as you are responsible for many small tasks to produce a very large product, a website that looks amazing on any device and runs fast.
WHAT IS WEBP?
WebP is an image format that utilizes both lossy and lossless compression formats. Combining compression formats allows you to create rich images with smaller file sizes than other formats.
WebP combines all of the benefits of JPEG, PNG, and GIF into a single file format in a surprisingly seamless manner. A WebP file size is approximately 30% smaller than a JPEG one, without a quality difference. Also like PNG, it provides transparency for images (alpha channel) and can animate like GIF.
You may have seen WebP images before. When you open YouTube in Google Chrome, all of the thumbnails will be WebP thumbnails. All of the images you see in the Facebook app for Android are WebPs. Numerous companies worldwide are taking advantage of this technology in order to improve performance. Because of compatibility, it hasn’t completely overtaken other image formats.
Now that we know WebP uses both lossy and lossless compression, what are lossy and lossless compression?
WHAT IS LOSSY COMPRESSION?
In lossy compression, the data is stored in approximately the same positions, which reduces the file size after compression.
In other words, lossy compression images are usually smaller in size than lossless compression images, but they suffer a quality loss. Another disadvantage of lossy compression is generation loss. Using lossy compression, the image becomes less and less recognizable each time it is compressed.
But what about recompressing from lossy sources? Shashing’s Jeremy Wagner has performed several tests on this. „To investigate whether lossy recompression reduces file size and visual similarity, I recompressed JPEGs from the research image set using several JPEG encoders. The same procedure was also applied to lossy WebP images at quality 75.
”
Although WebP had a similar file size (which is still a tiny bit better), it is clear that WebP can reduce file size “without degradation in perceptible visual quality”, as Mr. Wagner notes.
WHAT IS LOSSLESS COMPRESSION?
It is the exact opposite of lossy compression. In lossless compression, data points are placed in their specific places using exact matching instead of approximations. The result is images that do not lose anything in quality after compression but result in much larger file sizes.
Although lossless compression enhances the look of images, it can slow your server or cause your website to load slower.
WebP is clearly better than PNG. While PNG optimizers do a good job at reducing file sizes, WebP is in a whole separate category. It’s more important not to sacrifice visual quality in order to achieve smaller file sizes.
WHAT ABOUT COMPATIBILITY?
The WebP format has not yet been universally compatible, despite being announced in 2010. Anyone using Chrome (which accounts for 63% of users) or Opera (which accounts for 73% of users).
However, Firefox or Safari do not currently support WebP natively without plugins.
There’s generally nothing to worry about here since Safari and Firefox will just show JPEGs (which you’re probably already using anyway).
Content management systems (CMS) are the biggest obstacle to WebP compatibility. You’ll need an extension to use WebP with Drupal, Joomla, etc.
But there’s good news for WordPress users because WordPress now officially support WebP images to be directly uploaded to the CMS.
If you’ve images of different formats such as JPG or PNG, you can either use a plugin to convert them into WebP automatically for you. But if you’re concerned about using less plugins, you can do the same process manually using a bulk WebP converter to convert other format images into WebP within few clicks.
WebP’s forward progress has been stalled by this, even though it is an easy task to undertake.
Web developers experience the biggest challenges when it comes to compatibility. You will most likely see a faster loading website for Chrome and Opera users if you install the extensions on your CMS and actually use WebP.
WEBP VS. PNG
Having learned what WebP is in a nutshell, let’s compare WebP to the other popular image formats currently available.
Besides WebP, PNG may be the most valuable image format on the market today.
Transparency is a crucial feature for web design in PNG format. The transparency technique allows you to arrange images in a way that does not conflict with one another while keeping a consistent design throughout your website.
Additionally, WebP is transparent, which makes it a standout for web designers who need the freedom provided by transparency.
The major advantages of WebP over PNG are as follows.
- While still maintaining transparency and quality, WebP offers 26% smaller file sizes than PNG.
- A WebP image loads faster (due to its smaller file size) than a PNG image.
The last point is crucial. In WebP, the image with the smallest file size will be loaded first. As a result, your PNG image would load instead of the WebP image if the PNG file was smaller in size than the WebP file (unlikely). It is more likely that Safari users would load PNG images, while Chrome users would load WebP images. If you take advantage of WebP, your website would load faster for Chrome and Opera users than for Safari and Firefox users.
WEBP VS. JPEG
There is no contest between WebP and JPEG.
At the exact same SSIM quality index, WebP files have a 25 – 35% smaller file size, which means that WebP is smaller without sacrificing quality.
We won’t go into more detail here. When it comes to image formats, WebP is a better option in general than JPEG. The only problem with WebP is that not all browsers can load it, so some will instead load that JPEG file.
WEBP VS. GIF
WebP is the only case in which it may not be ideal to use this type of file.
It’s no doubt that WebP is better than GIF. WebP provides the same quality at smaller file size. As a result, the best way to compress animated GIFs isn’t lossy compression.
In terms of quality and file size, formats like APNG can compete against WebP and GIF due to their reliance on lossless formats.
Although WebP still beats GIF in the animated image category, APNG has a significant edge.
Conclusions
A website designer would be completely remiss if he or she failed to utilize WebP’s impressive quality-to-size ratio. The result will be a faster-loading site with a better appearance. Therefore, if you haven’t tried WebP yet, you should. We believe your performance will improve.
