A new image format for the Web

Last Update: June 06, 2020

Some of you may be aware of the preferred image format for Google called WebP. If not, you should consider updating all your images to this preferred format. It will definitely help with your site speed.

If you use plugins like Imagify you can make this update in the general setting of the plugin.

For more information about this new format here's a link.
https://developers.google.com/speed/webp

Cheers
Leo


Join the Discussion
Write something…
Recent messages
Camillamo Premium
Hi Leo,

Thanks for your sharing.

I got an error message saying 'Sorry, this file type is not permitted for security reasons.' when uploading the .webp image.

I've installed and activated Magnify, but the problem is still there. Do you have clues on why this issue causes?

Best wishes,
Camilla
Reply
ChrystopherJ Premium
WordPress does not currently allow you to upload WebP images directly to your Media Library, mainly because only 60%+ of Browsers support them, so if you were to only include WebP images on your website then about 30% of visitors would see no image at all. You will therefore need a plugin that can create these along side tote usual JPG, PNG & GIF images, along with serving both formats to your visitors. The post below might also help.
Reply
Camillamo Premium
Thanks for the detailed information. Now I see why that happened. I used the Imagify plugin, but I found the image size doesn't get smaller even with the plugin. In a word, the plugin doesn't work.

I checked the settings in Imagify. It seems that I need to add some codes to the theme (as shown in the attached screenshot). That's a little complex for me. I'm afraid I didn't use it correctly.
Reply
ChrystopherJ Premium
You don’t need to add any code, you just need to tick the 2nd box at the top that says display images and leave the radio button as picture tag, then you’ll be good to go :-)
Reply
Camillamo Premium
I ticked the box 'Display images in webp format on the site' and select the radio button 'Use rewrite rules" (see the attached screenshot). Is that correct?
Reply
ChrystopherJ Premium
No, that is not what I said, you need to use the picture tags, not the rewrite rules, that way you don’t have to add any code.
Reply
Camillamo Premium
Got it. Thanks for your help. Really appreciate. :-)
Reply
Harrysastar2 Premium
Hi, Leo, thanks for the info. To avoid another plugin, I use Tinypng to compress my images and convert them, where necessary, to png.

It has compressed many of my images by as much as 75% without any loss of quality, including transparency. Do you think WebP can improve on this.

I just wonder, after a lapse of ten years, why Google is suddenly pushing WebP? Unless there has been some lobbying by the developers. Or is it just another step by Google in their attempt to become the 1984 Big Brother of the 21st Century.
Reply
leoemery Premium
Yeah, it's been a while that's for sure, this was a format done back in 2010, but it is becoming the preferred image format.

And I was just like you I would compress my images with Tiny PNG. But now that I am using WebP formatting my images are compressed even more and my site speed is even faster. And every little bit helps.

My site was loading at 1.5 seconds it now consistently load at around .7 seconds.

And as for another plugin - you would not be adding one - if you do decide to do this you would simply remove the Kraken plugin and replace it with the Imagify plugin.

And then in the setting change your current images to the WebP format. Imagify does that for you.

And then from that point on you don’t have to compress your images because Imagify does it for you and your images will be in the WebP format. You simply upload them and you’re good to go.

And the plugin itself has does not add any load to your site.

But again it's what you're comfortable with doing with your site and what you feel works for you.
Reply
Harrysastar2 Premium
Thanks, Leo, I'll give it a try, although it would mean another plugin. Kraken isn't installed on any of my sites through WA or manually.
Reply
Dhind1 Premium
I have read about WebP and there is another that escapes me now. Last month I was looking to boost my site speed so I was researching.
I did remove all .png files from my site and made sure all photos were jpeg or jpeg. I was looking at WebP but it was not easy to change the files to WebP without installing a plugin.

One of the things I discovered in my research is that plugins are a huge drain on site speed.

Unfortunately, I am running an eCommerce store and plugins are necessary to make it all work.

I will look at WebP again.

Thanks
Reply
leoemery Premium
I use Imagify to optimize my images - 1 click and it can update your images to WebP

And this plugin has no affect on you site speed when it comes to being used and installed
Reply
Encourager1 Premium
Is Imagify better than Kraken and if so do you recommend using Imagify and disconnecting the Kraken plugin?
Reply
Dhind1 Premium
Thanks Leo,

Encourager asks a good question. I am using Kraken as an optimizer, so do I need to use Imagify first and then leave kraken installed as the main site image optimizer. This seems like doubling up?

My apologies if that is a dumb question.

Alex
Reply
Encourager1 Premium
I went to install Imagify and it's not compatible with Kraken. You need to uninstall Kraken in order for Imagify to work.
Reply
Dhind1 Premium
Thanks for letting me know.
Reply
leoemery Premium
you need to uninstall Kraken first then install Imagify
Reply
leoemery Premium
I find Imagify to be far better
Reply
Dhind1 Premium
Thanks for getting back to me, Leo. Much appreciated.
Reply
leoemery Premium
No problem
Reply
ChrystopherJ Premium
Thank you for updating everyone on this, it’s definitely a hot topic with all the Google PageSpeed Insights being performed.

Just to clarify though, you do not want to be converting your images and uploading them to WordPress yourself.

Firstly, WordPress does not support WebP via the Media Library. Secondly, only 60% of Browsers currently support WebP.

What you do want to be doing though, is using a Plugin that can create the WebP version for you, alongside your usual PNG or JPG files. You also want to make sure that the same plugin or your cache plugin can “serve” these images to the front-end visitors.

The way it works is by changing your IMG tags to PICTURE tags (make sure your Theme can handle these first), then it offers the visitors browser the WebP file first, if it says no, then the JPG or PNG is offered as a backup file.
Reply
MarionBlack Premium
Spot on, Chrystopher. I use the Imagify plugin to compress and convert images to WebP.
Reply
BenjisDad Premium
shortpixel!
Reply
leoemery Premium
Thank you the plugin Imagify compresses my images converts them to WebP

Funny thing about Google's page insights it actually does not measure site speed - it just gives you the things that are affecting your sites speed and the things you can do to rectify things.

For a more accurate measure of site speed it's best to use resources like Gmetrix
Reply
Giancarlos Premium
Hey Leo,
Thanks for sharing this,

Do I have to update my images if I have done the "save for web" process with Photoshop?
Reply
ChrystopherJ Premium
Save for web will still be using PNG or JPG, so yes, you’ll still want a plugin that can also create and serve the WebP format, as it’s a completely different file format that can save a further 60% on average.
Reply
Giancarlos Premium
Thank you so much, Chrystopher :)
Reply
leoemery Premium
To add to what Chrystofer said the best all in one plugin for image optimization and coverting images to WebP in my opinion is Imagify
Reply
Giancarlos Premium
I was thinking and researching other options such as Optimus but, I will take your word and go for Imagify,

Thank you so much, Leo!🤙🏽
Reply
Top