Easily create WordPress images in next-gen formats
We previously wrote about WordPress caching. In this post, we continue learning how to optimise our websites with WordPress images in next-gen formats.
When you run a google page speed test (which you really should be doing!), you may see the notice to “Serve images in next-gen formats”.
Typically on our web sites, we use PNG and JPG images. These are ok, but there are newer standards which produce smaller file sizes. This means fewer data travelling around the web and faster load times. Faster load times is one of the metrics Google and others use to determine your position in the search results.
A great new format for images is called WebP. It has wide support in the browsers and reduces file sizes by up to 34% over traditional JPG and PNG images, and this is ideally the format you should choose.
Problems when serving WordPress images in next-gen formats?
There is one potential problem and that is, that even while we said that there is widespread browser support, its not ubiquitous. I do know that right now safari browser on the iPhone 10 does not render WebP and you’ll get a blank space where the image should be. So, ideally what you want to do is have your traditional JPG / PNG image alongside your new WebP image and then decide which one to send to the browser. If that sounds hard then, yay, I can tell you with WPTachyon.com its EASY!
Serving either WebP and PNG/JPG
The solution is to have both formats in the images folder, and then have the webserver (Nginx) to serve the correct one, based on what the user’s browser is requesting. When you visit a web page, your web browser (Chrome/Firefox/IE/Edge, etc) sends a request to the webserver. Part of the request is the WHAT (I want this image). Another part is the HOW (I can accept it in this format).
For instance, if you look at the image above, it shows a request for an image which is a JPG image. But in the accept line, it says that it can accept image/webp. In other words, this web browser is telling the server that it can display WebP images, so if it’s got one it’s perfectly fine to send it.
The server can now send either the JPG, or if it has it, the WebP instead. As can be seen from the image below, the server sent back a WebP image instead of the JPG version:
In case you’re wondering, the origin JPG image is 237kB and the WebP format image is 132Kb. That’s a saving of about 44% for one image!
This sounds complicated, just send my WordPress images in next-gen formats for me
Ok, so that might have been a little technical if you’re a complete technophobe, but the good news is that with WPTachyon.com’s Optimised WordPress Web Hosting, we take care of this for you. We’ll install the amazing plugin WebP Express which handles the image conversion for us.
Our Nginx servers are set to intercept those requests for JPG/PNG images and to first see if the WebP format exists. If it does, the server sends it. That way WordPress is not even bothered with the decision, its done at server level making it very fast.
If the WebP version does not exist, then we pass that to WordPress and the WebP Express plugin creates a WebP image and stores that, so that the next time some requests it, it’s ready to be served by Nginx.