Image optimisation and WebP

Images are often the heaviest part of a page. WebP is an image format made by Google that usually keeps the same look in fewer bytes than JPEG or PNG, and current browsers display it without trouble. But changing format is only one of three steps. The order that pays off is: right size, compression, format.

Which format for what

Format Good for Worth knowing
JPEG Photographs. Universal. No transparency.
PNG Graphics with transparency, screenshots. Lossless, so it is heavy for photographs.
WebP Photographs and graphics, with or without transparency. WordPress accepts it on upload. Some e-mail programs do not display it.
SVG Logos and icons. Vector drawing: sharp at any size and almost weightless.

What to do, in order

1 Cut the dimensions before you upload. A phone photo has far more pixels than any screen will show. Resize it to the largest size the site will actually display it at. It is usually the biggest saving and the cheapest.
2 Compress. Browser tools such as Squoosh (from Google Chrome Labs) let you see the result before you download and let you pick WebP. On the command line, on a computer of your own, there is cwebp: cwebp photo.jpg -o photo.webp.
3 Convert what is already on the site. An image optimisation plugin does this in bulk. LiteSpeed Cache has an “Image Optimization” tab, but it works through an outside service (QUIC.cloud), under that service’s rules. Plugins from other authors do the same; read the terms of any of them before handing over your images.
4 Confirm WebP is really being served. In the browser, F12, Network tab, filter by “Img”, click an image and read the content type: it should say image/webp.
5 Keep the originals. Store the source images somewhere of your own. If you ever change plugin or format, going back to the source beats recompressing an image that was already compressed.
Converting is not the same as serving. If the theme or page builder writes the .jpg address straight into the page, the new .webp file is never used unless the plugin rewrites the address. That is why the confirmation step is not optional. And in an e-mail marketing message, stay with JPEG or PNG: not every mail program displays WebP.
Uploads failing with “HTTP error”? It can be an image too large for PHP’s memory, or a missing image library. See the HTTP error on image uploads and switching Imagick on in PHP.
WordPress already defers off-screen images with the loading="lazy" attribute. But the big image at the top of the page should not be deferred: it is often the one that decides how fast the page feels to a visitor. See Core Web Vitals in plain words. For shops there is also product images for a fast shop.

Converted your images and the site did not improve, or you ended up with broken pictures? Tell us the page and we will look at what the server delivers.

Open a support ticket

SEE ALSO

Product images for a fast shop

Core Web Vitals in plain words

Measuring your site speed

RECOMMENDED PRODUCT

Web hosting with cPanel

Domain and SSL included, daily backups and the panel you already know. from $6.59/mo (3-year plan, with coupon)

See plans
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to monitor your site performance in cPanel cPanel keeps a record of everything that happens on your hosting - who visited, how much traffic you used, which errors...
The site is slow: what actually makes a difference «The site is slow» means different things depending on who says it: the first page takes ages to appear, the admin panel...
Cloudflare: when it helps, how to switch it on, and the cache that fools you Cloudflare sits in front of your site: visitors reach it first, and it comes to us for what it needs. That brings three...
The site is slow: what to measure before you change plan «The site is slow, I think I need a bigger plan.» It is one of the messages we get most, and most of the time the bigger...
What a CDN is, and when it makes a difference (and when it does not) A CDN (content delivery network) is a set of machines spread around the world that keep copies of your site and hand the...
Core Web Vitals in plain words Core Web Vitals are three measurements Google uses to describe how a page feels to the person visiting it: whether it sh...