When you deal with images on a regular base you have experienced difficulties one way or the other. It can be that you have lot’s of image sizes, you want smaller images, dealing with animated images etc. Lot’s of cases where WordPress doesn’t work as good as it should have.
The thing here is that you can’t always blame WordPress for this. Like resizing animated gifs in GD is just a pain to do, so it’s better off as a plugin. But also WordPress is just to slow to do resizing on the fly. This is exactly the reason why image manipulation services are out there. You move the responsibility over to another service that has the only purpose for serving images. No need to load WordPress or even PHP.
Photon
In Jetpack there is a feature called Photon, this will act as the external image manipulation service and CDN for your images. It will automatically replaces the image urls to the Photon one. It has the features you expected including using filters, webp support, smoothing, zoom.
It’s a great feature but you do need to use Jetpack because of it’s policy. Something a lot of people aren’t a fan of including myself. However the code is available online so there is a way you could use it without the need of Jetpack. The biggest problem I have with it that it’s using PHP for the manipulation without any caching in place. Also if you installed certain software in a different place, you are forced to change the Photon file.
Thumbor
There are better projects and one of those is Thumbor. It has the same same features as Photon and way more. It is a webservice build in phyton with lot’s of cool features. The best thing is that it’s a total solution from webserver to caching the result. You can store images on disk but also in object cache like Redis. It’s up to you to decide how you want to configure it which can change depending on your use case.
Setting it up
Installing Thumbor can be a bit complicated since most likely a lot of additional software on your server would be missing. The GitHub repository helped out a lot though. For Ubuntu there is also a repository you can use to make the whole installation smoother. See for more the Installation wiki entry.
After I installed Thumbor and had it working I looked at how to have it running more stable. Another wiki entry is about hosting and showed how you run multiple instances for a more stable environment. I used their recommendation Supervisor to do so. I did decided to only have one configuration file for all instances. Nginx is being used to loadbalancer the traffic to the different ports.
Optimizers
Thumbor has a plugin like infrastructure where you can easily extend it by adding new optimizers for example. Currently I’m using jpegtran and pngquant to make images smaller. In the config file you specify the optimizers and the location of the specific server software. After you restarted thumbor the new added optimizers will be used. For more information check out the wiki entry.
Smart cropping
Smart cropping is something lot’s of WordPress users are asking for. In general it means face detection. So instead of a center crop you suddenly get the right crop of a photo with your face on. Specially when you also use zoom for mobile, then this is a must functionality.
It also has feature detection. According to OpenCV documentation, this algorithm finds “important” corners in the image. With this enabled also pictures that has no faces getter better crops. This by detecting what the images is all about.
To use smart crop, you do need to have OpenCV installed and select the detectors you want to use in the config file. This was really easy to do and got it up and running in minutes.
CDN
To make everything ready I’m using MaxCDN to speed things up for everyone. I could optimize Thumbor to have faster delivery of images but it’s not needed when the CDN does that for me. The only thing you need to be careful with is that the moment you use webp that you need to ask MaxCDN to enable that support for that zone. This because the url is the same and it will break when the webp image is cached but the browser has no support for it.
More
For more information check out their GitHub Wiki which has currently 62 entries. So enough things to read and see how cool Thumbor is. If you want to give it a test run on your site then check out thumborize.me. You will see how much
Thumbor WordPress plugin
Currently I’m working on a WordPress plugin. You can find it on https://github.com/CodeKitchenBV/Thumbor. It uses the PHP library Phumbor to build up the URLS. The plugin currently has support for resizing/cropping. It also has already support for responsive images and smart crop is enabled by default. Obvious this only works when it has been configured but it shouldn’t effect the handling.
I would like to merge it together with my WP_Image class or at least a way to also support filters for images. Like in Improved Image Editor I also added a method you can specify more information then add_image_size can. So you can say this image size has a certain zoom, filter etc. So I’m looking in how I can do this in a good way.
Improvements in WordPress core
The question now is should WordPress by itself already do some of these things. If you look into what makes Thumbor great then you would say no. At this moment WordPress is still pretty stupid if it comes to dealing with custom image sizes. It doesn’t generate a size when it doesn’t exist. So there is room for improvements. But I don’t believe that WordPress ever should do generation on the fly including invalidation/deletion of old images.
Specially if we talk about just too late generation where you skip the first request. For things like this you need a task runner. With a kind of broken cron job of WordPress this would be a no go. On the moment dealing with images is that important then having a second server running for dealing with images would be the way to go. Let that do the expensive requests while the webserver(s) is for serving pages. In the end that it’s why it’s there.