Skip to Main Content

How to provide WebP images instead of traditional PNG & JPG

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Google is at the top of the food chain on the Internet. Society influences (or dictates) a lot of what happens online. And their new image format, WebP, continues this trend. With the speed of page loading becoming more and more important (mainly because of Google Page Rank), developers and designers see image compression as the easiest way to reduce load times. Google WebP images are approximately 30% smaller than regular JPG or PNG images and maintain equivalent quality. Best of all, you don't have to worry about manually converting your images to WebP.

In this article, we'll show you how to use this new image format with WordPress, even though it's not yet supported by default.

Use Optimole to serve WebP files on WordPress

WebP, as an image format, is not supported by default in WordPress. You can upload a .webp image, but as with an SVG file, you may receive error messages. And again, as for the use of SVG files with WordPress , there is a simple workaround via plug-in.

Wordpress image workaround

Among the WebP services tested, Optimole stands out from the crowd. It can indeed operate with a minimum of configuration. We therefore want to explain to you how to configure it and make your WordPress installation compatible with the WebP format as easily as possible.

First, you will obviously want download and install the plugin itself . It's on the WP.org directory, and it's completely free. Since the API based service that powers it on (up to a point). While it is possible to convert traditional images to WebP on the fly using PHP, not all web hosts grant this permission to your server. If you have this permission, you can also view the plug-in WebP ExpressYou get a lot of control with that , but it is a system that requires more configuration to be able to run smoothly.

Once Optimole is installed and activated on your WordPress website, you will find a new menu option on Media - Optimole .

Your Optimole API Key

Before you can access settings or configurations, you must have an Optimole account. If you have already configured one, you can click on the button I already have an API key . If not, save and send the API key by email . The basic API key account is free and you get around 5 hits on this level. If you need more than that, there are pricing tiers available.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Pricing price

Optimole defines a visit as " anyone who visits your if you once [. . .] Each user is counted only once. It doesn't matter what they do on your site, how many images they download or how many pages they visit; it's just a user. If they leave your site and come back the same day, they're still just a user. "

Once the measured visits are exhausted, only the WebP images stop serving. Your images themselves don't. You will find the API key in your Optimole dashboard at the very top.

Just paste it into your WordPress dashboard, and you'll be ready to start spreading WebP images with WordPress.

Your Optimole WordPress dashboards

In your WordPress dashboard, you get basic information about your WebP optimization. This allows you to troubleshoot and assess the success of this acceleration. In this way, you can change various settings.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Optimole dashboard

First, you see the account associated with the API, then at the bottom of the screen, the plugin shows the latest optimized images. You can see how much smaller the WebP images served are than the original ones you uploaded to WordPress.

Then there is the tab Problems possible on top. No one likes to see the highlighted tab, but we also all need to see what conflicts might arise.

Optimole dashboard error

The main issue we faced is with other image compression and delivery plugins. As you can see in the image above, the Jetpack plugin works similarly to Optimole via Photon APIT , so they can bang their heads. For us, this was manifested by the fact that no image was transmitted to the visitor. We haven't encountered any issues with other compression services like TinyPNG or Smush.

Using dashboards

If you want more detailed information about how your site works with WebP, the Optimole External Dashboard contains this information for you.

Using optimole dashboard 1

Instead of just 9,5 times smaller, you can see the actual size of the files being served. As well as the files themselves over a 30 day period.

Optimole Dashboard Report 1

You can also set watermarks in the Optimole (or WP) dashboard so that anyone who receives a WebP from your WordPress site will automatically receive your logo blazon. It's a straightforward process, and you get control over opacity, location, etc.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Optimole plugin tuning

You can basically do the same from both dashboards. Either under the tab Parameters of WordPress, or by visiting the external Optimole dashboard. It all depends on what you're most comfortable with, as well as how much data you need at any given time.

In addition, you will be able to control the compression level, lazy loading and when / if certain images are streamed as WebP based on file names. You will find all this in the tab Parameters de Media - Optimole .

Lazyload wordpress plugin

pack

The best part about using WebP with WordPress websites is that you don't have to work with the files manually. No extra downloads, no extra compression time, nothing. Due to how APIs work, all processes and calculations are performed on the fly in real time. Google has really made the internet faster by using WebP rather than JPG or PNG. The main advantage, however, is that the images retain the same quality, even if their size is reduced considerably. It might be interesting of you that Google forces you to use their format to speed up your site so that it can rank you higher and the end user experience is better as well. And that's what matters in the end.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
5 shares
Share5
tweet
Save