Are you Losing Traffic Because of the Pictures on Your Website?

Big Picture View

Speed is king and pictures slow you down. At least, it slows down the loading of your webpage. This can be a big problem since that means your website is going to show up lower in search results (Google and others include page load speed as a major component of their rankings). It also means visitors to your site may get frustrated with your site and leave before getting any value from their visit (and that’s the reason Google cares about page load speed).

If you’ve tried to understand why your website is slow, you’ve probably used Google’s PageSpeed Insights to determine what to fix. If you’ve done that, it’s pretty likely you’ve encountered the suggestion of using images that are served using Next-Gen formats.

What are Next-Gen Formats?

Basically, Next-Gen formats refer to a new set of image compression formats that Google developed to reduce the size of images without noticeably impacting visual resolution. They based a format called “WebP” off of a video format they developed called “WebM.”

Here’s how Google defines WebP:

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

WordPress Plugins

Since Google (and others) are so focused on page load speeds when determining which sites to show in search results, how can you get your WordPress site to rank higher? The answer is, you have a lot of options.

There are a lot of plugins that work perform the basic functions of:

1. Converting images to the new WebP format
2. Serving up the new images instead of the original files

That doesn’t mean they are all the same. In fact, some of them may run into problems on your hosting platform. It isn’t the fault of the plugin, but it can still be frustrating.

“Where Did We Go Wrong?”

One of the challenging things about all of the options for WebP implementations is that many of the methods for implementing substitutions of images involve server configurations. Making the changes at the server configuration level can have some performance benefits, for sure. Unfortunately, there can be some challenges involved there. First off, many sites are hosted on platforms that may not make server level configurations accessible to the website managers. Secondly, it may be pretty intimidating to make those changes (although most of the plugins try to assist in this by making those updates automatically for you).

There are also options for implementing WebP images that don’t require server configuration changes. It means some additional work under the hood of your site to serve up images using the new format that won’t get hung up on files not being available or browsers that aren’t yet compliant for the new format. The latter of these is less of a concern now that the last browser lacking compatibility (Internet Explorer) is no longer supported by Microsoft (their replacement browser, Edge has a number of tools to work with those remaining applications that required IE, so it theoretically is no longer needed at all).

Either way, the unfortunate result is that many people get frustrated that the plugins “don’t work” or seem too complicated and “not worth the time.”

Hopefully this chart will help you decide which plugin works best for you:

	WebP Express	WP Smush	WebP Converter for Media	Images to WebP	WP Compress
Converts Images In Bulk to .webp format
Converts images to the Same file location as the original
Can configure location where converted files are stored
Serves up .webp images locally
Serves .webp background-images (often requires server configuration changes to work)
Serves up .webp images via CDN
Works without Server Configuration
Cost	Free	Pro Plan required starting at $5.95 per month	Free - additional features available with a "Pro" version.	Free	Free with usage limits CDN limits likely to require at least a starter plan of $5 per month.

Just a few notes regarding the table above:

• If a plugin cannot operate without using server configuration changes and you are unable to make those modifications because your hosting service won’t allow it, using the plugin’s CDN options should still work for you.
• Many of the plugins also help to optimize the original images by managing the delivery of “right-sized” images with have been re-sized to only deliver the full-sized image to large screens. Phones receive smaller images to same bandwidth.
• As long as .webp file versions are saved to the same folder as the original OR the plugin allows you to configure this, you should not encounter and any server incompatibilities regardless of hosting platform. You may need to configure the plugin to use an accessible folder, however.

Why We Built WebP Support into Our Theme

With so many plugin options available, why would we want to build this kind of function into our theme?

Well, for one, this is becoming an important standard in websites. When something is so key to how well a site performs, we didn’t think it should be an “add-on” plugin but should just be available. We also found that a number of plugins omitted or didn’t consistently manage substituting WebP for the original image when the image was a background-image in things like page banners and so on. Our theme even has a few built-in elements to display images with greater responsive control that relies on using making the image a background-image. This was hurting performance since banner images tend to be the biggest in size (no one wants a fuzzy image covering the full width of their screen). Lastly, the tools to convert images and the available hooks in WordPress Core code make solving these issues a relatively easy thing to do.

So we decided to offer our own solution using the basic hooks and a little bit of logic to make WordPress behave in a WebP world. We wanted to make sure the solution worked on all server platforms and was extremely easy to implement. Baking it right into our Harvest theme and including a tool to convert images with ease just made sense. While this may not include all of the features offered by some of the image optimization plugins, it can be a quick and easy alternative when you

Have you implemented WebP images into your website? Have you wanted to but never started? What were / are the challenges your face(d)? Let us know about them in the comments!