The Power of WebP
I've been building rod.photo to showcase my photography for quite some time now. Recently I've switched to the "new" WebP image format.
A project I've been working on for a while now is my photography website rod.photo.
I built rod.photo for a couple of reasons:
- Over the past few years, I've been able to visit some fantastic locations and capture some great photos of them (mostly from the balcony of a cruise ship). Sharing photos that are 6000px by 4000px on an iPhone doesn't do the photos much justice. So I wanted somewhere to display my photos in the best quality, handles metadata scrubbing, loads quickly, and displays photos as I want it to.
- I enjoy designing and building web UI. I do a lot of this as part of my day job, so continuing when I'm away from work feels natural (and rather satisfying).
- I wanted a bit of a challenge at the weekend.
Where it all started
When I began this project, I had no idea about the WEBP format or much about images loading on the web in general. Rather naively I was hoping for a fairly simple "throw JPGs on to a server and be done". That, however, turned out not to be the case.
Anyone who's worked with web content before knows that images take time to load, and the larger the image, the more time it takes to load. For my use case, I wanted to load 6000px by 4000px JPG images that came directly from my Canon DSLR. Below you can find an example of the load times I was facing.
The above example shows the loading time of a single image, on a simulated "Fast 4G" mobile connection, bear in mind, this is loading one image.
So we've got two main problems here:
- The file size - This example is one of the smaller photos at 7.7MB, not a great start, however, photos can end up being >20MB.
- The loading time - Loading just one image takes a whopping 7.8 seconds.
This idea (of simply serving the camera's JPGs) clearly didn't scale. It was at this point I started looking at some of the prebuilt (self-hosted) photography portfolio websites.
I probably explored a good number of these (including the usuals such as WordPress, Drupal, etc.), now, there is absolutely nothing wrong with using one of the examples above, they are both excellent platforms, however, I've had some poor experiences in the past with WordPress (both with its load speed and overall security), so even after giving it another try, I didn't find anything.
Enter WebP
If you've never heard of WebP before, I absolutely implore you to look into it.
As a brief overview, WebP was developed by Google, starting back in 2010, with the first public stable version coming along in 2018 (so relatively speaking, it’s quite a new format), the name is derived from "Web Picture", and it was built primarily for displaying high quality images on the web.
The format supports all the usual specs you might expect (alpha layer transparency, animated images), and you can choose to either store images with lossless or lossy compression.
According to a Google study in 2011, WebP has 25-34% better compression when compared to JPEG images, and a 45% reduction in size compared to a standard PNG file.
Improvements thanks to WebP
WebP was almost a bolt from the blue for me, I'd never worked with the format before, but after some looking around, I found it was incredibly simple to implement (its supported natively by PHP Imagick), and within a few minutes I'd written a Laravel Job to convert uploaded images from JPG into WebP.
After a few tests, I was happy this was a workable solution, so proceeded to build the rest of the site, and with a few more Laravel Jobs in place (to scrub metadata for me, detect and tag portrait photos, and generate some smaller WebP thumbnails), I finally had something I was happy with.
Lets look at loading times once again. As before we are loading a single 6000 by 4000px image, with a simulated "Fast 4G" connection.
The overall size of the file has been, reduced quite significantly from 17MB to just under 1MB (983kB), and we've got the loading time under 2 seconds.
By web standards, 1.1 seconds is still very slow, however, bear in mind, the thumbnail images that load with the page are separate from the main image, and are generated with a ratio corrected max size of 1200 by 1200px. The full size images only load when someone clicks the image and it loads in the lightbox.
Final Thoughts
While I'm sure there's a lot more I can still do to reduce image sizes and loading times, switching to WebP has significantly improved the experience of building my photography website, and I'll be using the format as much as possible going forward in my future projects.
References
Contributors to Wikimedia projects