The Internet is highly visual, with images featuring prominently on most websites. At the same time, users are demanding sites that load faster and faster.
What to do?
The answer isn’t to reduce the number of images on your website, but to optimize the images that you decide to use.
Whether that means making them smaller in size, removing any excess data that might be included in the image (such as the EXIF data cameras automatically add), or compressing them so that the file sizes become smaller (without a noticeable loss in quality), image optimization makes it so that you can have your cake and eat it too.
However, all of this is work. But, in the WordPress ecosystem, there are plugins for almost everything, and image optimization is no exception. One such plugin we want to bring to your attention is Smush Pro (and for those who are interested in a free version, Smush Image Compression and Optimization).
What is Smush Pro?
Smush Image Compression and Optimization, one of the most popular image compression and optimization plugins for WordPress users.
Not only is it capable of reducing the size of your image files while minimizing any resulting distortion, it comes with tools to determine which files are problematic with regards to load time, the ability to compress images in any directory, and built-in lazy load, which is the practice of serving only the images that can be viewed and delaying ones further down on the page.
That said, Smush Image Compression and Optimization is free, and as such, comes with limitations (including limiting users to files that are no larger than 1MB). For serious users, the developers, WPMU DEV, offers Smush Pro — you can work with photos up to 32 MB, there’s a one-click bulk compression feature, the included CDN allows you to serve images from 45 locations around the world, and more.
How to Optimize Images with Smush Pro
Before we begin, we want to note that you can try Smush Pro free for 30 days. You will need to sign up for a WPMU DEV subscription to do so, since part of the product is accessing the appropriate APIs to access the servers that provide the optimization and compression services (one of the upsides of this is that your servers are not the ones handling the workload).
Step 1: Install Smush Pro
Those with active memberships to WPMU DEV (which is necessary for access to Smush Pro) have access to the WPMU DEV Dashboard, whose Plugin Manager can be used to install Smush Pro with just one click.
Image Source: WPMU DEV
Step 2: Set Up Smush
Once you’ve installed Smush Pro, you should see an item for it added to the left-hand navigation bar of your WordPress Dashboard. Click on the link to start the setup process. You will be asked whether you want automatic compression on all images that you upload, EXIF data on images should be removed, lazy load enabled, and your data provided to the WPMU DEV team.
Once you set up the plugin, it will automatically compress your images and present you the results on the Smush Dashboard. You do not have to do anything else!
Image Source: WPMU DEV
If you opt to use the free version of Smush, know that there will be differences in the performance of the plugin:
In our experience, Smush tells us that we would have achieved an additional savings of 29.1 KB with the more powerful tools available to PRO users.
Step 3: Configure the Remaining Smush Features
Smush is more than just resizing images, and you can access its additional features via the provided Dashboard.
- Bulk Smush allows you, with one click, to apply all of your pre-determined image settings to an uncompressed image. You’ll get a notification from Smush that there are uncompressed images in your Media Library, and if you choose, you can click Bulk Smush Now to optimize and compress them all at once. However, given the automated nature of Smush, this is likely to be something you use when you initially get the plugin installed and setup.
- Directory Smush allows you to set up folders (other than your uploads/Media directory) where, if you add images, Smush automatically optimizes them
- Integrations is where you indicate if you want Smush to work with other tools (e.g., adding a manual Smush button to the Gutenberg blocks, if you’re using this WordPress editor)
- Lazy Load is the process of delaying image loading until absolutely necessary; Smush allows you to choose the specific behavior of this process (e.g., which files get lazy loaded)
- CDN is where you would activate and configure your use of the CDN, which caches images and serves them from the global proxy server closest to your viewer to improve page performance
- Tools is where you would enable Image Resize Detection (where Smush tells you if the image size is incorrect for its container size). This is also where you would go to restore your image thumbnails if you make a mistake
- Settings is where you would change the behavior and appearance of Smush from an administrative standpoint
As you can see, most of the work involved in using Smush (either the paid or free versions) is during the setup phases. Once done, you can relax, knowing that the plugin will automatically handle your image compression and optimization needs.
Wrapping Up
Internet users are demanding fast page load times, and if the website is too slow, they are likely to navigate away. At the same time, the Internet is a highly visual place and websites that do well will likely feature a number of expensive resources like images.
To that end, it is important for those maintaining websites to optimize their images by compressing them, stripping them of excess data (e.g., EXIF data that cameras automatically include with images), and making sure that the images are correctly sized.
There is little need to do these things manually, however. With a plugin like Smush, you can automate much of this work, knowing that your images will be adjusted to ensure that your website performs as well as possible.
