How to Exclude Featured Image from .Webp Format

Thanks for the update Carbel. While I’m awaiting a check on the filter which would likely solve the issue you’re having with Rank Math have you also tried defining the OG:Image individually, with your Rank Math settings for that particular post? This worked for me, with Rank Math

After doing so you can use the Facebook share debugging tool. This might be a workaround until I have an update on the filter for featured images. This worked for me when checking just now (Recording). I added a new post, with no images (featured or within the body). I then defined a webp image as my OG:Image within Rank Math. When using the Facebook sharing debugger Rank Math used the original version of that image, the jpg version.

Regardless of the above work around I will be sure to pass on an update on the filter as soon as I have one. Thank you!

Many thanks for your patience on this @cnemnom! From discussing your case with the team I think I know what may be causing the issue of the filter not working.

Can you visit your WordPress media settings (Settings > Media) and ensure you have the “Generate JPEG files in addition to WebP” configuration enabled? This is not enabled by defaulted. Once you have this enabled, please create a new test post and upload a new featured image, not an existing image. The featured image should then use the jpg version.

Note that you will also need to have the below filter active, in a custom functions plugin or a child themes functions.php:

remove_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10 );

Let me know how you get on after performing this check, or ask if you have any questions.

Thank you @jamesosborne, much appreciated!

Finally, the issue is resolved now for my Featured Images.
This new option was added recently to Performance Lab version 1.6.0.

Generate JPEG files in addition to WebP
Enabling JPEG in addition to WebP can improve compatibility, but will effectively double the filesystem storage use of your images.

I have follow-up two questions, please:

With this option enabled, now all my images will be created twice (JPEG + WebP), thus as noted in the settings, it will take double storage.???

I need to keep using WebP only for my Content within the article/post except for the Featured Image.

My next question is, why do I still need to keep the filter active in my functions.php?
What does this filter do actually?

I tried without the filter and it works also, but the difference is, my Front End Featured Image remains webp, but my Feature Image is JPEG, thus RankMath used the current OG:Image from the Media library for that particular post.

Check this post: https://charbelnemnom.com/setup-a-cloud-environment-in-google-cloud/
The OG:Image is set correctly now in JPEG after I deleted and uploaded a new Featured Image.

<meta property="og:image" content="https://charbelnemnom.com/wp-content/uploads/2022/11/Setup_Configure_Cloud_Environment_In_Google_Cloud_12.jpg" />

but the Front End is seeing it as WebP as you can see in the screenshot below. This option is without the Filter that you shared, if I set the filter, then the OG:Image, as well as the Front End Featured Image will be in JPEG.

Could you please advise?

Many Thanks!

• This reply was modified 2 years ago by Charbel Nemnom.

Hi @cnemnom,

Thanks for the update. To answer your latest queries see below:

With this option enabled, now all my images will be created twice (JPEG + WebP), thus as noted in the settings, it will take double storage.???

Yes, it will store both the webp and the jpg version of your images.

My next question is, why do I still need to keep the filter active in my functions.php?
What does this filter do actually?

The filter will ensure that the original image you upload, likely a jpg, will be used for your featured image.

but the Front End is seeing it as WebP as you can see in the screenshot below. This option is without the Filter that you shared, if I set the filter, then the OG:Image, as well as the Front End Featured Image will be in JPEG.

This is normal. Your webp will be used without the filter. If using the filter and uploading a new featured image the jpg will be used for your featured image.

Thank you @jamesosborne,

Ok, we solved the issue but we created another one by storing both the webp and the jpg versions of my images.

I remember that we did not have this issue with Performance Lab version 1.5.0.

We need to create/use webp for the images inside the article (the content) except for the Featured Image.

I am getting confused here. Do I still need to use the filter? Because as I mentioned, without the filter, the jpg that I upload to my Featured Image, it’s used correctly as my Featured Image, and my Front End is WebP and not JPEG. So, I don’t think that I need the filter here.

