webp images in wordpress

October 23, 2023

WebP vs. PNG vs. JPEG: The Best Image Format for WordPress

Don’t know whether to use WebP, PNG, or JPEG images on your WordPress site?

Images bring life to your content and make your website more attractive. However, choosing the right file format is important for performance. If your images take a lot of time to load, then your site won’t provide a great user experience.

In this article, we will compare WebP vs. PNG vs. JPEG and help you pick the best image format for WordPress.

WebP vs. PNG vs. JPEG – Introduction

Let’s first look at all 3 image formats and see how each of them works.

What Is WebP?

WebP is a relatively new image format compared to PNG and JPEG. Created by Google, WebP provides superior lossless and lossy compression for images on the internet. This allows you to create smaller images that help improve website performance.

Lossless compression means that all the data in the image remains after it has been uncompressed. On the other hand, lossy compression reduces file size by permanently eliminating information from the image file.

One of the standout features of WebP is that it supports motion-based images, which isn’t possible in PNG or JPEG. This also makes WebP a great alternative to GIFs.

WordPress introduced support for the WebP image format with the 5.8 release. Previously, you had to install a WordPress plugin to use WebP images in WordPress.

All modern web browsers, including Google Chrome, Firefox, Safari, Edge, and more, support the WebP image format. Many image editing tools also support WebP and allow you to export images in this format.

WebP also has similar capabilities as PNG. You can achieve the same levels of transparency in WebP images as with PNG.

Pros:

Offers smaller file sizes compared to PNG and JPEG
Supported by popular web browsers
Get the same level of transparency in images as PNG
Supports both lossy and lossless compression
Lets you create motion-based images

Cons:

Requires third-party tools and plugins to convert images into WebP format
Limited support from photo editing software

What Is PNG?

Portable Network Graphics (PNG) is one of the most popular image formats used across the internet. It supports millions of colors, so you get sharp and much better-looking pictures.

The main advantage of using PNG is its lossless compression algorithm. When an image is compressed, it doesn’t lose any data or quality. This makes PNG a great format for your WordPress website if you need a smaller image file size and want to preserve the fine details in the picture.

Another benefit of using PNG is that it supports transparent backgrounds. That’s why you will find many website logo files and other elements in PNG format.

For example, here’s a logo for WPBeginner that’s in PNG format.

Pros:

It doesn’t lose image quality when compressed
Has smaller image file sizes compared to JPEG
Offers high-quality image transparency
Supported by all major browsers and image editing tools
Ideal format for logos and graphics with low-color
Supports lossless compression

Cons:

It doesn’t support lossy compression
Limited color depth and not suitable for complex color-rich images

What is JPEG?

JPEG, short for Joint Photographic Experts Group, is an image format that was created in 1986. It is the standard image format for many devices, including digital cameras and smartphones. Many WordPress website builders and image gallery plugins also support JEPG images.

One of the advantages of using JPEG is that it offers vivid pictures and contains millions of colors. All web browsers support this format, and the image sizes are relatively small.

For example, here is an image of a butterfly in JPEG format. It has many colors and details, which aren’t as noticeable in other image formats.

JPEG is often the best format if you have complex images with many colors. In the JPEG image above, the colors are vibrant and prominent.

However, you might notice a small drop in image quality when optimized, especially if the image has low color data. Besides that, JPEG images are easily convertible. You can change them into any other format, including PNG and WebP.

Pros:

It supports millions of colors
Excellent format for complex and color-rich images
Highly convertible into other image formats
Supported by popular web browsers and image editing tools

Cons:

It loses image details after compression
It does not support layered images
There is no support for image transparency

WebP vs. PNG vs. JPEG – Image File Size

When it comes to comparing WebP vs. PNG vs. JPEG for image file size, a lot depends on the level of compression you choose when optimizing the image.

That being said, WebP lossless images are generally 26% smaller than PNG. Similarly, when comparing WebP vs. JPEG lossy images, WebP images are 25-34% smaller than JPEG.

For instance, a comparison by Google Developers shows a significant difference in image file size between JEPG and WebP formats.

This shows that WebP images are much smaller in file size compared to PNG and JPEG. With a smaller image file size, you can boost your WordPress speed and ensure that web pages load faster.

As a result, you will also see an improvement in WordPress SEO. Google considers page load speed as a ranking factor. If your site loads quickly, then you will have an edge over slowing-loading sites.

WebP vs. PNG vs. JPEG – Image Quality

Choosing the best image format for WordPress based on image quality will depend on your website type.

For instance, if you are a photographer who posts color-heavy pictures on your WordPress website, then JPEG is the best image format to use. JPEG images have a high compression ratio and help retain color data.

On the other hand, if you are posting screenshots or individual pictures that have minimal colors, then you are better off using the PNG format. PNG delivers high-quality images and works seamlessly for complex and simple images.

