And faster, lighter, sharper, etc. With the release of WordPress 7.1 this week, one of the biggest things to impact images was the introduction of client-side media processing. In short, this means that the various thumbnails generated by WP are now generated directly in the browser, on your computer/device instead of on the server.
Besides all of the above claims, there are some other nice perks, like automatic in-browser conversion of HEIC images used by iPhones. WordPress already attempted to do that, but the conversion depends on server-side support, which is lacking on many hosts. It also unlocks the ability to convert animated GIFs to video blocks with auto-play to mimic the same look with smaller file sizes.
The Trade-off
For Better
All of this uses the established VIPS library, that is generally less CPU and memory intensive and thus a good candidate even for running on phones. Of course, the WP implementation puts some constraints on things so low-end devices aren’t attempting to scale down a 50MP image. In any case, the most obvious benefit to this is that you keep your web server doing what web servers are supposed to do. Which is serving web pages, rather than lighting your server on fire with that 50 MP image.
However, one of the largest benefits to this is that every WP install gets the same experience, rather than trying to figure out what version of ImageMagick is installed on any given server, and what formats it supports, etc. Everyone gets the same functionality, like the GIF to video conversion and HEIC support.
That said, client-side processing only happens in the block/post editor. If you go directly to the Media Library and add a new image there, it uses the traditional server-based workflow. This can be a good thing and a bad thing. It introduces new ways to create inconsistent behavior, but it also leaves a fall-back in case someone has issues with uploading an image in the editor.
Or Worse?
There aren’t many drawbacks, but in our testing, we did find a couple. As of this writing, indexed PNG images are not handled correctly. These are PNG images that have been specially encoded with a limited number of images stored in a palette or index. It’s a great way to make a PNG super small, but by default VIPS saves the resized/scaled versions in RGBA encoding, which is far less efficient. For example, scaling such a PNG from 2500px to 2048px can increase the file size more than 3x.
Fortunately, a fix is already in the works, and as alluded to before, you can simply upload such images directly to Media->Add New to work around the issue. We also added a setting in EWWW Image Optimizer that allows you to disable client-side processing entirely if you need to.
Another quirk is with animated GIF images. Never has core WP supported preserving animations in GIF thumbnails, but EWWW IO does support that. Unfortunately, the in-browser scaling pre-empts our ability to preserve the animations. It isn’t all bad though, as you get a new option for animated GIF images. So long as there is no transparency, you can convert a GIF upload to a Video block that automatically has looping and auto-play turned on. The video is generated by VIPS and uploaded alongside the original GIF, so you can toggle between the two block types at will.
More Better!
There are a lot more details in the official announcement, but I want to highlight two last things that the in-browser thumbnail generation does better. EWWW IO has a Sharpen Images setting that improves visual clarity of resized images. The client-side processing also bypasses that, but it seems that VIPS produces thumbs that are quite close in quality. At least I couldn’t see much difference, if any, but if you have a different experience, let us know! And of course, you can use the aforementioned workarounds to test the difference for yourself.
Lastly, just like title alluded to, one of the biggest wins is reliability. The VIPS module in WordPress isn’t subject to network/connectivity issues. You’ll see a nice little pending indicator as the thumbs are generated and uploaded to the server. It can also retry a failed request or even pause the upload until you come back online. If VIPS fails completely, for lack of memory, or whatever, it will automatically defer the task to the server and complete the upload/processing using the traditional ImageMagick pipeline.
Overall, I think this is a big step in the right direction, and I wouldn’t be surprised if this eventually becomes the standard image upload experience everywhere in WordPress. If you have any questions or comments, maybe something I missed, let me know!
