Frontend / show the webp image

Hey Tania,

Marko is here again.

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

– background images added via CSS
– there is no WebP generated
– page element HTML is loaded after Imagify looks for the source code to apply WebP markup
– images are external

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

Can you tell me if you can find relation to some of these points?

Best Regards

Good Morning,

thank you for the answer.

I can not confirm the points. everything has to be right.

So can we write private? so i can send you email to the backend and you can have a look?

Yours sincerely
Tania

Hey Tania,

If you are not in position to share details in public forum, you can contact us via our Support center.

Other than that, if you can at least share the website URL, I can take a look that way as we are usually able to see what is the problem that way.

Best Regards
Marko

Hello,

this is the stage link: https://www.victor-mayer.com/stage/

But not all images would optimize and convert to webp. So i don′t konw if you can see something.

If i contact the support, it will cost something?

Yours sincerely

Hey Tania,

I see. You use <picture> tag method to deliver WebP, and some of your images are background images (the main “hero” image on that page is bg image).

Next, images like this one do not have WebP version. You can check it by appending .webp to the image URL (including .jpg). It will return you to the Homepage instead of showing the WebP version – https://www.victor-mayer.com/wp-content/uploads/2020/02/megamenue_hintergrund_final-1.jpg.webp

Make sure to find that image and reoptimize it so WebP is generated. Also, if there are not optimized images in the Media Library, make sure to optimize them.

That will help.

I can not see any CDN/Cloudflare, or caching server enabled on your site, so you can easily switch to rewrite rules method, as it will work much better (it will handle even background images).

Let me know what you think.

Best Regards

Hello Marko,

thank you for your email.

I don′t understand the point with “rewrite rules method”.
Please click here to see the screen.

Actually i checked <picture>….
You will that i checked “Rewrite Rules benutzen”
Is this correct? If this is so, must i make something else in htaccess or somewehre else?

And what is with the images that i optimized and create the webp images. Do i must start all agin?

You write xxx.jpg.webp
Are the images at the end without jpg?

Yours sincerely
Tania

Hey Tania,

> Is this correct? If this is so, must i make something else in htaccess or somewehre else?

yes, that’s it, and you don’t need to add any additional code, it will be done automatically. Also, there is no need to do anything with already optimized images.

> You write xxx.jpg.webp
Are the images at the end without jpg?

In order to check if WebP exists, you should use the full URL including “.png” or “.jpg” as we keep it in image name when appending the “.webp” part (it will not affect images in any negative way).

Best Regards
Marko

Hello Marko,

okay, good to know. I will change it later.

Regard this point:
> You write xxx.jpg.webp. Are the images at the end without jpg?
In order to check if WebP exists, you should use the full URL including “.png” or “.jpg” as we keep it in image name when appending the “.webp” part (it will not affect images in any negative way).

Sorry, but i don′t unterstand what you write.

The pictures that i upload was to 95% jpgs. Now with the plugin webp pictures will generate. In one of your messages you say to check xxx.jpg.webp to check if the webp image exist. This is clear. But in frontend if i will check the source code or run the website through a SEO tool, then he will see webp or he will see jpg? Because we use this plguin because the SEO tools say us, that we don′t use webp picture and if i see now in frontend only jpgs than i don′t understand this plugin.

Yours sincerely
Tania

also one other thing.
After the optimize is finished, now in frontend on the most sites i don′t see pictures anymore.
For examle here: https://www.victor-mayer.com/stage/c/emaille-schmuck/candy/
Is not good ??
Yours sincerely
Tania

Hey Tania,

I am very sorry about the confusion!

To be clear, feel free to ignore that part, it’s not important because tools will see your images as WebP.

This is just a good way to debug if images are not, but we are here to help you with that if it happens.

> After the optimize is finished, now in frontend on the most sites i don′t see pictures anymore.

This is very strange! Can you deactivate WebP, clear the cache and let me know if it works? Because it looks like images are gone from the filesystem but not sure how.

If turning off WebP does not help, try to restore them to original via Media Library and let me know if it fixes the problem (you can try with 2-3 images first).

Best Regards
Marko

Good Morning Marko,

i see first now your message.

Regard your answer:

This is very strange! Can you deactivate WebP, clear the cache and let me know if it works? Because it looks like images are gone from the filesystem but not sure how.
-> What i have to deactivate exactly? The plugin imagify or what exactly. Perhaps a picture will help me.

If turning off WebP does not help, try to restore them to original via Media Library and let me know if it fixes the problem (you can try with 2-3 images first).
-> how i can restore from original? Perhaps also here a screen will help me.

Yours sincerely
Tania

Good Morning Marko,

i hope to get soon a answer because my customer is waiting to see if this plugin is the right because if it works how we want we can install the plugin on the right server.

Yours sincerely
Tania

Hello Sir,
I am facing the exact issue as highlighted by @yychen0925
After the optimization is finished, now in frontend most pictures i don′t see anymore. while in editor it showing, If I restore to the original in the plugin backend, then it shows again on my blog posts.

Similarly, I don’t see webp format in my media library, only I see images with png and jpg extensions.

Please help us

Good Morning Marko,

can you help us with the new existing problem that we have after we finished the optimization? Without your help we can′t continue ??

Yours sincerely
Tania