Hello, I was just thinking of the Wordpress features that I find important for the websites that I have built. WebP image support is one of my go to features to improve page speed. Shopify has gone to serving WebP exclusively to browsers that support it and it is a great feature to have overall. For some of my Wordpress sites, I have used Cache Enabler and Shortpixel to serve WebP images over a CDN with Shortpixel and they are cached using Cache Enabler. I am unsure of how I would get this to work, and thought I would share with people smarter than me who may already have an answer.
Yo! On my first Frontity test, I was pulling content from a Wordpress site with the WebpExpress plugin (https://wordpress.org/plugins/webp-express/) that was configured to automatically add .webp to the end of png and jpgs. If those images didn’t exist it would send the image to it’s own converter and spit out a fresh webp. It worked out of the box with frontity as it rewrote the image extension on the fly for the content at least.
I cant remember my exact configurations, but it will definitely work for images contained in the rest responses and you can set it up within wordpress.
Thank you for the insight! It’s good to know that it is possible and that Frontity should be able to pull the WebP versions. I’ll have to have a closer look at my configuration to see if I need to do something to get it working.
to: https://i1.wp.com/test.frontity.io/wp-content/uploads/2016/11/Iceland-test.jpg
But they include the link canonical header pointing to the original image so it should be fine for SEO. @christianoliveira could you please confirm this?
Anyway, it’s great to know about alternatives. If anyone else is using a different plugin/service please share it with us
Right on! That’s a sweet method. The thing I like about webp express is its handled all in your code base (though it does have the option to set up an external processor using an API, but it can still be your own external server). The plugin does the original link too and sends the webp mime type in the header so it falls back to jpg/png for browsers that dont support webp, like safari.
The developer of that plugin is pretty cool too, very responsive and open to suggestions, he just made it as a side project. Wonder if he’d come over here and write a package for frontity
Jetpack is super handy. Haven’t used it in ages and hadn’t thought about it but that’s a great way.
I tried using Jetpack on shaunguimond.com and when I enabled the feature for CDN and automatic webp support, the images became incredibly blurry. Is there a trick to getting it to work with Frontity?
Yes, no problems with images and SEO with the Jetpack CDN as it indeed includes the canonical link back to the original URL.
Even if that wasn’t the case, it’s not a big deal as the images are indexed by Google associated to the URL that contains them, and that’s more important in terms of SEO than the URL of the image itself
I edited this response because I was wrong and want to keep record of what I said. When I was testing the fix, I was on my laptop, what I said below did seem to fix my issue, but I have since returned home and have went on my blog and the issue persists. It is an extremely odd issue and seems to potentially be related to screen resolution. Anyone might be able to help?
I looked further into the issue and it seems that for some reason the srcset value in the img elements was not being generated. Since it was not being generated, Jetpack seemed to be feeding the smallest image possible as per it’s guideline which can be found on the page you linked for Jetpack. the images being generated was like 480x340 or something like that.
To fix the issue, I went ahead and simply updated my posts and for good measure, changed the image size setting which can be found in the Gutenburg Image settings:
Once I did that, the srcset value was being generated and the correct dimensions were being loaded by Jetpack’s CDN.
Sorry for taking your time with this issue which was on my side, I don’t understand what exactly caused the srcset values not be loaded, but thanks for your time.
I’ve found another method for handling webp using Cloudflare (without CF Polish). The only requirement is that your Wordpress instance is behind Cloudflare so you can slot a worker in. You just need to have .webp equivalents of all your .jpg/.pngs in the same wp-content/uploads/ folder (you can use the free Webp Express plugin to easily bulk generate them).
Here’s the worker code:
/**
* Assume we have an image server able to serve webp, convert png and jpg
* urls to webp urls if the browser supports it
*/
addEventListener('fetch', event => {
event.respondWith(makeWebp(event.request))
})
async function makeWebp(request) {
let regex = /\.jpg$|\.png$/
if(request.headers.get('Accept')
&& request.headers.get('Accept').match(/image\/webp/)
&& request.url.match(regex)) {
/**
* Replace jpg / png with webp
*/
let url = new URL(request.url.replace(regex, '.webp'))
/**
* Create a new request with the webp url
*/
const modifiedRequest = new Request(url, {
method: request.method,
headers: request.headers
})
/**
* Fetch the webp response
*/
const webpResponse = await fetch(modifiedRequest)
/**
* Add webworker header to the webp response so we can
* check live if the webworking is doing what it should do
*/
const webpHeaders = new Headers(webpResponse.headers)
webpHeaders.append('X-WebWorker', 'active')
/**
* Return a new response object
*/
return new Response(webpResponse.body, {
status: webpResponse.status,
statusText: webpResponse.statusText,
headers: webpHeaders
})
} else {
const response = await fetch(request)
return response
}
}
