How to Use WebP Images in WordPress (3 Methods)

1 month ago 46

Do you privation to usage WebP images successful WordPress?

WebP images are a modern representation format that offers amended representation compression by reducing the record size. This makes your website load faster and saves bandwidth.

In this article, we’ll amusement you however to easy usage WebP images successful WordPress.

Adding WebP images successful  WordPress

What is WebP & Why Use WebP Images successful WordPress?

WebP is simply a caller record format for images to beryllium utilized connected the web. By utilizing the WebP representation format, your images volition beryllium 25-34% smaller successful record size than PNG and JPEG without losing quality.

If images are slowing down your website, past converting them to WebP format tin amended your page load velocity test scores.

To larn much astir representation compression, spot our usher connected how to optimize images for the web.

Since WebP is simply a caller record format, it is not yet supported by each browsers. However, astir modern browsers similar Google Chrome, Firefox, and Microsoft Edge enactment WebP images.

Should You Use WebP images successful WordPress?

WebP images tin assistance you speed up your WordPress website. It is simply a urge champion signifier to beryllium utilized on with a WordPress caching plugin, CDN, and more.

By default, WordPress doesn’t enactment WebP images and uploading a WebP representation volition amusement an error.

WebP representation  upload mistake  successful  WordPress

To hole that, you volition request to usage an representation compression plugin to person images into WebP representation format. You’ll inactive upload your images successful WordPress supported record formats similar PNG, JPEG, and GIF, truthful that they tin beryllium utilized arsenic a backup.

If your tract uses tons of images, and they are slowing down your WordPress blog, past you should decidedly see utilizing WebP images.

Here is however to usage WebP images successful WordPress. We’ll amusement you aggregate methods, truthful you tin take 1 that works champion for you:

Method 1. Using WebP Images successful WordPress with EWWW Optimizer

EWWW Image Optimizer plugin is 1 of the best WordPress representation compression plugins that allows you to optimize your WordPress images. It besides supports WebP Images and tin automatically amusement them connected supported browsers.

First happening you request to bash is instal and activate the EWWW Image Optimizer plugin. For much details, spot our measurement by measurement usher connected how to instal a WordPress plugin.

Upon activation, spell to the Settings » EWWW Image Optimizer leafage to configure plugin options. You’ll beryllium greeted by a setup wizard, but you tin click connected the ‘I cognize what I americium doing’ nexus to exit the wizard.

EWWW Wizard

On the adjacent screen, you volition spot a clump of plugin options. Scroll down and cheque the container adjacent to the ‘WebP Conversion’ option.

WebP conversion successful  EWWW

After that, click connected the Save Changes fastener to store your settings.

Next, you request to scroll down to the WebP Conversion section. The plugin volition present amusement you immoderate rewrite rules with a reddish preview image.

You request to click connected the ‘Insert Rewrite Rules’ button, and the plugin volition automatically effort to insert these rewrite rules to your .htaccess file.

Insert rewrite rules

If the plugin is palmy successful adding those rules, past the reddish representation preview volition crook into greenish with the ‘WebP’ text.

WebP Delivery method successful

Sometimes, the plugin whitethorn not beryllium capable to insert the rules. In that case, you request to transcript the rewrite rules from the plugin’s settings leafage and paste them astatine the bottommost of your .htaccess record manually.

Once you’re done, instrumentality backmost to the plugin’s settings leafage and click connected the Save Changes fastener again. If the preview representation turns green, past this means you person successfully enabled WebP representation transportation connected your WordPress site.

Alternately, you tin take from JS WebP Rewriting oregon <picture> WebP Rewriting methods arsenic your WebP transportation options. These are a small slower than the .htaccess method, but it volition get the occupation done.

Bulk Convert Your Old Images to WebP Version

EWWW Image Optimizer allows you to easy person your antecedently uploaded representation files to WebP images. Simply spell to Media » Library leafage and power to the database view.

Select files successful  Media

Next, you request to click connected the Screen Options fastener and alteration the ‘Number of items per page’ to 999. If you person 1000+ images, past those images volition look connected the adjacent page.

This mode you volition beryllium capable to rapidly prime a ample fig of images for bulk optimization. Next, click connected the Select All checkbox astatine the apical to prime each images.

Bulk Optimize

After that, click connected the Bulk Actions drop-down paper and prime Bulk Optimize option. Finally, click connected the Apply button.

On the adjacent screen, the plugin volition springiness you an enactment to skip the representation compression and lone person them to WebP. You tin cheque this enactment if your images are already optimized.

Run optimization

After that, click connected the ‘Scan for Unoptimized Images’ fastener to continue. The plugin volition past amusement you the fig of images it found, truthful you tin click connected the Optimize fastener to proceed.

