How to check if WebP image is displayed on your site

Once you create WebP images and decide to display them on your website, it is important to check if they are properly applied.

Using “picture tag” method

Using <picture> tags method is easy to check by looking at your page source code. Use right click on your mouse and then View Page Source (or similar, depending on browser).

Alternatively, you can use keyboard shortcut for this:

  • CMD + SHIFT + U on MacOS
  • CTRL + U on Windows

Once in your source code page, simply search for “<picture” and you should see a number of existing opening tags.

In case some (or all) images are not served as WebP, make sure to check if WebP version of these images is generated by Imagify.

NoteUsing this way to display WebP images will not apply changes to images added by CSS (background images).

Using rewrite rules method

Using rewrite rules for displaying WebP images will not affect your website HTML output, hence you will not see changes in the source code.

Easy way to find this out is using Inspect Tool of your browser.

Here is how to do that in Chrome:

Right click -> Inspect (or CMD + option + I on Mac and F12 on Windows)

Choose Network tab (if empty, you need to refresh the page).

You can filter requests to Img, so only images becomes visible in the list.

The second column is Type, and it should be WebP.

Reasons for not delivering WebP

NoteNot all images will be delivered as WebP in some cases. This depends on many factors. Make sure these images are not external, and there is WebP version of optimized image in your Media Library.

Using picture tag method

There are a few reasons why WebP will not be displayed using picture tags:

– background images added via CSS
– image is missing a WebP version (check by opening the image in browser and append “.webp” to its’ URL
– page element HTML is loaded after Imagify looks for the source code to apply WebP markup
– images are external

Using rewrite rules method

There are a few main reasons for this to fail using rewrite rules:

– you are on NGINX and didn’t apply custom rules to nginx.conf file manually
– image is missing a WebP version (check by opening the image in browser and append “.webp” to its’ URL
– mod_rewrite is not active on the server (Apache)
– image is external so it can’t be rewritten

Was this guide helpful? :) Great! Glat we could help! Thank's for your feedback
Great! Glat we could help!

Your feedback has been sent to our team We value every bit of feedback we receive as it helps us to improve our products and services. Thank you for your time.