WebP images are often a quarter to a third smaller than comparable JPEGs, and Firefox now shows them. Safari does not, so serve WebP through the picture element with a JPEG fallback, once images are properly sized.

What changed yesterday

Firefox 65, released yesterday, can now display WebP, an image format Chrome has supported for years and Edge picked up in its latest version.

That leaves Safari, on Macs, iPhones and iPads, as the one major current browser that cannot.

For a business website, the change makes WebP worth a serious look. It also leaves the old problem in place, because a site that serves only WebP shows broken images to every iPhone.

The answer is to serve both formats and let each browser take the one it can use.

What WebP is

WebP is an image format developed by Google. It does the jobs of JPEG and PNG, photographs and graphics with transparent backgrounds, in noticeably smaller files.

A WebP photograph is often a quarter to a third smaller than a JPEG of similar quality. Across a page with a dozen images, that is a real difference in what a phone has to download.

Smaller pages load faster, especially on mobile data, and Google has counted page speed in mobile search rankings since last July.

Who can see it this year

The fifth catches people out. Apple requires every browser on the iPhone and iPad to use Safari's engine underneath, so Chrome on an iPhone cannot show WebP either.

Why the fallback is not optional

A WebP image sent to a browser that cannot read it simply does not appear. The visitor sees an empty box, or nothing at all, where the photograph should be.

On many small business sites, iPhones account for a large share of visits from phones. Any approach that does not reliably give them a JPEG is not an option.

So every WebP image needs a JPEG or PNG beside it, and a reliable way of sending each browser the right one.

How the picture element serves both

The picture element is the standard way to offer a choice of image files in a page's code, and current browsers have supported it for several years.

Inside it, the WebP version is listed first, marked as WebP, with the ordinary JPEG after it as the fallback. Each browser takes the first file it understands.

Chrome, Firefox and Edge take the WebP. Safari skips it and takes the JPEG. Internet Explorer 11, which does not know the picture element at all, simply shows the JPEG.

Nothing is guessed and nothing depends on the server, which is why it is the safest method.

The other method, and its trap

The alternative is to let the server decide. Browsers say which image formats they accept with every request, and the server can send WebP to those that list it and JPEG to the rest.

The trap is caching, which saves copies of pages and images to serve them faster. Set up carelessly, a cache can store the WebP version and hand it to the next visitor whatever their browser.

It can be configured to keep separate versions, and then it works. But the failure is invisible from a desktop running Chrome, which is where most checking happens.

Why WordPress needs help

WordPress does not accept WebP uploads in its media library by default. Try, and it refuses the file as a type that is not permitted.

So on a WordPress site, WebP arrives through a plugin, which makes a WebP copy of each JPEG you upload and then delivers it, either through picture elements or through server rules.

Sites built without WordPress can generate both versions as part of the build process, so every image is published in both formats from the start.

Either way, background images set in the theme's styles are a separate case. They are often the largest images on a page, and the picture element does not cover them.

A worked example

A tile showroom's website was mostly photographs: hundreds of installation shots in a gallery, each uploaded straight from a camera, several thousand pixels wide.

The gallery was slow to fill in on a phone, so a plugin was installed to create WebP copies, set to swap image addresses in the page for browsers that accept WebP.

It looked fine on the office computers. A week later, a customer mentioned that the gallery was all empty boxes on her iPhone.

The caching plugin had saved the page as built for the first visitor, who was using Chrome, and was serving that WebP version to everybody, Safari included.

The image plugin was switched to picture elements, so every browser receives the same page and chooses for itself.

The originals were also resized to the largest size the site displays, which turned out to be the bigger saving.

Resize before you convert

WebP is the second step, not the first.

A photograph 4,000 pixels wide shown in a space 800 pixels wide is five times wider than the space, and far heavier than it needs to be, whatever format it is saved in.

PageSpeed Insights lists the two problems separately, as properly size images and serve images in next-gen formats. Getting the size right usually saves more, and it helps every browser, Safari included.

The counter-case

WebP is not worth the trouble on every site.

A site with a handful of well-sized images has little to gain, and a site whose visitors are mostly on iPhones gains nothing for most of them this year.

It also doubles the number of image files on the server, which matters on plans with tight storage, and adds a plugin that needs maintaining like any other.

For an image-heavy site, though, WebP through the picture element, once the images are resized, is a sound improvement, as long as the JPEGs stay.

Before you switch it on

  1. Resize images to the size actually shown.
  2. Compress the JPEGs you keep.
  3. Choose picture elements over server swapping.
  4. Keep a JPEG for every WebP file.
  5. Check background images separately.
  6. Clear every cache after the change.
  7. Test on an iPhone, not just a desktop.

Step seven is the one that catches the failure that matters. Every mistake in a WebP setup shows up in Safari, and an office full of computers running Chrome will never see it.

The other change WordPress brought this winter is covered in WordPress 5 and the new editor on your site.

Frequently asked questions

What is the WebP image format?

An image format from Google that handles photographs and transparent graphics in smaller files. A WebP photograph is often a quarter to a third smaller than a comparable JPEG.

Which browsers can show WebP images?

Chrome, Edge in its current version, and Firefox from version 65, released this week. Safari cannot, and neither can any browser on an iPhone or iPad.

Why does Chrome on an iPhone not show WebP?

Because Apple requires every browser on the iPhone and iPad to use Safari's engine underneath, and that engine does not support WebP this year.

How does the picture element work?

It lists the WebP version first and a JPEG as the fallback. Each browser takes the first file it understands, so Safari and Internet Explorer get the JPEG.

Can WordPress handle WebP images?

Not on its own this year. It refuses WebP uploads, so a plugin creates WebP copies of your JPEGs and serves them, ideally through picture elements.

Should I resize images before converting them?

Yes. Resize first, to the largest size the site displays, then compress. Getting the size right usually saves more than the format, and it helps every browser, Safari included.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Gallery full of camera-sized photographs?

Send us the address. We will resize what is oversized and serve WebP safely, with JPEGs kept for Safari.

Start a Conversation