Your images volition present beryllium optimized, and EWWW optimizer volition make WebP versions for your images.

WebP representation  conversion finished

Testing Your WebP Image Delivery

Once you person optimized your images, you tin spell to a blog station oregon leafage containing respective images. Take the rodent implicit to immoderate representation and right-click to unfastened the representation successful a caller tab.

checking image

This volition unfastened the representation successful a caller browser tab, and you’ll beryllium capable to spot that it has a .webp hold successful the code bar.

Verify WebP representation  is served

If the plugin is incapable to service the webp image, past you tin spell backmost to the plugin’s settings page. From present you tin alteration the WebP transportation enactment to ‘JS WebP Rewriting’ oregon ‘<picture> WebP Rewriting’ methods.

Method 2. Using WebP Images successful WordPress with Imagify

Imagify is simply a WordPress representation optimization plugin created by the folks down WP Rocket, the best WordPress caching plugin. It allows you to easy optimize and person images to WebP representation format.

First happening you request to bash is instal and activate the Imagify plugin. For much details, spot our measurement by measurement usher connected how to instal a WordPress plugin.

Upon activation, you request to sojourn Settings » Imagify leafage to configure plugin settings. From here. click connected the ‘Create a Free API Key’ fastener to continue.

Create Imagify API key

You’ll beryllium asked to participate an business email address aft that you tin cheque your inbox for an email containing your API key. Copy and paste the cardinal connected plugin’s settings leafage and click connected the Save Changes button.

Next, you request to scroll down to the Optimization section. There you request to cheque the options adjacent to ‘Create webp versions of images’ and ‘Display images successful webp format connected the site’ options.

Imagify WebP Settings

Below that, you tin take from 2 transportation methods to show WebP images successful WordPress. The archetypal 1 is .htaccess method, and the 2nd 1 is by utilizing <picture> tag.

The .htaccess method is faster, but it does not enactment if you are utilizing a CDN service. <picture> tag method works with CDNs too, but it whitethorn interruption immoderate WordPress themes.

You tin take either 1 that works good for your site. After that, click connected the ‘Save & spell to bulk optimizer’ fastener astatine the bottom.

Save settings and commencement  representation  optimizer

This volition bring you to Media » Bulk Optimization page. The plugin volition automatically commencement optimizing each your WordPress images successful the background.

Optimization status

If you person a batch of images, past this whitethorn instrumentality a while. Don’t worry, you tin adjacent the leafage and travel backmost to it aboriginal due to the fact that closing the leafage volition not halt the representation optimization process.

Testing Your WebP Images successful WordPress

Once the optimization is done, you tin sojourn a leafage oregon station containing a fewer images. Take your rodent implicit to an representation and past right-click to prime ‘Open representation successful caller tab’.

checking image

This volition unfastened the representation successful a caller browser tab, and you’ll beryllium capable to spot .webp hold successful the code bar.

Verify WebP representation  is served

Method 3. Using WebP Images successful WordPress with SG Optimizer

This method is recommended if you are a SiteGround user.

SiteGround is 1 of the best WordPress hosting companies. They connection a escaped SG Optimizer plugin to their users which allows you to optimize your WordPress performance. It besides includes the enactment to optimize WordPress images.

First, you request to instal and activate the SG Optimizer plugin.

Upon activation, the plugin volition adhd a caller paper point to your admin sidebar labeled ‘SG Optimizer’. Clicking connected it volition instrumentality you to the plugin’s settings page.

SG Optimizer settings

From present you tin crook connected the caching settings if you privation to usage SiteGround’s built successful caching system.

After that, you tin power to the Media Optimization tab and crook connected the ‘Generate WebP Copies of New Images’ option.

Enable WebP images successful  SG Optimizer

Below that, you’ll spot the enactment to ‘Bulk Generate WebP Files’. Clicking connected it volition commencement generating WebP copies for each representation files successful your WordPress media library.

Bulk make  WebP images

Once finished, your WordPress tract volition commencement serving WebP images.

Testing WebP Images successful SG Optimizer

To spot if your website is serving WebP images, you request to unfastened a leafage connected your tract with a fewer images.

After that, close click and prime Inspect tool. This volition unfastened the developer console wherever you request to power to the Network tab.

Viewing WebP Images successful  developer tools

From here, click connected the ‘img’ tab and past reload the leafage (CTRL+R connected Windows and Command+R connected Mac). As your website reloads, you volition spot each the images loaded successful the developer console.

We anticipation this nonfiction helped you larn however to usage WebP images successful WordPress. You whitethorn besides privation to spot our usher connected how to make an email newsletter, and our examination of the best concern telephone services for your website.

If you liked this article, past delight subscribe to our YouTube Channel for WordPress video tutorials. You tin besides find america connected Twitter and Facebook.

Original Story