A WebP image is a new modern next-gen format that provides exceeding image compressions. The most significant advantage of utilizing WebP images is better site speed, as these images will load & render a lot faster.
For comparison, lossless WebP images can be 26% smaller in size than the same image in PNG format, whereas, WebP lossy ones can be 25-34% smaller than the equivalent JPEG image. (Source: Google Developers).
Any website that heavily relies on images be it e-commerce, B2B, or a personal blog, leveraging WebP images can quickly result in substantial performance improvements. We’re talking about at least a double-digit reduction in size per image. In fact, all websites should aim to serve WebP or similar formats, if they can.
Checking if a Site Is Truly Serving WebP Images
The news of WebP images isn’t as groundbreaking today as it was when it came out. Translated, many CDN services, hosting services, plugins, what have you, have started to offer to convert your regular images into WebP images and serve those on the web.
While that’s fantastic news and a noteworthy step towards adopting better technologies, how do you truly know if your site, or any site, is actually transferring WebP images on the web and not the traditional formats?
Instructions on Verifying Whether a Website Is Furnishing WebP Images and Not Everyday Formats Like PNG or JPEG
Trusting a vendor or a provider on granting WebP image services is one thing, and knowing if it’s really working is another. Anyone wanting to embrace newer technologies should have a mindset of experimenting, but at the same time, should also think about verifying things.
Knowing if your site is correctly spitting out WebP images is not about not trusting the infrastructure in place, but it’s more about diagnosing issues that may be preventing so.
In any event, one of the easiest ways to spot-check if a site is giving out WebP images is to use developer tools. For contexts and references, this post will show visuals captured from the Brave browser — which closely resembles the chrome browser if not mistaken. Regardless, the message of using your developer tools/inspect element feature is more critical than which browser you’re using.
Step by Step Guide on Confirming if a Site Is Serving WebP Images
Step 1: Open Developer Tools and Head Over to the Network Tab
On any webpage from your browser, bring up your developer tools and then proceed to the “Network” tab or similar (depending on which browser you’re using).
On Windows devices, often, this can be achieved with a shortcut of CTRL + SHIFT + I or right-click > Inspect.
Step 2: Keep the Network Tab Open and Go to the Page You Want
Leaving the network tab open & visible, and then from that same window, go to the page you want. If it’s the current page you wish to check, simply refresh it.
Doing so will start populating all of that web page’s data and its associated elements & resources, such as scripts, CSS, images, etc. These can be individually viewed under the “Name” column of the Network Tab.
Step 3: Filter to Images From the Network Tab’s Resources and Look for the “Type” Value
As we can see, the Network Tab spits out everything — which is undoubtedly a tremendous advantage for diagnosing issues or verifying implementations. However, for the purposes of this post, we need to filter down the resources to just the images. (You can, of course, find them in the original default list too).
In any case, to limit the results of the Network tab to just images, click on “Img” as demonstrated in the screenshot below.
Afterward, divert your attention back to the values inside the “Name” field. When you do, the only items you should see are images. You may or may not need to scroll down to load more images in the Name view.
When ready, compare the corresponding Type column value for the applicable image. (It’s all on the same line). If you see “webp,” that’s proof that — that specific image is served in a WebP format — given the current circumstances related to caching, cookies, etc. Check out the visual below for reference.
You can further verify the same by clicking on an image, looking at its Response Header, and confirming that for its content-type value, the answer is: “image/webp.”
You May Also Want to Check Out:
- What Is DOM and How To “Avoid an Excessive DOM Size”
- Preconnect to Required Origins: What Is rel=”preconnect”
- What Is x-content-type-options: nosniff Response Header?
- About Automatic Signed Exchanges (SXGs) and LCP Load Times
- What Is an Early Hints 103 Status HTTP Code, and How It Helps Load Times
- What Is the strict-origin-when-cross-origin Referrer Policy?
- Link Rel Preload and Site Speed: A Preliminary Guide
- A Prefatory Guide to dns-prefetch
- A Basic Introduction to HTML5 Semantic Elements
- Basic Differences Between a CSS ID and a CSS Class
Other Online Resources & Tools
What’s described in this post is a simple way of concluding whether your images are indeed dispersed in a WebP format on the internet. However, it is not a sustainable method to bulk check all of your images — especially if you have a large site with URLs ranging in thousands and millions.
For such a type of requirement, you’d need to potentially rely on some online site, perhaps a crawling tool, or some Dev, Network, and or a Database level of help to create a flag or an equivalently similar output for every time the system recognizes it propagated a WebP image in the browser.