Archived topic
Page hero images webp format and fallback
9 replies · Started by Carlo on October 19, 2020
Hi there,
I am using the imagify plugin to convert our jpg images into webp format.
So far so good. No problems with images in pages.
But I have a problem with the jpg page hero image.
Even though there is a converted webp version as with the other images, the jpg version is still served.
Please see the home page in the link provided.
I'd like the webp version to be served and a jpg version as fallback.
How can I solve it?
Thank you. Best wishes. Carlo
Hi,
I see that you're using "use <picture> tag" setting on your Imagify plugin. I'm afraid that's not going to work as page-hero's image is added through background-image css property.
You can try setting Imagify to "use rewrite rules" and see if it works.
As for dynamic fallback, I'm afraid there's no default feature within the UI that does it.
You may have to play around with generate_page_hero_background_image_url.
Hi Elvin,
1) since the website is on nginx server I guess that rewrite rules option can't work. (just recently moved from apache)
2) Is there any css solution?
(with both webp and jpg fallback)
3) Could you tell me more about playing around with "generate_page_hero_background_image_url."?
Thank you. Best wishes
Carlo
The generate_page_hero_background_image_url allows you to manually filter the URLs used in the CSS - it could be handy.
Do the webp image URLs match the original image URLs with the extension being the only thing that changes?
Hi Tom,
thank you for your reply,
I have just fixed it 5 minutes ago editing the nginx configuration with the support of the hosting provider.
Again thank you for your help, I really appreciate the way I feel supported here. :)
Glad you got it sorted! :)
Hi Tom,
I'm in a similar situation - using Imagify but with Cloudflare CDN, so I am not able to update and use the "rewrite rules" with Imagify plugin.
Yes, the webp image URLs match the original image URLs with the extension being the only thing that changes and it looks like:
http://www.domain.com/file.jpg
updates to
http://www.domain.com/file.jpg.webp
I'm having the issues with the hero background images showing up as .jpg.
Your help and tips are appreciated.
Thanks!
Chad
Hi there,
Please see Imagify's answer to this here:
https://wordpress.org/support/topic/serving-background-images-in-webp-2/#post-12994046
Shoot... okay thanks Elvin!
No problem. Glad to be of any help. :)
