[Resolved] WebP image support for backgrounds/headers/navigation

[S-Config]

Hello everyone,

I’m not sure if I’m posting in the right area. But here goes.

I am currently using EWWW Image optimizer plugin to add WebP support since for some reason forcing the rule via .htaccess of my hosting provider does not seem to do anything. The plugin works! But it seems it only wants to convert any jpg and png files within the body of the article instead of the entire site according to the inspection report from Google Chrome. I would like to give WebP support %100 because I use background images, header images, and backgrounds in the navigation bars and all of that.

I was trying to look up some code I could simply inject into the functions.php of my child theme to perhaps enforce the WebP policies sooner. But didn’t come up with a whole lot.

Anyone have ideas on how to make GeneratePress more friendly towards WebP? I know the image format is still in beta so if not that’s okay.

Thank you again.

– S

[Tom]

Hi there,

All GP images upload into the media library, and I believe plugins like EWWW image optimizer optimize images inside the media library?

The background images set in the Backgrounds add-on use the default WordPress image upload control, so there shouldn’t be anything GP specific we have to do – it should be controlled by WordPress/EWWW.

Let me know if you need more info 🙂

[S-Config]

Well, that is EWWW’s primary function which is to convert the images on the back-end for the user. But the secondary function of EWWWW is to allow alternative WebP re-writing which is PHP that looks at the front page code looking for extensions with a .jpg or .png and tacks on .webp at the end if the browser accepts it.

I also tried WP-Cache-Enabler which is the highest recommended plugin for WebP re-directing as it re-writes the cache files. That was actually worse with GeneratePress as it would randomly grab the images in both the title and the content.

Finally I tried a legacy plugin “wp-webp” which did nothing…

I can’t really experiment in the GP layout control as controlling backgrounds and logos is done with radio buttons for remove and add. I know that’s just for ease of use for the average user. But I can’t tweak the URL text to a relative address by stripping the http or https off of the initial image address to see if that helps.

Anyhow. Thanks for the response. It is appreciated.:)

[Tom]

Ah, I assume it only looks for static images in the source of the site.

As backgrounds are written in CSS, the plugin would have to search for those images specifically as well.

It might be a feature request for the plugin itself.

[S-Config]

Well, as a work-around I added a page worth of CSS effecting the .main-navigation and .footer-widget with extra webkit backgrounds for webp. Of course the Safari Browser doesn’t like but given how the majority is mobile and it’s just the background art it’s not the end of the world if it loads for those guys.:)

Thanks again for the quick responses. my website can now flip %100 to WebP with GeneratePress.

[Tom]

Any example of the code you added to the CSS?

Glad you got it working 🙂

[S-Config]

Sure, the code was simple and it turned into a page worth because of all of the areas GeneratePress touches with the background images plugin and I do use background images in the navigation menus content screen, footers, etc.

body{
    background-image: url(//www.s-config.com/core/wp-content/uploads/2014/01/s-config-background1.jpg);
    background-image: -webkit-image-set(url(//www.s-config.com/core/wp-content/uploads/2014/01/s-config-background1.jpg.webp) 1x)
}

And this works awesome for FireFox, IE, and Chrome. No double-loading of images according to the network inspection tool of both Chrome and Firefox.

Just as a note I stripped the ‘https’ to reduce redirection issues for users which land on my site via http due to search engines not updating.

I also tried using the CSS3 @support get regain control for Safari Browsers back. Didn’t work. Apparently the only way to truly have dynamic WebP support for all browsers is with the use of the ‘modernizr’ javascript which it dynamically changes the CSS based on browser detection. I’m not even sure that will work considering most WordPress users including myself use CSS caching software.

I’ll may play with modernizr when i feel like really digging into my child theme. But for now this is acceptable. Apple and Firefox are slowly working towards WebP support so it may be a problem that just solves itself.

[S-Config]

Ohh a little update. Safari apparently does support the -webkit-image-set function in CSS but because they have not implemented WebP support the browser stalls and does not produce any background images in that browser.

[Tom]

That’s beautiful – thanks for the explanation! 🙂

[Author]

Posts