reSmush.it image style optimizer
Image styles in Drupal are excellent to downsize your high quality original images to dimensions that are actually needed to show on various pages of your site. But even the most fittingly-sized images are still heavier in terms of file size than they could be. There are many clever techniques that can identify and filter out those parts of image files that have no influence on how the image looks to the human eye.
reSmush.it is a popular image optimization API (billions of images served) that seamlessly replaced the excellent but now defunct Yahoo Smush.it web service. On the background the web service uses well-established algorithms such as PNGQuant, JPEGOptim, and OptiPNG. reSmush.it optimizes all image formats supported by Drupal (PNG, JPG, GIF) and even several more. The service is free up to 5MB per file, which is perfectly OK for most cases, since optimization usually happens after the image is resized (see more under Installation below).
There are other optimization systems, such as Kraken, TinyPNG, but most of them are subscription-based. There are infrastructure solutions as well, such as Google Pagespeed module.
The main advantages of the reSmush.it module include:
- Image optimization as an image style effect. This module optimizes only the image styles — it will never touch your original images (which is the case in some other modules, e.g. see here).
- Plenty of statistical and debugging information.
- Images that are to be optimized do not need to be publicly accessible. The originals are sent to reSmush.it using POST requests. reSmush.it does not need to be able to download the images from your site.
- Focus only on one image optimization backend, making it more specialized and yet lighter than other modules. This module does one thing and it does it right.
- No dependencies, libraries, 3rd party accounts to set up. The web service is free of charge.
- Improves overal site quality measurable using tools such as Webpagetest.org, Yellowlab.tools, or Google Pagespeed.
There are few other modules that use reSmush.it as their image optimization backend but they tend to only optimize on image upload and not per image style (e.g. ImageAPI Optimize).
- Download reSmush.it image style optimizer and enable it like any other module. Apart from Drupal core (the Image module) it does not have any dependencies or libraries.
- Go to admin/config/media/image-styles and choose an image style you wish to optimize. Select the reSmush.it, click "Add", then save by clicking "Update style".
- TIP: Make sure the reSmush.it effect is at the end of (=below) the other effects. In particular it is important that it happens after resizing effects, which makes it pretty much sure the image size will be below the reSmush.it API free limit of 5MB.
The configuration page at admin/config/media/resmushit provides some optional settings, such as the possibility to show debug information in Watchdog, configuration of a timeout for the web service, and the maximum size of the operational log.
reSmush.it image style optimizer provides a luxurious dashboard page at admin/config/media/resmushit/dashboard full of relevant additional data from the module, such as the image styles that are being optimized, a list of recently optimized images (with path, status, size before and after, etc.), or a count of all successful image optimization operations.
How to use
Go to a page that displays an image using an image style where you included the reSmush.it effect. If the derivative image did not exits, it will be created now (if you want to be sure it gets created anew, clear image caches, e.g. using drush image-flush). Then go to the module's dashboard where you should see that image listed among the recently optimized ones, complete with the size reduction percentage!
Nobody's perfect, and the strife for perfection is even harder for those doing it for free. If you suspect reSmush.it did not optimize your image, go to the dashboard to check it up. If you see an error, it's possible the web service was briefly unavailable, or that it was slower than limits defined by this module and timed out. One thing you can do is to increase the timeout limit on the settings page.
For more documentation and live examples, see the demo page.
This module will be ported to Drupal 8. Help welcome!
Known major integrators
- Encyclopedia of World Problems and Human Potential
- Contact the maintainer to propose your site for this list!
Let's make this module better together! Ideas, patches and inspired co-maintainers welcome!