This guide explains how to use Smush Pro’s Image Optimizing features to compress, resize and share all your images without sacrificing quality. Use the Index on the left to quickly locate usage guidance on specific Smush features.
If you haven’t installed Smush yet, then you should visit the Smush Pro page where you can explore the plugin’s many features, download the free version, and where WPMU DEV members can install Smush Pro directly to any connected site.
8.1 DashboardLink to chapter 1
The Dashboard provides a running total of your Smush stats and a status monitor that will alert you to the current state of enabled features.
The Smush Dashboard is enabled after you compress your first images, after which it appears at the top of each module screen.
An alert icon will appear next to the Total Savings data if there are uncompressed images in your library. When the alert appears, go to the Bulk Smush module if you wish to compress all the images. Go to the Media Library if you want to Smush the images individually.
You can trigger an immediate scan of your image library at any time by clicking Re-Check.
8.2 Bulk SmushLink to chapter 2
The Bulk Smush feature allows you apply all your enabled features to any uncompressed images with a single click.
A notification will appear in the Bulk Smush container alerting you if there are uncompressed images in your Media Library. Click Bulk Smush Now to compress all un-Smushed images. Click Media Library to open the library and compression images individually as described in Media Library below.
NOTE:With Automatic Compression and all other features enabled, you may seldom need Bulk Smush because your images are compressed during the upload process.
8.3 Media LibraryLink to chapter 3
When activated, Smush adds features to your Media Library that allow you to filter images by Smush status, selectively compress images and view the Smush stats associated each image.
Use the Smush filter to display all images or just those that were ignored. Smush does not compress video or Gif files. Any other ignored image types could indicate that you are not making full use of all available compression features.
Smush adds a column to the Media Library indicating whether an image has been compressed or not. Images that have not been processed by Smush can be compressed by clicking the Smush command for that image.
Once an image has been processed, you can click the View Stats link to reveal a list of the thumbnail copies WordPress has created for that image, along with the sizes of those files before and after compression.
8.4 SettingsLink to chapter 4
The Settings features are your primary optimization tools.
The Image Sizes feature allows admins to choose which thumbnails they want compressed and which ones Smush should ignore.
In order to serve scaled images, WordPress generates multiple copies in different sizes of every uploaded image. Some themes and plugins also require copies. These copies, called thumbnails, can add up quickly, so we recommend you compress all thumbnails.
WordPress duplicate images are a net positive for most users—a simple exchange of storage space for faster page speed. WordPress pros, on the other hand, achieve page speed in many ways and the benefits of duplicate images may be minimal. Follow the Learn More link for guidance on preventing WordPress from creating multiple copies of your uploaded images. Learn more
Click Custom to reveal a list of the thumbnail sizes WordPress is creating on your site. Select the checkboxes for the images you want compressed, and leave those you don’t want compressed unchecked. The image sizes you select will be compressed automatically upon upload if you have Automatic Compression enabled.
Click the slider to enable automatic compression, and Smush will compress every image copy WordPress generates as soon as it’s created. Smush will only automatically compress the image sizes you selected in the Image Sizes setting above.
Our well-designed multi-pass lossy compression reduces file sizes significantly by stripping out as much data as possible without reducing image quality. Click the slider to enable multi-pass lossy compression.
If yours is a photography site, you may want to retain the metadata digital equipment frequently attaches to your images, but for most sites, it is entirely unnecessary. Click the slider to enable Smush to strip unnecessary metadata from all images.
There’s no point in storing images larger than the largest size you intend to include on your site. Click the slider to enable image resizing and then set the max image width and height. Smush will automatically reduce larger images to that size.
(Smush Pro Only)
Smush compresses the thumbnail copies created by WordPress when an image is uploaded but does not compress the original image. If you want the originals compressed as well, click the slider to enable this feature.
PNG to JPEG Conversion (Smush Pro Only)
Click the slider to enable this feature and Smush will convert PNG files to JPEGs, but only when doing so results in a smaller filesize.
8.5 Directory SmushLink to chapter 5
Uploads is the primary folder for images, but images can reside elsewhere. Plugins that create their own image copies, for example, may store those images in the plugins folder. Directory Smush finds uncompressed images stored outside the uploads folder and allows users to compress those images if they wish.
Activate the feature, then click Choose Directory to reveal a list of directories where uncompressed images are located. Click the arrow to the left of any directory to reveal a list of subdirectories, and click the arrow to the left of any subdirectory to reveal the images within.
Click the checkbox next to any directory or subdirectory to compress all the images they contain or select images individually if you wish, then click Choose Directory to begin compression. If several directories are selected, the process could take several minutes.
8.6 IntegrationsLink to chapter 6
Click the slider to add Smush Stats to Gutenberg blocks. When enabled, a Smush Stats category is added to the page and post editors and appears in the Blocks tab of any post or page containing an image. Click any image on the page to see sizes available for that image, allowing you to choose the smallest file that meets your needs on that page.
If you are using S3 to store images and WP Media Offload to manage the uploads, then enable this feature and Smush will compress any images contained in your S3 buckets, significantly reducing your cloud storage usage. This feature works together with Automatic Compression, so be sure to have that feature enabled in the Settings tab.
(Smush Pro Only)
If you’re using NextGen Gallery to manage your image galleries, then enable this feature to add Smush commands and stats to the NextGen interface.
When enabled, a column is added to the Gallery Manager showing the filesize reduction Smush was able to achieve with each image. The NextGen integration also adds a Smush button to the manager so unSmushed gallery images can be compressed and a Restore button so users can return compressed images to their original states.
WPBakery Page Builder
If you are using the WPBakery Page builder, enable this feature to add a the Smush image bar to the plugin’s frontend editor. The image bar will alert you to any image issues on that page.
Click the icon in the upper-righthand corner to slide out the Smush image bar. Any issues with images on that page with be described there and a corrective action suggested.
8.7 Lazy LoadingLink to chapter 7
Lazy loading retrieves only the data necessary to display what is actually being viewed at any given moment and can have a dramatic impact on pagespeed. The heavier your site is with images, the greater the benefit. The feature’s settings allow you very specific control over what filestypes are lazy loaded, as well as when and where that occurs.
Click Activate to open the Lazy Loading control panel and configure the feature.
You can choose which media types are lazy loaded and which are not by selecting or deselecting the filetype checkboxes.
You can choose where lazy loading is applied by selecting or deselecting the out location checkboxes.
Display and Animation
You can choose how images appear as they scroll into view by selecting an animation effect, a placeholder image or no effect at all.
Images will load first and then begin to fade in. Set the duration of the fade in milliseconds by entering how long the fade should be from start to finish into the Duration field The fade will begin as soon as any part of the image scrolls onto the screen. You can delay the fade if you want the animation to occur with the entire image in view by entering the delay time in milliseconds into the Delay field.
Choose the Spinner if you want a spinner to display while images fully load. Use the uploader to upload a custom spinner if you wish.
If you want a custom placeholder image to display while images load use the uploader to upload your image. There two present images already present that you can choose to display as well, and you can add a background color if you wish using the color picker provided. Of course, you can simply choose None and containers will remain empty until images are fully loaded.
You can choose which post types use lazying loading and which ones don’t by enabling or disabling the slider for each post type.
Post, Pages, URLs, Classes and IDs
Enable lazy loading for individual URLs by entering the URLs into the field provide, one URL per line. You can do the same with classes and IDs by entering them into the field provided, one class or ID per line.
By default, the scripts required to support a page’s functionality are placed in the footer to facilitate faster pagespeed, but there may be times when you need scripts to load early. Choose whether scripts load in the header or footer by clicking the corresponding button.
NOTE: Your theme must be using the wp_footer() function for this feature to work. The function should be located in your wp_include folder, or you can simply contact your theme’s developer and inquire whether the function is present.
The lazy load feature is not available for background images.
8.8 CDN ProLink to chapter 8
One of the major factors that can make your site slow is the distance your content has to travel between the hosting server and the location of the visitor viewing your site. Generally speaking, the further the location, the longer your site will take to load. A chief value of CDNs is that they pre-position your content in servers around the world thereby reducing the distance your content has to travel no matter where a visitor is located.
Click Activate to open the CDN control panel and configure the feature.
The Smush CDN consists of 40 terabytes-per-second servers located in 45 locations around the world. Closer servers mean faster speeds and faster speeds mean better page rank. Our CDN also ensures that a larger number of users can your site at the same time without causing delays in content delivery.
NOTE: Enabling the CDN will have no impact on the Bulk Smush or Directory Smush features, as those run independently from the CDN.
Supported Media Types
The Smush CDN can serve all of your images if you limit or convert your image file formats to one of the four types we support: jpg, png, gif or WebP.
The CDN does not currently support videos. We recommend you consider a third-party provider specializing in video hosting and that you embed the videos into your posts and pages.
When enabled, background images which have been declared with CSS will be served from the CDN whenever possible.
For this feature to work your theme’s background images must be declared correctly using the default wp_attachment functions. Non-media library uploads can still be compressed using the Directory Smush feature, they just won’t be served from the CDN.
Click the slider to enable Smush to serve your background images from the CDN. When disabled, background images will be served from either your primary server, which we do not recommend, or from a third party if you’ve invested in one.
Improperly-sized images can impact page speeds, and this feature allows the CDN to automatically resize any images that do not fit their containers. This resizing occurs during when the images are served and has no impact on the size of the original image.
(Pro Smush Only)
Smush can automatically convert and serve your images as WebP to compatible browsers.
We’ll detect and serve WebP images to browsers that will accept them by checking Accept Headers, and gracefully fall back to normal PNGs or JPEGs for non-compatible browsers.
Does the Smush CDN serve background images? Are background images supported?
It depends on the method used to display the background image.
The Smush CDN is able to serve background images if they are served via the
<img> HTML tag or via an inline CSS style at a
<div>, for example:
The Smush CDN does not serve background images added to your website using CSS.
The Smush CDN will serve background images using the following methods:
It will not serve background images using the following method:
Right-click on your background image and use the browsers built-in inspector to see what method your theme/plugin is using to serve your background images. If you need help contact our 24/7 live support team.