I am concerned with point 1 of having to store both the webp and the jpg versions of all my images (Featured Images, as well as my Content images for all articles moving forward).

Could you please clarify?

Many Thanks!

Hi Charbel,

I am getting confused here. Do I still need to use the filter? Because as I mentioned, without the filter, the jpg that I upload to my Featured Image, it’s used correctly as my Featured Image, and my Front End is WebP and not JPEG. So, I don’t think that I need the filter here.

I can understand the confusion. If you’ve enabled both jpg and webp uploads, without using the filter, your image may use srcset values, with an example below:
<img width="1568" height="2091" src="https://mysite.com/wp-content/uploads/IMG_20221013_171954-1568x2091.jpg" class="attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image" alt="" srcset="https://mysite.com/wp-content/uploads/IMG_20221013_171954-1568x2091.jpg 1568w, https://mysite.com/wp-content/uploads/IMG_20221013_171954-768x1024.jpg 768w, https://mysite.com/wp-content/uploads/IMG_20221013_171954-1152x1536.jpg 1152w, https://mysite.com/wp-content/uploads/IMG_20221013_171954-1536x2048.jpg 1536w, https://mysite.com/wp-content/uploads/IMG_20221013_171954-scaled-jpg.webp 1920w" sizes="(max-width: 1568px) 100vw, 1568px" data-has-transparency="false" data-dominant-color="615a55" style="width:100%;height:133.33%;max-width:1920px;--dominant-color: #615a55;">

The webp may be the one served by your browser, whereas your SEO plugin is likely using your jpg image.

Let me know if you have any queries with the above.

Thank you @jamesosborne, now it’s clear.

I added the filter back to my functions.php.
Now my Featured Image is JPEG in my OG:Image, my Front End, as well as my Media Library.

I added another JPEG image to the content of the article. The image was uploaded as JPEG, however, the Front End image is getting converted to webp as expected. So, this is good.

Now my question is, I don’t see the webp version in my Media library besides JPEG.
Where the webp images are saved for my content images within the article?
In other words, are we storing both the webp and the jpg versions of the images that I added to the content of the articles? I am not talking about Featured Images.

Thank You!

Hi @cnemnom,

The WebP version of any image isn’t directly available in the media library although you will find it if you use your hosting file manager or FTP, similar to any other jpg versions of the image generated by default (in different sizes).

Let me know if that answers your query.

Thank you @jamesosborne,

Yes, this answers my query. I can find them in the hosting file manager.

But my only concern is the size of keeping both JPEG/WEBP. My server will start to grow over time.
I would rather prefer not to keep JPEG for my Content Images inside the article and Keep only WEBP.

My Featured image only should be in JPEG.

How this can be solved?

Thanks again!

Hi @cnemnom,

Concerns over server storage space are one of the users users have a choice on whether to keep a copy of the jpg version of images when using the plugin. If you prefer not to keep the the jpg version of images on your server you can do so.

As a workaround with Rank Math, if it’s defining a default jpg image for it’s OG:image value, you can define the webp version as the OG:image individually using the Rank Math sharing settings per post. This goes back to the Rank Math setting I suggested previously, which worked for me, allowing me to share a Facebook post with a webp image. Rank Math can assist with this if you’re finding it’s not working as expected, or you can define your OG:image via other means.

Thank you @jamesosborne,

Yes, I will use this workaround in RankMath for now.
It was not working for me at the beginning because it was not saving due to the firewall blocking it as described here:
https://rankmath.com/kb/meta-data-not-saving/#firewall

Please note that I have removed the filter that you shared and deselected Generate JPEG files in addition to WebP.

So, all is set for now.

Many Thanks!

That’s interesting, many thanks for sharing @cnemnom. This will be useful if other users reach out with any Rank Math conflict also.

If you have any other Performance Lab queries be sure to get in touch. Best of luck!