Featured image in webp format

[Dalibor]

If I load the .webp image in the media library and use it as a featured image, it does not scale down on mobile. It loads a full-size version only.
What would be the best way to approach this?
Is there a way so that .webp images are also auto-scaled down (like regular jpeg) for the better mobile experience?

[Tom]

Hi there,

Not super familiar with .webp images, yet, but I don’t see why they wouldn’t scale. Is there a specific page where we can see the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dalibor]

Sure, take a look here: https://freelancerin.com/, I’ve returned it here only for your testing. Please let me know when you are done.

[David]

Hi there,

i am not seeing any srcset images in the featured image markup.
Can you try disabling plugins such as lazy loader?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dalibor]

Lazy load through Autoptimize disabled.

[David]

Well, its not the lazy loader.

Do you have any other plugins or functions related to Images?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dalibor]

Autoptimze, Wp fastest cache, Asset cleanup, Async javascript, Heartbeat control, Clearfy, WP optimize… take your pick ;).
I’ll turn them all off now.

All plugins offline.

[David]

Can you:

1, Check the settings in Customizer > Layout > Blog –> Featured Images Posts.
Make sure the Attachment size is Full, and the Width and Height fields are empty.

2. Now upload a JPEG image so i can see if that is working correctly.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dalibor]

It is already set up like that. And as I have stated before, JPEG images are working correctly.
My guess is as I needed to install the plugin (WP Enable WebP-https://wordpress.org/plugins/wp-enable-webp/) to upload WEBP files to the media library, it somehow regulates CSS setup for WEBP featured images?

Edit: plugins back on

[David]

Sorry i assumed you must of been using a plugin or script to allow support for webP images as WP doesn’t support them by default.

And i am not sure that plugin will fix the problem either, as it comes down to WP supporting WebP when it creates the various media attachment sizes. You may need to look at some of server side / CDN options – like this plugin requires:

https://wordpress.org/plugins/webp-express/

Hopefully WP will start supporting it natively in the near future

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dalibor]

This plugin has resolved the issue, thank you.

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts