Nowadays, the use of a WebP image is making headway in the photographic format space. The image format — which is developed by Google — uses both lossy and lossless compression by utilizing technology that Google purchased from On2 Technologies. Before I introduce you to WebP Image, when it comes to image formats on the internet, it’s generally a three-way tie between JPEG, GIF, and PNG.
Deciding which image format to use is relatively straightforward. Whereby, we choose lossy JPEG when saving continuous-tone photographic images, and GIF or lossless PNG when saving images with large blocks of the same or similar colors. On that note, you can see the comparison of GIF/PNG and JPEG if you’re not clear on what the difference is.
But, the choice between GIF and PNG is no contest. PNG is a more modern and vastly improved version of GIF that (almost) completely obsoletes it. You should always choose PNG over GIF, except in the two circumstances below.
Consider the following:
- First, if you want an animated graphic, you need to know that PNG doesn’t support animation, but GIF does.
- Your image is extremely small, on the order of a few hundred bytes. GIF file sizes are smaller in this scenario.
WebP has been around a while now, actually, and it first made headlines in a 2010 Google press conference. But, like any new technology, it had some initial rough patches. Today, WebP is on version 1.0.0. And, as such, we thought it would be a great time to talk about what makes a WebP image so powerful.
As well as why it’s a fantastic option for web designers and developers. But, before we proceed to describe what a WebP image actually is, let us focus on why it matters. Bearing in mind, it’s not only about making images smaller, but it’s also about why and how the images need to be made smaller.
On that note, you may have already heard about design mistakes killing your SEO and conversion rates. While there are some aspects that CSS or JavaScript is responsible for, like blocking rendering, the images nowadays are a huge part of any website’s weight. Therefore, users on slower connections will have trouble interacting with your site.
What Is A WebP Image?
Technically, a WebP Image is an image format that utilizes both lossy and lossless compression formats. Thus, being able to create images that use mixed compression formats lets you create richer images that are smaller in file size than other formats. Essentially, it combines the features of all other image formats (JPEG, PNG, and GIF) together.
More so, in a surprisingly seamless way. WebP offers file sizes that are around 30% smaller than JPEG without a quality gap. It also provides transparency (alpha channel) like PNG. As well as the ability to animate images like the GIF format. Chances are, you’ve seen WebP images before.
Get Started: Free Photography Courses | How To Get Into Photography
As an example, if you open YouTube in Google Chrome, all of those thumbnails are going to be WebP thumbnails. Likewise, if you were to open the Facebook app on your android phone, all of the images that you see would be in a WebP image format too. Today, it’s definitely being utilized by many companies.
Especially, in order to increase the overall site load performance and user experience. The only reason that it hasn’t completely overtaken other image formats is due to compatibility — more on that later. Forthwith, we now know that WebP utilizes both lossy and lossless compression, right? But, what is lossy and lossless compression?
In nutshell, according to Google developers, WebP is a method of lossy and lossless compression. More so, that can be used on a large variety of photographic, translucent, and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality.
What Is Lossy Image Compression?
A lossy image compression creates formats that are approximately the same (data is in the same approximate position) — it reduces the file size post-compression. Usually, lossy compression images are much smaller in size than lossless compression images. But, they suffer a quality loss.
In addition, lossy compression also has the disadvantage of generation loss. Meaning, every time you compress the same image using lossy compression it becomes less and less recognizable.
Image: Smashing Magazine’s “The WebP Manual” by Jeremy Wagner
The image above — quote by Smashing Magazine’s “The WebP Manual”— depicts three JPEG encoders. Whereas, at the lowest end of the quality spectrum, slightly outperform WebP. Please note though that as the quality increases into usable ranges, WebP easily outperforms other encoders.
Resourceful Tool: Canva | No 1 Tool For Logos, Invite, Video & Graphic Design
Wait a minute! What about recompressing from lossy sources? Smashing’s Jeremy Wagner ran several tests. “To figure out the impact of lossy recompression on file size and visual similarity, I recompressed JPEGs in the research image set from the various JPEG encoders (…). I also did the same for lossy WebP images at the same quality setting of 75.”
While the file size was similar for WebP (which was still a tiny bit better), it is clear that WebP can save file size “without degradation in perceptible visual quality”, as Mr. Wagner points out.
What Is Lossless Image Compression?
On the contrary, lossless image compression is the direct opposite of lossy compression. On that note, instead of approximating data positions, lossless compression uses exact matching.
Whilst, placing data points in their specific places. And, as a result, making images that do not lose any quality post-compression but render much larger file sizes. Eventually, lossless compression makes images look much better. However, dealing with large file sizes can bog down your server.
Image: Smashing Magazine’s “The WebP Manual” by Jeremy Wagner
Additionally, dealing with large file sizes can also make websites load slower than usual. And, as you can see on the graph above, a WebP image is quite great. In other words, using WebP versus PNG is a no-brainer.
For this reason, while PNG optimizers do a good job of reducing image sizes, WebP is a whole another category. What’s more important is that there is no risk of sacrificing visual quality to achieve lower file sizes.
What Is A WebP Image Compatibility Like?
Even though WebP was announced in 2010, it isn’t universally compatible as of yet. It’s 100% compatible for anyone that’s using Chrome or Opera (which accounts for around 63% of users.) Currently, neither Firefox nor Safari natively support WebP without plugins. However, this isn’t a big deal.
Oftentimes, because the Safari and Firefox users will just get JPEG versions of your images (which you’re probably already using). Unfortunately, there’s one downside to compatibility when it comes to WebP. And, that’s when it comes to a Content Management System (CMS), realistically.
Keeping in mind, if you use WordPress, Drupal, Joomla, etc. you’re going to have to install an extension that lets you use WebP. Although this is as easy to do as it sounds, it has made the use of WebP image format in content creation forward progress stall more than it should be.
The main pain points of compatibility come through on the web developers’ end. In the end, if you install the extensions on your CMS and actually use WebP, your website will most likely load faster for Chrome and Opera users. As well as any other web browser users that have WebP plugins.
The Main Different Image File Format Types
There are many different types of file formats. A file format can be identified by its extension: .doc, .txt, .html, .gif, .jpeg. The most common logo file formats are AI, EPS, PDF, SVG, PNG, JPG, etc. Image formats are divided into two main categories: raster files and vector files. Each category has its own use. For example, WebP is bitstream-compatible with VP8.
In that case, it uses 14 bits for width and height. Whilst, the maximum pixel dimensions of a WebP image is 16383 x 16383. Consistent with the VP8 bitstream, lossy WebP works exclusively with an 8-bit Y’CbCr 4:2:0 (often called YUV420) image format. Please refer to Section 2, “Format Overview” of RFC 6386, VP8 Data Format and Decoding Guide for more detail.
Vector Graphics Vs Raster Graphics
Vector Graphics use lines, points, and polygons to represent an image. They are best suited for simple geometric shapes and work great for logos and icons. Vectors can be infinitely scaled without losing quality, making them ideal for high-resolution screens and varying sizes. However, vectors are not the best file format to save photos.
They include:
- SVG
- EPS
- AI
Raster Graphics use pixel values within a rectangular grid to represent an image. The majority of online images format is raster. They are best suited for complex images such as photographs. Unlike vectors, these file types are resolution-dependent and based on their size. Meaning, they can’t be scaled up without losing quality and becoming pixelated.
They include:
- JPEG
- PNG
- GIF
- TIFF
- PSD
Generally, images can be saved in one of two primary color modes: CMKY and RGB. Definitely, one mode is always better than the other — it depends on where and how the image is displayed.
CMKY Vs RGB Color Modes
CMYK (Cyan, Magenta, Yellow, and Key/Black) is the color space for print. These colors represent the four inks that will be combined during the printing process. Image files saved in this mode are optimized for print. RGB (Red, Green, and Blue) is the color space ideally used for the web. Lossless WebP works exclusively with the RGBA format.
These colors of light combine to produce other colors. Image files saved in this mode are optimized for the web. You can convert between RGB and CMYK if you need to. Know your color modes to get greater color control over the final images on your website. You can read and learn more about the WebP Lossless Bitstream Specification in more detail.
Why is WebP Image Compatibility important?
Basically, choosing the best image file format for your website is a very big deal nowadays, Simply, because the images on your website play a large part in the visitor’s online experience. For one thing, we’re visual by nature and visually driven. More so, we perceive pictures faster than words.
For this reason, images scanning comes first, before the text fully loads. Just to name a few, elements such as photos, screenshots, and animations are often used to enhance the text content on a web page. Obviously, because visuals are highly informative, emotionally appealing, and subconsciously communicative.
They easily communicate our intent messages, brand voice, products showcase, among other business aesthetics. In short, we all love consuming images! Not surprisingly, only 7.3% of websites don’t use any visual content at all. Websites need good images if they want to inform or persuade their leads.
Resourceful Tool: DesignEvo | Create & Customize Logo Designs For Free
Sites should also be able to easily connect with and sell to their visitors. But, many website owners still don’t know what image file format to choose or how to optimize it. The end result? You accidentally export low-quality graphics. And, as a result, you slow down your overall webpages load speed.
For sure, this is because it’s not the best format available or optimized for the web. Yikes! That’s why your choice of image formats is vital. And, you need to care more! Just like logo file formats, each image type is used for a specific purpose and has its pros and cons.
Understanding the basics will give you confidence in being able to decide what format is best in every situation. All graphics online are image files. These files come in many formats and while you can often convert the initial file format into a different type, doing so is not always good.
One thing is for sure, they render the same images in different ways and have different file sizes. Each file is intended for a specific use and matters when it comes to appearance, performance, and scalability.
Consider the following:
Appearance: Some image formats include more detail and are of higher quality than others.
Performance: Some image files take up more space than others which will affect your site load time.
Scalability: Some image formats can be scaled (made larger or smaller) without losing quality while others can’t.
Particularly scalability, it can affect appearance on different screen sizes. The files on your website should result in small file size, fast-loading image (performance) without a loss of quality (appearance/scalability). Perse, WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000.
In the end, you’ll get great results without any loss of image quality (see Comparative Study). The WebP format essentially aims at creating smaller, better-looking images that can help make the web faster. That said, to get even better results, there’re some web tools to consider.
The Best Fast Images Load & Site Compatibility Tools
As mentioned above, the WebP image format is a development of Google as far as back 2010. Specifically, to provide better lossless and lossy compression for web images. Next-gen image formats like JPEG 2000 and WebP have better web compression than PNG or JPEG. The new WebP image format is natively supported in various web browsers.
Including Google Chrome, Opera, and many other applications and libraries (learn more). Switching from JPEG and PNG to WebP can help save server space because the image compression keeps the sharpness of the original image AND greatly reduces the size of the file. That means less data consumption and faster downloads.
On that note, according to Piio, WebP reduces file size by almost 35%. That’s in comparison to JPEG and 50 % to PNG. Unfortunately, WebP format is not always readily compatible with most CMS platforms. And often, asking for the need to use a plugin extension or workaround tools to upload these files. That’s why we have yet to optimize our site images.
The WEBP Image Pros:
- Smaller file size for the same image quality
- Uses both lossy and lossless compression
- Supports transparency
The WEBP Image Cons:
- First, it’s not supported by all web browsers, specifically Safari and Internet Explorer
- Not supported by all CMS platforms such as Squarespace
Luckily, the WebP team has provided an extensive API to allow developers to add support to their web-based applications. Including browsers, image editing tools as well as native applications.
With that in mind, you can consult the API documentation for a description of libwebp the application programming interface. When it comes to choosing the right image file format for your website, understanding the different file types and their intended use can help you improve your image quality and performance.
Notwithstanding, picking the correct file format is only the first part. After getting the file format right, be sure to optimize your images with the correct pixel dimension, optimal file size, SEO keywords (search engine optimization), and alt text for accessibility. Or rather, consider using these web tools:
#1: Use PNG to WEBP Image Free Online Converter – Convertio
In 2014, the Convertio team decided to create the first file conversion website with user experience in mind. Today Convertio is ranked among the 1000 most visited sites in the world and almost every competitor has already borrowed something from our interface. With Convertio you can convert the file you want in real-time.
For instance, PNG to WEBP Image (Online & Free). All thanks to its multiple functions that allow you to supply files from the unit, dropbox, etc. Or even from the file manager, and even URL. Whilst, providing greater efficiency and performance.
Similar Tools:
Overall, Convertio is an excellent tool to take advantage of. Considering that other programs only allow you to edit files exported from your storage. Moreover, this makes the whole process more complex because you have to download the file before converting it. By the same token, you can also try FreeConvert.com or even ConvertSimple.com as well.
Looking to download the Convertio logo? Or rather, artwork files for print (.EPS), broadcast, and web (.SVG and . PNG) too? Well, from here, you can download them all. Convertio is a quick solution to converting files to different formats. More so, when it may not be immediately apparent how you should go about the task.
#2: Utilize WordPress WebP Image Plugin – WebP Express
More than 9 out of 10 users are using a browser that is able to display webp images. Yet, on most websites, they are served jpeg images, which are typically double the size of webp images for a given quality. What a waste of bandwidth! For this reason, the WebP Express Plugin was created to help remedy that situation (download direct installation files).
With little effort, WordPress admins can have their site serving autogenerated WebP images to browsers that support it. While still serving JPEG and PNG files to browsers that do not support WebP as well. You can follow the video tutorial guide below to learn how to set up & configure WebP Express in detail.
Realistically, the WebP Express Plugin creates redirection rules for images, such that a request for a JPEG will result in a WebP. But, it only works if the request comes from a webp-enabled browser.
Uniquely, if a WebP image already exists, it is served immediately. Otherwise, it is converted and then served. What’s more, WebP Express uses the WebP Convert Library to convert images to webp. WebP Convert is able to convert images using multiple methods. There are the “local” conversion methods: imagick, cwebp, vips, gd.
If none of these works on your host, there are the cloud alternatives: ewww (paid) or connecting to a WordPress site where you got WebP Express installed and you enabled the “web service” functionality.
#3: Use CWebP To Convert Images To The WebP Format
Google provides the libwebp codec distribution as a reference implementation for the encoder and decoder applications, cwebp and dwebp respectively. Particularly, to showcase the available functionalities of WebP. These files can be downloaded from the downloads repository or can be built from the source.
They reside in the examples/ directory. The libwebp codec includes an extensive encoder and decoder API. Please consult the appropriate documentation if you’d like to add support for WebP to your application or browser.
To enumerate, you can use cwebp on the command line to convert PNG or JPEG image files to WebP format. You can convert a PNG image file to a WebP image with a quality range of 80 with the command:
dwebp image.webp -o image.png
Likewise, you can consult the dwebp documentation for a description of the decoder and its command-line options.
#4: Use A Web Browser That Natively Supports WebP
Around 95% of Internet users already use a browser that supports WebP. Not to mention, WordPress 5.8+ versions also support WebP out of the box now. So there’s no reason you shouldn’t use it.
We deeply believe in the importance of the open-source model. With WebP in open source, anyone can work with the format and suggest improvements. Also, with your input and suggestions, we believe that WebP will become even more useful as a graphic format over time. That’s why we’ll need to use web browsers that natively support WebP.
Webmasters interested in improving site performance can easily create optimized WebP alternatives for their current images. And then, serve them on a targeted basis to browsers that support WebP such as the following:
WebP Lossy Supports:
- Google Chrome (desktop) 17+
- Google Chrome for Android version 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 11.10+
- Native web browser, Android 4.0+ (ICS)
WebP Lossless & Alpha Supports:
- Google Chrome (desktop) 23+
- Google Chrome for Android version 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 12.10+
- Native web browser, Android 4.2+ (JB-MR1)
- Pale Moon 26+
WebP Animation Supports:
- Google Chrome (desktop and Android) 32+
- Microsoft Edge 18+
- Firefox 65+
- Opera 19+
You’ll want to serve WebP images only to clients that can display them properly, and fall back to legacy formats for clients that can’t. Fortunately, there are several techniques for detecting WebP support, both on the client-side and server-side. Some CDN providers offer WebP support detection as part of their service that includes the following:
- Modernizr
- Implementing content negotiation based on HTTP headers
- Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
As for Modernizr, it’s a JavaScript library for conveniently detecting HTML5 and CSS3 feature support in web browsers.
Properties to look for:
- Modernizr.webp,
- Modernizr.webp.lossless,
- Modernizr.webp.alpha,
- Modernizr.webp.animation, etc.
What about server-side content negotiation via accept headers? Well, it’s very common for web clients to send an “Accept” request header, indicating which content formats they are willing to accept in response.
If a browser indicates in advance that it will “accept” the image/webp format, the webserver knows it can safely send WebP images, greatly simplifying content negotiation. Last but not least, HTML5 supports a <picture> element, which allows you to list multiple, alternative image targets in priority order.
In particular, such that a client will request the first candidate image that it can display properly. See this discussion on HTML5 Rocks. The <picture> element is supported by more browsers all the time.
For more information, learn more about:
Another detection method yet is to attempt to decode a very small WebP image that uses a particular feature and then check for success. But, note that image-loading is non-blocking and asynchronous. This means that any code that depends on WebP support should preferably be put in the callback function.
#5: Convert Your Personal Images Files To WebP Before Using Them
Currently, you can view WebP files by converting them into a common format that uses lossless compression, such as PNG. And then, view the PNG files in any browser or image viewer. To get a quick idea of WebP quality, you can see sample Gallery for side-by-side photo comparisons. Wait a minute! You may ask; how do you get the source code?
Well, the converter code is available on the downloads section of the WebP open-source project page. The code for the lightweight decoder and the VP8 specification is on the WebM site. You can as well see the RIFF Container page for the container specification resource references.
In the same fashion, you can use the WebP command-line utility to convert your personal image files to WebP format. For more information, learn more about Using WebP in more detail. If you have many images to convert you can use your platform’s shell to simplify the operation. For example, to convert all JPEG files in a folder try the following:
Windows:
> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )
Linux / macOS:
$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done
As of today, Safari supports WebP images only partially. Internet Explorer also lacks WebP support (but Edge supports WebP as it’s based on Chromium). However, IE usage has shrunk to less than 1% of total internet users. That’s a boon for everyone on the web! In total, around 95% of Internet users use a browser that supports WebP.
So while it certainly has majority support, that 5% is a minor hurdle, especially when it’s Safari users on older macOS versions. In this WordPress WebP Tutorial, you’ll learn more about how to handle this in detail.
Takeaway,
On one side, WebP is an absolutely amazing image format for all site owners, website content designers, webmasters, etc. Therefore, it would be a mistake not to utilize the WebP image power. In terms of Technical SEO, they greatly influence web-based elements such as loading, interactivity, and visual stability.
In reality, a WebP image has a very impressive quality-to-size ratio on your website. Equally important, it will make your site load faster and look better. So, if you aren’t already using WebP, try it. We’re willing to bet that you will see a performance jump. On the other side, there are Google Core Web Vitals.
And, they too highly influence the use of a WebP image in your web content design. Core Web Vitals are a set of specific factors that Google considers important in a webpage’s overall user experience. Overall, Core Web Vitals are the subset of Web Vitals that apply to all web pages.
Not to mention, they should be measured by all site owners and will be surfaced across all Google tools. Basically, the Core Web Vitals are the new user experience metrics from Google. These elements are made up of three metrics that webmasters and SEOs will have to keep in mind in the future.
Learn More: Core Web Vitals | 9 Key Tools For Overall Site Performance
By all means, succeeding in organic search today requires a good content SEO audit for your website including images. For instance, optimizing for a combination of factors that search engines consider important – technical, on-page, and off-page. That’s why over the years, we’ve seen increased focus toward off-page techniques – such as link building
And, as such, this is where Core Web Vitals comes in handy. Core Web Vitals are all about improving user experience. And, one way to stay ahead is by using WebP images. Finally, it’s our hope that you’ll find the above guideline useful. But, if you’ll need more support, you can always Consult Us and let us know how we can help or sort you out.
Furthermore, you can also share your additional suggestions, contributions, or questions in our comments section. All in all, as you plan to share this guide with others, it’s our intent for all our site visitors to have a great experience.
