Optimizing your images manually would involve a lot of resizing, a fair bit of coding, and heaps of time. Luckily, Smush does all the hard work for you and plenty more besides, all of which you will find covered in this guide to help you get the most out of the plugin.
For example, while Smush may be best-known for compressing images (without losing quality), it can also help defer your offscreen images with its lazy-load feature, convert your images to next-gen formats (WebP), and serve your images from our super-fast CDN available with Smush Pro.
Luckily, you don’t need to dedicate much time or effort to your images when you have Smush installed. Most features can be activated with one click.
Whether you’re a new user or just hoping to uncover some cool features you might have missed, this guide will help you get the most out of this plugin.
We look at how to:
- Smush All Your Images in Bulk
- Automatically Compress New Uploads
- Super Or Ultra-Smush For Double the Compression
- Display Your Full Size Images
- Convert Your PNGs to JPEGs
- Smush From the Media Library
- Optimize Directory Images
- Lazy Load Your Images For a Boost of Speed
- Utilize Smush’s CDN
- Serve the Correct Image Sizes
- Convert Your Images to Next-Gen Formats
- Save Time With Automatic Smush Configs
- Integrate With Popular WordPress Tools
So without further ado, here’s how to get the most out of Smush:
1. Smush All Your Images in Bulk
When you first install Smush, chances are you’ll have a backlog of images that need your attention.
The Bulk Smush feature scans your site for any images that would benefit from being compressed.
All you have to do is click the button – Smush does all the hard work for you and lets you know when the job is complete.
If you have a lot of images to optimize, you’re also free to leave the plugin completely and come back to it, Smush will continue to compress your images in the background and you’ll be notified once the process is complete.
But rest assured, no matter how many images you have to optimize, thanks to built-in features like parallel image processing, which gives you 8x the normal processing speed, your images are in the best and fastest hands.
You can exclude certain image sizes from Bulk Smush if required. However, as Smush compresses without sacrificing quality, it may be beneficial to smush them all.
One other feature worth noting is that when you click the Re-Check Images button, Smush performs an automatic scan of your Media Library to check if new images have been added since the last bulk smush.
2. Automatically Compress New Uploads
Once you have used the Bulk Smush feature to catch up on your backlog of image compressing, you will seldom need to use it again.
This is because of the handy Automatic Compression feature. If you enable this, Smush will compress images as soon as you upload them to your site.
Smush also has a generous maximum file size limit of 256MB per image, so if you have any gigantic images to be uploaded, they’ll automatically be compressed and optimized for you too.
3. Super Or Ultra-Smush For More Compression
If your main focus is on your site’s speed, you may want to take image compression a step further.
Super-Smush offers twice the compression of regular smushing by stripping out every bit of unneeded data, without reducing the quality of your images.
Or, if you want to really amp up your compression powers, try the Ultra-Smush option for an impressive 5x compression on top of the already amazing Super-Smush. Ultra is only available with Smush Pro, but completely worth the upgrade if having the fastest possible sites is a priority for you.
New Ultra Smush delivers 5x greater image compression than Super Smush!
If you don’t want to take it as far as Super or Ultra-Smush, you can instead strip the unnecessary metadata from your images, leaving only what is needed for SEO purposes. Photos often store camera settings in the file such as focal length, date, time and location – removing this will reduce your file size.
If you’re a photographer, you might want to keep this information, but it serves little purpose on most sites so is generally safe to remove.
4. Display Your Full Size Images
If you upload an image that is larger than 2560px in either width or height, WordPress will automatically scale it down to generate a ‘web-optimized’ maximum image size.
If you are purposefully adding larger images and want to override this, you can use the image resizing option.
Bear in mind that your theme may also have its own maximum image size – you will need to check this before enabling this feature.
Want to disable automatic resizing of images altogether? You can enable Disable scaled images. This means scaled versions of images will not be generated, and only your original uploaded images will be kept.
If you are uploading full-sized images, you can also choose whether or not these will be included in Bulk Smush.
Make sure you enable the Backup original images selection if you want to store a copy of all your full-size images, in case you ever wanted to return them to their pre-smushed forms.
Learn more about how WordPress handles images by checking out this blog post.
5. Convert Your PNGs to JPEGs
There are some circumstances where one of these two file types is more suitable than the other. However, if your main concerns for your site are memory usage and speed, then using JPEGs instead of PNGs should be beneficial.
If you upload your images as PNGs, Smush can check to see whether converting them to JPEGs will reduce the file size.
You can, of course, make the same conversion outside of WordPress. However, using Smush removes the hassle and converts all your files in one swoop.
If you would prefer to select individual images for compression, look no further than your own media library.
Here, you will find a new column labelled ‘Smush’.
If you have auto-compression turned off, any photos which you upload should be ready to smush from within your media library.
You can smush your images individually, or alternatively single out images to be ignored from bulk smushing.
7. Optimize Directory Images
While your uploads folder is typically the main folder where images are found, they may also reside elsewhere in your directory.
For example, plugins that create their own image copies may store those images in the plugins folder.
In cases like this, the Directory Smush feature helps you easily identify and compress images stored outside the uploads folder.
Simply choose which directories and subdirectories you want to scan, and Smush will optimize and compress all of the images in bulk, it’s that easy.
FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
8. Lazy Load Your Images For a Boost of Speed
If you have pages with a lot of images, displaying them all at once can put a lot of pressure on the server.
Deferring your off-screen images is a good way to allow the server to concentrate on loading the elements of your site above the fold so that your visitor can get stuck straight in.
If there are certain types of images or certain output locations you wish to exclude from lazy loading, you can easily add them here.
You can also exclude certain various post types, specific URLs, and CSS classes and IDs.
Basically, if you want to enable lazy loading, you can fine-tune exactly how and where it is enabled.
Once you have chosen which images will lazy load, you can then decide how you want the pre-loading images to appear.
9. Utilize Smush’s CDN
The closer you are to the server that is providing your content, the faster it will load. A CDN (Content Delivery Network) is a series of servers which are spread around the globe, and when a browser makes the HTTP request, the content is served from the closest server to its location.
Smush Pro boasts a 121-point CDN, with a few extra tricks up its sleeve. It can automatically resize your images as well as convert them to Google’s own next-gen format, WebP.
Check out the video below to learn more about our CDN.
If all you want is for your images to be served from the CDN, you do not need to delve any further into these.
However, there are a few useful tools that can be of benefit to your site, so they are worth checking out.
You can activate and configure the Smush Pro Image CDN right from your dashboard.
This will store and serve copies of all your JPG, PNG, and Gif images from the Smush edge servers – drastically improving speed.
Don’t Leave Your Background Images Out
As standard, only images used on your posts and pages will be served through the CDN.
If you want your background image to be served from the same speedy CDN as the rest of your images, Smush has you covered.
You will need to ensure that your background images are properly declared with CSS in your theme’s files.
10. Serve the Correct Image Sizes
Ideally, you should never serve an image larger than what will be displayed on the user’s screen. Using original or full-size images when a smaller image will do makes your pages take longer to load while your browser waits for the images to render.
Smush’s CDN houses a handy feature to resize your image to fit the container, without needing to touch a line of code.
11. Convert Your Images to Next-Gen Formats
JPEG 2000, JPEG XR, and WebP are modern image formats with superior compression capabilities. This means they produce much smaller image files so you can greatly improve your page speed.
Images served in the WebP format can benefit from more than 25% compression, and when you think about the number of images on your site, that’s a tonne of space that can be saved.
Smush Pro gives you two options for converting your images to next-gen formats.
1.Convert images with Smush Local WebP
The Local WebP feature in Smush Pro enables you to serve images from your Media Library in next-gen WebP format, without needing the Smush CDN.
The conversion to WebP is lossy when converting from JPEG images, and lossless when converting from PNG images.
Note that once you have configured this feature, you will need to run a Bulk Smush again for your existing images to get a WebP version created for each one.
Local WebP also only works for images in your Media Library and cannot create WebP versions of images found in other directories.
2.Convert images with Smush CDN
Smush’s CDN offers the option to convert your images to WebP in just one click.
Not all browsers support next-gen formats, which is something you would usually have to bear in mind when deciding to make the switch.
However, if you enable the WebP Conversion feature, Smush will automatically check whether or not a browser supports this format, and if not, will serve it in the original one. This ensures that none of your visitors are compromised.
12. Save Time With Automatic Smush Configs
If you manage multiple sites, this feature will save you hours of time by allowing you to apply your preferred Smush settings to any site with a click.
All you have to do is follow the already mentioned steps in this article and set Smush up exactly how you want it.
Then navigate to Settings > Configs and simply hit ‘Save Config’ to save your current settings as a new config, which you can apply to other sites instantly.
You can also choose from a number of default configs and you can integrate with The Hub site management tool to easily apply your configs to multiple sites at once.
13. Integrate With Popular WordPress Tools
Smush is fully compatible with your favorite WordPress tools and has direct in-plugin integrations with Gutenberg, Amazon S3, Gravity Forms, WPBakery builder, and NextGen Gallery.
Like most Smush features, all of these integrations can be activated with a click and allow for more specialized and targeted image optimization for the tool you’re integrating with.
Support at Your Fingertips
Now you know the ins and outs of this little plugin, it’s time to get stuck in and see how your site can benefit.
Smush is a very user-friendly plugin, so you should have no trouble managing your images.
If, however, you find yourself in need of some friendly advice, members should look no further than our awesome support team who are available 24/7.
And when you’re ready to take your image optimization to the next level, give Smush Pro a try and automatically unlock advanced features like our 121-point CDN, 5x Ultra Smush – plus – free access to the entire WPMU DEV suite of plugins and site management tools.
You can also check out the plugin documentation and view new updates and features coming soon in our roadmap.
