6 Smush Pro Image Compression Tips for WordPress
6 Smush Pro Image Compression Tips for WordPress
Your WordPress site needs to load in a flash just like the Flash since 40% of people leave slow sites. Fortunately, WP Smush Pro is the image-smushing super power you need to speed up your website without breaking a sweat.
WP Smush Pro compresses your images to reduce their file size and speed up your site. All without having to reduce the quality of your images.
But with these six little-known expert tips, which I picked up from the developers who work on the plugin, WP Smush Pro can give you even more image smushing powers for maximizing your WordPress site speed.
Even if you’re aware of some of these expert tips, they’re well worth the reminder so let’s jump right in.
Make Images Smushing Awesome
WP Smush Pro is the fastest, easiest and best-performing image compression plugin for WordPress. It squeezes every last byte from your images to save you the most space and bandwidth.
It’s also compatible with single and Multisite installations of WordPress as well as BuddyPress. In a Multisite network, you can choose to activate WP Smush Pro network-wide or on a site-by-site basis.
It’s also a tested, trusted and recommended plugin of the GoDaddy Pro Plugin Partner program so you can rest easy knowing your images are in good hands.
With WP Smush Pro, your images are compressed using our API and smushing servers so you don’t have to worry about taking up more of your bandwidth just to save some later. We take care of the extra bandwidth and you also don’t have to lose the quality of your images in the process.
Here are just some of the other smushing awesome features you get:
- Automated image compression
- Compress images in any folder
- Bulk compress images
- Optimize images up to 32 MB
- Intelligent multi-pass compression
- Super Smush by 2-10 times
- Best lossless compression, or
- Lossy smush without quality loss
- NextGEN Gallery compatible
- Also integrates with WP Retina 2X
- Real-time saved resource updates
- Backup uncompressed images
- Restore backed up images
- Preserve Image EXIF data
- HTTPS support
- And oodles more
WP Smush Pro has been proven to be the best of the best while also being easy to setup and use. To ensure a quality plugin, we have used the Theme Unit Test Data from WordPress.org to compare the top image compression plugins. The winner: WP Smush Pro.
Benchmarking Your WordPress Site
To really see first-hand how much your site’s speed can be improved by WP Smush Pro, you can test your site’s speed against Google’s standards before and after smushing with the free Google PageSpeed Insights tool.
When you visit the Google PageSpeed Insights tool, enter your site’s address and click Analyze.
After a few seconds, the test results should appear on the page.
You can click on the desktop tab to see your score for the desktop version of your site or stay on the phone tab to see how your site fairs on mobile devices.
Keep in mind that since WordPress sites are dynamic in most cases, it’s difficult to reach a 95/100 score let alone a perfect one in many cases. If you can get your site scoring at least 85, then you should consider your site score a success.
With your score, suggestions on how to increase your score are also listed in two sections: Should Fix and Consider Fixing.
The Should Fix suggestions are points you need to fix immediately to drastically improve your score and the Consider Fixing sections are other suggestions that are less immediate but should also be fixed.
You can also click on the Show how to fix links to get more details on what exactly needs to be adjusted to improve your score such as specific files and images that need to be optimized.
I created a test site and uploaded a few large, high-quality images to start out and included them in the site to see how much WP Smush Pro can do to save on space. When I ran the Google PageSpeed Insights test, one of the Should Fix suggestions was to compress images.
When I clicked the Show how to fix link for that suggestion, sure enough, the images I uploaded were listed. The test also let me know that the images could be compressed to save a total of one to three percent each.
That’s not saving much at all, but I knew WP Smush Pro could save the day and give my site more smushing powers, especially with some pro tips I had up my sleeves.
So, I set out to smush my images and squeeze out every. Last. Byte. Here’s how I did it and you can feel free to follow along with your own WordPress site.
Getting Started with WP Smush Pro
Before you start smushing images and making use of some expert tips, you need to install and activate the WP Smush Pro plugin. For details on how to do this, you can check out our guides Installing WordPress Plugins, Activating and Deactivating Plugins on a Per Site Basis and Activating WordPress Plugins Network Wide.
When you have the plugin activated, you can access the settings by going to Media > WP Smush in the admin dashboard.
As soon as you activate the plugin all images that you upload are smushed automatically, but you can change this in the settings along with other options. Just click the toggle buttons to turn features on or off. When the toggles are green, that means the option is enabled.
You can choose between a few key settings at the top of the page:
- Enable Network-wide settings – For Multisite networks. If disabled, sub-sites can override the individual Smush settings.
- Automatically Smush my images on upload – After enabling this default option, all images you start uploading are smushed automatically.
- Preserve Image EXIF data – Back by popular demand, you can enable this option for Smush to save photo data from your camera such as time and date. Keep in mind that if you turn this on, you won’t be able to save as many bytes or megabytes on your images and the file size is going to be larger.
- Resize original images – You can set a maximum image width and height so over-sized original images can be resized to save space and bandwidth.
- Super-smush my images – This option is for lossy image compression, but without losing on quality.
- Include my original full-size images – All images including the original copies are compressed.
- Make a copy of my original images – Images you upload are copied and then compressed. The original copies stay in your media library with the compressed versions.
- Convert PNG to JPEG (lossy) – You can optionally enable this setting to convert PNG files to JPEG if Smush detects that the change would save some of your server’s resources.
Keep in mind that if you choose to backup your original images, the total file size of the content in your media library nearly doubles in size since this setting creates an extra version of each of your images.
This means you should have two copies of each image you upload with this option enabled. If space is an issue on your server, you may not want this last option enabled.
When you’re done making your selections, click the Update Settings button.
To start smushing images, go to Media > WP Smush in your admin dashboard. For images that are already on your site, you can still run them through WP Smush Pro with the Smush in Bulk option underneath the settings.
Click on the Bulk Smush Now button to start smushing all the images you already have pre-loaded onto your site.
When the smushing is in progress, you can see how much you save for each image and when it has completed, you can see your total results.
The Google PageSpeed Insights tool suggested that the images I uploaded could only be compressed to save a total of five percent in storage space.
After I finished the bulk smush, I actually saved a total of 65.6 MB and 48.3%. So much for the five percent savings, Google!
You can also click the Re-Check Images button to manually scan all your images again to see if there’s any extra compressing that can be done. Also, when you update the settings, this scan is done automatically to make sure you can get the most out of WP Smush Pro.
Either way, images aren’t smushed automatically. A message just appears to let you know the images can be smushed more and you can choose to smush them all on the settings page or individually in your Media Library.
You can also smush your images directly in the Media Library by going to Media > Library in your admin dashboard.
In the grid view, click on the image you want to smush to open an inline pop-up with the Attachment Details and click the Smush Now! button to compress the image.
If your Media Library is in list view, you can click the Smush Now! button that appears beside your image under the WP Smush column on the right.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
WP Smush Pro also optimizes images that have already been compressed and saved for web. I was able to smush one such image and I saved 2.89 MB and 61.3% which nearly seems too good to be true, but that’s just how much smushing power this plugin dishes out on a regular basis.
For all the details on how to use WP Smush Pro, you can check out the Usage tab on the product page.
Quick Tip: You can reset all of WP Smush Pro’s settings and remove the statistics on your images by deactivating, then deleting the plugin. You can reinstall it afterwards to start fresh.
Now that you know how to use WP Smush Pro to give your site super powers, you can make use of these six little-known pro tips for maximizing your new found smushing powers.
Pro Tip #1: Eliminate Image Redundancies
When you upload one image to your site, WordPress automatically resizes it and creates a few copies in different sizes. For each image, a thumbnail, medium and large size image is created.
Certain plugins and themes such as ones with sliders, for example, also create resized copies on top of the ones WordPress creates.
This means that you can multiply the number of images listed in your Media Library by at least three. For example, if you have 100 images listed, counting the resized copies, you really have at least 300.
The more images you have, the more it drains your site’s resources. Eliminating as many of these extra copies as possible is a great way to help reduce the load on your server and WP Smush Pro can help you reduce these redundancies as well.
One of the coolest features of WP Smush Pro is that it doesn’t just smush each attachment image you upload, but it also compresses each additional image size that WordPress, and certain plugins and themes create. That means for each image that’s reported as smushed on the results page, you have really smushed an average of three to 10 images.
The best part is it’s all done automatically and you don’t need to do anything extra. All your images and resized copies are all compressed and optimized to save you as much space as possible.
You can see how many images you have for one attachment by clicking the Smush Stats link when viewing an image’s attachment details page in your Media Library.
Pro Tip #2: Break Barriers and Smush Everything
Much of the time, theme images go un-compressed and this can heavily weigh down your site. Google PageSpeed Insights often reports theme images as needing to be compressed and fixed immediately to improve your PageSpeed Insights score by several points.
WP Smush Pro can smush images in directories outside your media folder, which means you can smush your theme images right out of the box. Not only that, but you can smush any image in any directory of your site!
To get started, go to Media > WP Smush in your admin dashboard and click the Choose Directory button in the Directory Smush section.
A pop-up should open and you can select the folder where you want WP Smush Pro to search for images and compress the ones that are found.
When you select a directory, all its sub-folders are also searched for images to compress so there’s no need to go down the sub-directory rabbit hole and continue to click on sub-folder after sub-folder. Unless of course, that’s what you want to do.
Once you have chosen a directory, click on the Add Directory button.
When the pop-up has closed you can scroll back down to Directory Smush to see a list of images and sub-folders with images that need compressing.
If you see a label beside a directory that indicates a number of images that need compressing, you can click on it to see an exact list of the specific images that were found.
You can click the Choose Directory</strong button to re-select a different folder or if you’re ready to Smush those images that are outside your Media Library, you can go ahead and click the Bulk Smush button.
Depending on how many images need compressing, this may take a while, but once it’s done smushing, you should see a message to let you know:
All images for the selected directory are smushed and up to date. Awesome!
Once you see the message, you’re all set to continue applying the other tips below.
Pro Tip #3: Regenerate Your Thumbnails
Sometimes, an error occurs with the thumbnails for your uploaded images which prevents Smush from doing its thing. The data related to your images could be missing, corrupted or incomplete.
Another possible factor could be that Smush was unable to finish smushing due to an interruption such as your server’s PHP memory limit being reached, for instance.
In such cases, Smush can’t optimize and compress your images, but regenerating your thumbnails fixes the issue. You can use the Regenerate Thumbnails plugin to automate this process.
Pro Tip #4: Eliminate Performance Bottlenecks
If you upload larger sized images to add them to posts, pages, themes, sliders and the like, but a plugin or theme’s code is set up to regenerate that image in a much smaller size upon loading in a visitor’s browser, you’re creating a performance bottleneck.
It’s double the work for your server with little payoff.
To remedy this, you should upload images with the exact sizes that your plugins and themes intend to use on your site. Resize your images before you upload them or use the WordPress editor to resize your images if you have already uploaded them.
Alternatively, you can use WP Smush Pro to resize your largest images by enabling the Resize original images option in the settings. You can also choose to use the Regenerate Thumbnails plugin for the inherent WordPress images sizes.
Pro Tip #5: Choose the Optimal Image Size
On the same note, when you’re adding an image to a post, page, slider or anywhere else on your site, choose the optimal image size.
For example, after clicking the Add Media button in the post editor and either uploading or selecting an image, you can choose the image size you want to use on the right-hand side of the pop-up.
Choosing an unnecessarily large image makes your server work harder to load your images and it uses up more of its resources.
If you don’t need to insert a large image, choosing a smaller size is optimal since its file size would be smaller, which means your server would have less to load for your visitors.
Pro Tip #6: Customize the Default Image Sizes
Resizing the images in your theme so they’re smaller helps reduce the load on your server. It may not always be practical depending on what your image needs are for your site, but if you can spare a few dozen pixels, it’s well worth it.
You can change the image copy sizes WordPress generates by going to Settings > Media and changing the values to sizes that are smaller and more reasonable.
Once you chose your sizes, click the Save Changes button. New images you upload to your Media Library should be copied with the sizes you indicated.
Great, but what about all the images you already uploaded? You have two options: You can use WP Smush Pro to resize your largest images by enabling the Resize original images option on the WP Smush settings page or you can use the free Regenerate Thumbnails plugin.
Once you have smushed your images manually or automatically, you might want to go back to the Google PageSpeed Insights test and analyze your site’s progress again to see if your score has improved.
By now all your images have been fully compressed and optimized with the WP Smush Pro plugin, including images that aren’t in the Media Library and you have applied some or all of the pro tips to maximize your image optimization and site speed.
If you would like to try WP Smush Pro, you can install and activate the free version in the WordPress plugin repository to give it a test drive. When you’re ready to go Pro, you can sign up for a free trial and get access to everything WP Smush Pro and WPMU DEV has to offer.
While you can now see an increase in your page speed, there’s still more you can do to fully optimize your site and speed it up even more.
You can check out our Hummingbird plugin to get your site fully optimized with file compression and minification as well as caching to get your site loading even faster.