Question

WebP Images on slider and backgrounds

  • 18 September 2021
  • 7 replies
  • 154 views

Badge +1

Hi,

We’re using Elementor with WP Rocket and Imagify https://imagify.io/

Imagify is creating WebP versions of images and serving them fine on most images across the site.

But I have noticed when doing a Google Core Vitals test, the background images are not using the WebP files. This happens in when using the banner slider.

See the attached for the settings in Imagify, which is using ‘Use <picture> tags

Any suggestions for to fix this, so WebP images are used in background elements?

Thanks,

Stu


7 replies

Userlevel 6
Badge +2

do you mean ur images not showing or its just google crawl issue?

Badge +1

Hi, the images are showing, but loading in as JPEGs rather than WebP.

You can see here https://www.maxwellinteriors.co.uk/

The standard image elements further down the page are WebP format, but the banner images are loading in as  JPEG.

Badge

Hello!

There is a workaround for this. When inserting background image ,use option "insert from URL” and insert link of the webp version of whatever image you need. Also there's an option  to add background image with custom CSS - #id-of-column > .elementor-widget-wrap{ background-image:url('someimageurl.webp’); }, but this way images were not caching.

Badge +1

Great, thanks I will try this.

Stu

Hello!

There is a workaround for this. When inserting background image ,use option "insert from URL” and insert link of the webp version of whatever image you need. Also there's an option  to add background image with custom CSS - #id-of-column > .elementor-widget-wrap{ background-image:url('someimageurl.webp’); }, but this way images were not caching.

It worked!

 

TKS

Userlevel 6
Badge +2

Hello!

There is a workaround for this. When inserting background image ,use option "insert from URL” and insert link of the webp version of whatever image you need. Also there's an option  to add background image with custom CSS - #id-of-column > .elementor-widget-wrap{ background-image:url('someimageurl.webp’); }, but this way images were not caching.

It worked!

 

TKS

yes yoiu can first conver to webp format, latter you can call them.

Hi, the workaround won’t work with Dynamic Tags unless you add add custom fields for the webp urls.

An alternative, if available in your hosting environment, is a config change that attempts to serve a webp version if found and falls back to the actual image requested. So *.jpg is requested and the server checks first to see if there’s a *.jpg.webp version.

This is the resource I’ve used for this: https://docs.ewww.io/article/16-ewww-io-and-webp-images

Reply