The WebP format will work if you want to compress images on your site to maintain high performance. If you compare WebP vs. JPEG, then WebP achieves an average of 30% more compression than JPEG. However, we don’t recommend using WebP if you have a photography or graphic design portfolio website.

What Is the Best Image Format for WordPress?

After comparing WebP vs. PNG vs. JPEG, the best image format really depends on your needs.

WebP is said to be the format of the future that will soon be used by all websites. When we compare WebP vs. JPEG, WebP delivers the smallest image file size, which saves storage space and improves website load times. However, you will need to make sure that your website builder or image editing tool supports the WebP format.

On the other hand, JPEG is the best image format for professional photographers and site owners who need color-accurate images.

PNG is the best format for sharing screenshots and other images where there isn’t a lot of color. It is a very versatile format and offers high-quality images with a relatively low file size.

Bonus Tips for Using Images in WordPress

Images play a key part in your content, and many website owners don’t take the time to add quality images to their blog posts and pages.

Apart from choosing the right image format for WordPress, here are a few tips to help you create amazing images and optimize them for performance:

Use Image Compression Plugins – Large images can slow down your website. You should use image compression plugins to optimize WebP, JPEG, and PNG images to deliver fast performance.

Add Image Alt Text – Alt text or alternative text is an HTML image tag that describes an image. It allows search engine bots and users with screen readers to understand your pictures. When optimizing your site for SEO, adding alt text to your photos can help them appear in image search results.

Select the Right Image Size for Your Site – Often, beginners are unsure which image size they should use for their websites. Picking the right size provides consistency and a smooth user experience.

Use Watermark or Disable Right Click – If you don’t want others to use your images without permission, then you can add a watermark and disable right-click on images. To learn more, please see our guide on how to prevent image theft in WordPress.

We hope this article helped you learn about WebP vs. PNG vs. JPEG to find the best image format for WordPress. You may also want to see our list of the best design software and our beginner’s guide to image SEO.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post WebP vs. PNG vs. JPEG: The Best Image Format for WordPress first appeared on WPBeginner.

April 28, 2021

How to Use WebP Images in WordPress (3 Methods)

Do you want to use WebP images in WordPress?

WebP images are a modern image format that offers better image compression by reducing the file size. This makes your website load faster and saves bandwidth.

In this article, we’ll show you how to easily use WebP images in WordPress.

What is WebP & Why Use WebP Images in WordPress?

WebP is a new file format for images to be used on the web. By using the WebP image format, your images will be 25-34% smaller in file size than PNG and JPEG without losing quality.

If images are slowing down your website, then converting them to WebP format can improve your page load speed test scores.

To learn more about image compression, see our guide on how to optimize images for the web.

Since WebP is a new file format, it is not yet supported by all browsers. However, most modern browsers like Google Chrome, Firefox, and Microsoft Edge support WebP images.

Should You Use WebP images in WordPress?

WebP images can help you speed up your WordPress website. It is a recommend best practice to be used along with a WordPress caching plugin, CDN, and more.

By default, WordPress doesn’t support WebP images and uploading a WebP image will show an error.

To fix that, you will need to use an image compression plugin to convert images into WebP image format. You’ll still upload your images in WordPress supported file formats like PNG, JPEG, and GIF, so that they can be used as a backup.

If your site uses lots of images, and they are slowing down your WordPress blog, then you should definitely consider using WebP images.

Here is how to use WebP images in WordPress. We’ll show you multiple methods, so you can choose one that works best for you:

Using WebP Images in WordPress with EWWW Optimizer
Using WebP Images in WordPress with WP Rocket
Using WebP Images in WordPress with SG Optimizer

Method 1. Using WebP Images in WordPress with EWWW Optimizer

EWWW Image Optimizer plugin is one of the best WordPress image compression plugins that allows you to optimize your WordPress images. It also supports WebP Images and can automatically show them on supported browsers.

First thing you need to do is install and activate the EWWW Image Optimizer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to the Settings » EWWW Image Optimizer page to configure plugin options. You’ll be greeted by a setup wizard, but you can click on the ‘I know what I am doing’ link to exit the wizard.

On the next screen, you will see a bunch of plugin options. Scroll down and check the box next to the ‘WebP Conversion’ option.

After that, click on the Save Changes button to store your settings.

Next, you need to scroll down to the WebP Conversion section. The plugin will now show you some rewrite rules with a red preview image.

You need to click on the ‘Insert Rewrite Rules’ button, and the plugin will automatically try to insert these rewrite rules to your .htaccess file.

If the plugin is successful in adding those rules, then the red image preview will turn into green with the ‘WebP’ text.

Sometimes, the plugin may not be able to insert the rules. In that case, you need to copy the rewrite rules from the plugin’s settings page and paste them at the bottom of your .htaccess file manually.

