Serve webP For Background Images

  • Resolved toad78

    (@toad78)


    3 years, 9 months ago

    I’ve read the following post as it seems to match my issue. However, I’m using WP Engine which is NGINX, and I have selected to use the “<picture>” tag option.

    I was hoping to have seen my background images be served via webP but don’t see any changes, even though the webP images have been created.

    Any suggestions?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author WP Media

    (@wp_media)

    Hi @toad78

    This is Ioanna from Imagify, and I’ll gladly assist you here!

    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

    Background images, unfortunately, cannot be displayed in WebP when using picture tags. The solution, in this case, is to use rewrite rules way unless you are using Cloudflare/ CDN.
    Regarding rewrite rules, note that as you are on NGINX you have to apply the rules manually to nginx.config file as Imagify is not able to add them automatically. Code to apply is:

    location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif)$ {
    add_header Vary Accept;

    if ($http_accept ~* "webp"){
        set $imwebp A;
    }
    if (-f $request_filename.webp) {
        set $imwebp  "${imwebp}B";
    }
    if ($imwebp = AB) {
        rewrite ^(.*) $1.webp;
    }
}

    You can see more information on the following page https://imagify.io/documentation/my-images-are-broken/

    Let me know if you need further assistance. I’ll be happy to help.

    Best regards,
    Ioanna

    Thread Starter toad78

    (@toad78)

    Thank you. I don’t use Cloudflare CDN but will contact the host about applying the code.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Serve webP For Background Images’ is closed to new replies.

Tags