{"id":25,"date":"2021-03-29T05:26:07","date_gmt":"2021-03-29T05:26:07","guid":{"rendered":"https:\/\/imagify.io\/documentation\/?p=25"},"modified":"2024-03-07T06:41:32","modified_gmt":"2024-03-07T06:41:32","slug":"how-to-check-if-webp-image-is-displayed-on-your-site","status":"publish","type":"post","link":"https:\/\/imagify.io\/documentation\/how-to-check-if-webp-image-is-displayed-on-your-site\/","title":{"rendered":"How to check if Next-Gen image is displayed on your site"},"content":{"rendered":"<p>Once you create Next-Gen images and decide to display them on your website, it is important to check if they are properly applied.<\/p>\n<h3>Use Picture Tags Method<\/h3>\n<p>When using the picture tags method, it is easy to check by looking at your page source code. Use\u00a0**right click**\u00a0on your mouse and then\u00a0**View Page Source**\u00a0(or similar, depending on browser).<\/p>\n<p>Alternatively, you can use keyboard shortcut for this:<\/p>\n<ul>\n<li>CMD + SHIFT + U (Mac)<\/li>\n<li>Press CTRL + U (Windows)<\/li>\n<\/ul>\n<p>If working properly, you should see your &lt;img&gt; elements replaced with &lt;picture&gt; elements, and the URLs will have &#8220;.webp&#8221; or &#8220;.avif&#8221;(If the &#8220;Create AVIF versions of images&#8221; is enabled) appended to the end.<\/p>\n<h3>Use Rewrite Rules Method<\/h3>\n<p>Checking for Next-Gen images when using this method is a bit trickier because your source code will still show images linked to the original format image (JPG, PNG, or GIF), so you&#8217;ll need to check using your browser&#8217;s developer tools.<\/p>\n<p>Load your website in your browser, then try any of the following to open your developer tools:<\/p>\n<ul>\n<li>Right-click and select **Inspect**\u00a0(or similar, depending on browser)<\/li>\n<li>Press CMD + Option + I\u00a0(Mac)<\/li>\n<li>Press F12\u00a0(Windows)<\/li>\n<\/ul>\n<p>Once your developer tools are open, refresh your page, then click the **Network**\u00a0tab.<\/p>\n<p>You can then filter requests so only images are displayed by clicking the\u00a0**Img** tab.<\/p>\n<p>Look for the **Type** column, and it should be WebP or AVIF if that is the format the image is served in.<\/p>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-366 size-large\" src=\"https:\/\/imagify.io\/documentation\/wp-content\/uploads\/2021\/03\/Screenshot-2021-05-11-at-15.39.50-1024x978.png\" alt=\"\" width=\"1024\" height=\"978\" srcset=\"https:\/\/imagify.io\/documentation\/wp-content\/uploads\/2021\/03\/Screenshot-2021-05-11-at-15.39.50-1024x978.png 1024w, https:\/\/imagify.io\/documentation\/wp-content\/uploads\/2021\/03\/Screenshot-2021-05-11-at-15.39.50-300x287.png 300w, https:\/\/imagify.io\/documentation\/wp-content\/uploads\/2021\/03\/Screenshot-2021-05-11-at-15.39.50-768x734.png 768w, https:\/\/imagify.io\/documentation\/wp-content\/uploads\/2021\/03\/Screenshot-2021-05-11-at-15.39.50.png 1252w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\n<h3>Images are not converted to Next-Gen formats<\/h3>\n<div class=\"message-panel blue\"><i class=\"fa fa-info-circle\"><\/i><span class=\"message-panel__title\">Note<\/span><span class=\"message-panel__message\">Not all images will be delivered as Next-Gen formats in some cases. This depends on many factors. Make sure these images are not external, and there is a Next-Gen version of optimized image in your Media Library.<\/span><\/div>\n<h4>Use Picture Tag Method<\/h4>\n<p>There are a few reasons why Next-Gen formats will not be displayed using picture tags:<\/p>\n<ul>\n<li>background images added via CSS<\/li>\n<li>image is missing a Next-Gen version (check by opening the image in browser and append \u201c.webp\u201d or &#8220;.avif&#8221; to its\u2019 URL)<\/li>\n<li>page element HTML is loaded after Imagify looks for the source code to apply Next-Gen markup<\/li>\n<li>images are external<\/li>\n<\/ul>\n<h4>Use Rewrite Rules Method<\/h4>\n<p>There are a few main reasons for this to fail using rewrite rules:<\/p>\n<ul>\n<li>You are on an NGINX server and didn\u2019t apply custom rules to nginx.conf file manually<\/li>\n<li>Image is missing a Next-Gen version (check by opening the image in browser and append \u201c.webp\u201d or &#8220;.avif&#8221; to its\u2019 URL<\/li>\n<li>Apache module mod_rewrite is not active on the server<\/li>\n<li>Image is external (hosted on a CDN) so it can\u2019t be rewritten<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Once you create Next-Gen images and decide to display them on your website, it is important to check if they are properly applied. Use Picture Tags Method When using the picture tags method, it is easy to check by looking at your page source code. Use\u00a0**right click**\u00a0on your mouse and then\u00a0**View Page Source**\u00a0(or similar, depending [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[22],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-webp","tag-webp"],"_links":{"self":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":22,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":1008,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts\/25\/revisions\/1008"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}