Once you’re done, return back to the plugin’s settings page and click on the Save Changes button again. If the preview image turns green, then this means you have successfully enabled WebP image delivery on your WordPress site.

Alternately, you can choose from JS WebP Rewriting or <picture> WebP Rewriting methods as your WebP delivery options. These are a little slower than the .htaccess method, but it will get the job done.

Bulk Convert Your Old Images to WebP Version

EWWW Image Optimizer allows you to easily convert your previously uploaded image files to WebP images. Simply go to Media » Library page and switch to the list view.

Next, you need to click on the Screen Options button and change the ‘Number of items per page’ to 999. If you have 1000+ images, then those images will appear on the next page.

This way you will be able to quickly select a large number of images for bulk optimization. Next, click on the Select All checkbox at the top to select all images.

After that, click on the Bulk Actions drop-down menu and select Bulk Optimize option. Finally, click on the Apply button.

On the next screen, the plugin will give you an option to skip the image compression and only convert them to WebP. You can check this option if your images are already optimized.

After that, click on the ‘Scan for Unoptimized Images’ button to continue. The plugin will then show you the number of images it found, so you can click on the Optimize button to proceed.

Your images will now be optimized, and EWWW optimizer will generate WebP versions for your images.

Testing Your WebP Image Delivery

Once you have optimized your images, you can go to a blog post or page containing several images. Take the mouse over to any image and right-click to open the image in a new tab.

This will open the image in a new browser tab, and you’ll be able to see that it has a .webp extension in the address bar.

If the plugin is unable to serve the webp image, then you can go back to the plugin’s settings page. From here you can change the WebP delivery option to ‘JS WebP Rewriting’ or ‘<picture> WebP Rewriting’ methods.

Method 2. Using WebP Images in WordPress with Imagify

Imagify is a WordPress image optimization plugin created by the folks behind WP Rocket, the best WordPress caching plugin. It allows you to easily optimize and convert images to WebP image format.

First thing you need to do is install and activate the Imagify plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Imagify page to configure plugin settings. From here. click on the ‘Create a Free API Key’ button to continue.

You’ll be asked to enter an business email address after that you can check your inbox for an email containing your API key. Copy and paste the key on plugin’s settings page and click on the Save Changes button.

Next, you need to scroll down to the Optimization section. There you need to check the options next to ‘Create webp versions of images’ and ‘Display images in webp format on the site’ options.

Below that, you can choose from two delivery methods to display WebP images in WordPress. The first one is .htaccess method, and the second one is by using <picture> tag.

The .htaccess method is faster, but it does not work if you are using a CDN service. <picture> tag method works with CDNs too, but it may break some WordPress themes.

You can choose either one that works well for your site. After that, click on the ‘Save & go to bulk optimizer’ button at the bottom.

This will bring you to Media » Bulk Optimization page. The plugin will automatically start optimizing all your WordPress images in the background.

If you have a lot of images, then this may take a while. Don’t worry, you can close the page and come back to it later because closing the page will not stop the image optimization process.

Testing Your WebP Images in WordPress

Once the optimization is done, you can visit a page or post containing a few images. Take your mouse over to an image and then right-click to select ‘Open image in new tab’.

This will open the image in a new browser tab, and you’ll be able to see .webp extension in the address bar.

Method 3. Using WebP Images in WordPress with SG Optimizer

This method is recommended if you are a SiteGround user.

SiteGround is one of the best WordPress hosting companies. They offer a free SG Optimizer plugin to their users which allows you to optimize your WordPress performance. It also includes the option to optimize WordPress images.

First, you need to install and activate the SG Optimizer plugin.

Upon activation, the plugin will add a new menu item to your admin sidebar labeled ‘SG Optimizer’. Clicking on it will take you to the plugin’s settings page.

From here you can turn on the caching settings if you want to use SiteGround’s built in caching system.

After that, you can switch to the Media Optimization tab and turn on the ‘Generate WebP Copies of New Images’ option.

Below that, you’ll see the option to ‘Bulk Generate WebP Files’. Clicking on it will start generating WebP copies for all image files in your WordPress media library.

Once finished, your WordPress site will start serving WebP images.

Testing WebP Images in SG Optimizer

To see if your website is serving WebP images, you need to open a page on your site with a few images.

After that, right click and select Inspect tool. This will open the developer console where you need to switch to the Network tab.

From here, click on the ‘img’ tab and then reload the page (CTRL+R on Windows and Command+R on Mac). As your website reloads, you will see all the images loaded in the developer console.

We hope this article helped you learn how to use WebP images in WordPress. You may also want to see our guide on how to create an email newsletter, and our comparison of the best business phone services for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use WebP Images in WordPress (3 Methods) appeared first on WPBeginner.