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.

Pro Tip

Advanced users can leverage some simple WP-CLI commands to optimize, list, and restore images with Smush Pro. See this API doc for more info.

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.

smush dashboard

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 Images.

re-check images button

The Bulk Smush feature allows you to apply all your enabled features to any uncompressed images with a single click.

Note that, on WordPress Multisite networks, Bulk Smush is not available by default and needs to be enabled in the Network Admin Smush settings. Once it has been enabled, Bulk Smush will be available on the subsites.

Recommended Reading

Our blog post, How To Bulk Optimize Images With Smush, explains how to get the most out of the bulk optimization feature.

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.

bulk smush images

NOTE: With Automatic Compression and all other features enabled, you may seldom need Bulk Smush because your images are compressed during the upload process.

Media Library

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 with each image.

Use the Smush filter to display all images, just those that were ignored or those not yet processed. 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 media library filters

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.

view stats for an image

8.2.1 Bulk Smush Settings

Link to chapter 2

The Settings features are your primary optimization tools.

Recommended Reading

Our blog post, How To Ace Google’s Image Page Speed Recommendations With Smush, focuses on Smush features that directly impact your Google Page Speed score.

Image Sizes

The Image Sizes feature allows admins to choose which thumbnails they want to be 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.

Pro Tip

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.

Click Custom to reveal a list of the thumbnail sizes that WordPress is creating on your site. Select the checkboxes for the images you want to be 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.

Automatic Compression

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.

enable automatic compression

Super-Smush

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.

enable super-smush images

Metadata

If yours is a photography site, you may want to retain the metadata that 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.

strip metadata from images

Image Resizing

As of WordPress 5.3, large image uploads are resized down to a specified max width and height. If you require images larger than 2560px, you can override this setting here.

smush image resize feature

Original Images

(Smush Pro Only)

  • Smush my original full-size images – As of WordPress v5.3, every image that gets uploaded will have your normal thumbnail outputs, a new max sized image, and the original upload as a backup. By default, Smush will only compress the thumbnail sizes that your theme outputs, skipping the new max sized image. Enable this setting to include optimizing this image too.
  • Store a copy of my small originals – As of WordPress v5.3, full-size images above a certain size (2560px by default) will be stored as originals, while a new max sized image will be created. However, if the uploaded image is smaller than the specified size WordPress won’t create a backup for it. Enable this setting to ensure you always have backups of all your image uploads.

Options for compressing original images in Smush Pro

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 file size.

auto convert PNGs to JPEGs

8.3 Directory Smush

Copy chapter anchor to clipboard

Your Uploads folder 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.

choose smush directory

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.

choose folder for directory smush

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.

directory smush in progress

Gutenberg Support

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.

gutenberg support with smush

WPBakery Page Builder

When you add images at custom sizes using the WPBakery Page builder’s editor interface, it does not actually save a thumbnail copy of that image at that custom size. Rather, it creates those image sizes on-the-fly as the image is requested in the browser.

WPBakery custom image sizes

Enable this feature to ensure all such custom-sized images added via the page builder are also optimized when they are served to the user’s browser.

WPBakery builder integration with Smush

Amazon S3 (Smush Pro only)

This feature cannot be enabled unless you have an Amazon S3 account and the WP Offload Media plugin installed.

If you are using S3 to store images and WP Offload Media 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.

amazon s3 integration

Pro Tip

If you wish to offload your existing media library content to your Amazon S3 bucket using the WP-Offload Media plugin, note that you will need their Pro version for that feature; the free version can only offload media uploaded after that plugin is installed on your site. If you need help setting up the integration, there is an excellent walkthrough available on the WP-Offload site here: https://deliciousbrains.com/wp-offload-media/doc/amazon-s3-quick-start-guide/

NextGen Gallery (Smush Pro only)

If you’re using NextGen Gallery to manage your image galleries, then enable this feature to add Smush Pro commands and stats to the NextGen interface.

smush pro tab in NextGEN

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.

smush buttons in NextGen manager

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 page speed. The heavier your site is with images, the greater the benefit. The feature’s settings allow you very specific control over what file types are lazy-loaded, as well as when and where that occurs.

Click Activate to open the Lazy Loading control panel and configure the feature.

activate lazy load

Media Types

You can choose which media types are lazy-loaded and which are not by selecting or deselecting the file type checkboxes.

lazy load media types

Output locations

You can choose where lazy loading is applied by selecting or deselecting the out location checkboxes.

select lazy load output locations

Display & 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.

Fade In

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.

lazy load fade in animation

Spinner

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.

lazy load spinner animation

Placeholder

If you want a custom placeholder image to display while images load, use the uploader to upload your image. There are two images already present that you can choose to display as well. You can add a background color if you wish by using the color picker provided. Of course, you can simply choose None and containers will remain empty until images are fully loaded.

lazy load display & animation placeholder

Include/Exclude

Post Types

You can choose which post types use lazy loading and which ones don’t by enabling or disabling the slider for each post type.

lazy load include/exclude post types

Post, Pages, URLs, Classes and IDs

Disable lazy loading for individual URLs by entering the URLs into the field provided, one URL per line. You can do the same with classes and IDs by entering them into the field, one class or ID per line.

lazy load include/exclude URLs, classes and IDs

Scripts

By default, the scripts required to support a page’s functionality are placed in the footer to facilitate faster page speed, 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 about whether the function is present.

lazy load scripts in header or footer

NOTE

The lazy load feature is not available for background images.

Native lazy load

Click the Enable native lazy loading toggle to enable support for native browser lazy loading.

enable native lazy loading

In some cases, this can cause the Google PageSpeed audit to fail the “Defer offscreen images”. Disable native lazy loading rectify this.

Disable Noscript

If you are using W3C’s validation tool, you may experience errors due to No Script on your pages. Click on the Disable Noscript toggle to avoid this issue.

disable noscript

Deactivate

If you no longer want to use the lazy load feature, you can deactivate it at any point by clicking Deactivate.

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. Check out our CDN overview video for more information.

 

Click Activate to open the CDN control panel and configure the feature.

activate smush CDN
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 visit 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.

CDN supported media types

Note: If you are trying to serve large GIF images on your site, they may timeout. If you experience this issue, try to replace the large GIFs with smaller ones or consider using a different file format.

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.

Retina

If you are using the WP-Retina 2x plugin and also want your retina images to be served via the Smush CDN, you’ll need to add the following constant to your wp-config.php file, just before the line that says “That’s all, stop editing“:
Unchanged: define ( WP_SMUSH_CDN_DELAY_SRCSET, true );

Background Images

When enabled, background images that 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.

serve background images from CDN

Note that the Smush CDN is able to serve background images only if they are served via the <img> HTML tag or via an inline CSS style at a <div> or when declared in a <style> HTML tag. The Smush CDN does not serve background images added to your website in a CSS stylesheet.

The Smush CDN will serve background images using the following methods:

It will not serve background images using the following method:

CHECK YOUR WORK

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.

Automatic Resizing

 

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 when the images are served and has no impact on the size of the original image.

enable automatic resizing

WebP Conversion

 

(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.

enable WebP conversion

Rest API

Click the Enable REST API support toggle to allow Smush to automatically replace image URLs when fetched via REST API endpoints.

enable rest api support

Deactivate

You can disable the CDN feature by clicking Deactivate.

deactivate CDN

Excluding Images from the CDN

There may be times when you wish to exclude one or more images from the Smush CDN. For example, full-screen images in a slider getting resized by the Automatic Resizing option.

While there is no option in the plugin itself to exclude specific images from the CDN, there is a filter that can be used to achieve this:
smush_skip_image_from_cdn

The filter can be used in your active theme’s functions.php file, or in a mu-plugin uploaded to your site. For more on using mu-plugins, see our Installing Mu-plugins documentation.

To exclude only a single specific image from the CDN, use this code and adjust the image URL in the $src variable:

To exclude multiple images from the CDN, use the following code instead. Adjust image URLs in the $skip_images array and add/remove as needed (note only the last entry in the array should not have a comma at the end).

8.6.1 Bandwidth and Upgrades

Link to chapter 6

10GB CDN bandwidth is available on all WPMU Membership plans, except for the single Hummingbird plan.

Of course, you can always purchase more CDN bandwidth that best suits your needs. Check out our CDN plans below.

  • 50GB – $5/m
  • 100GB – $10/m
  • 250GB – $20/m
  • 500GB – $30/m
  • 1TB – $50/m
  • 5TB – $200/m
  • 10TB – $350/m

Smush CDN bandwidth plan can be upgraded or downgraded at any time.

For more information about tracking bandwidth usage and guided instructions for increasing and checking your plan, visit the Smush section of our CDN usage documentation.

The Smush tools are additional features to help improve your site management. The tools currently available are:

Image Resize Detection

The Image Resize Detection tool conveniently highlights any images that are either too large or too small for their containers. This is especially helpful to ensure that you are consistently delivering high-quality images in your galleries, and lowers the risk of you unknowingly serving blurry undersized images. Learn more in the video below.

Click on the Detect and show incorrectly sized images toggle to enable this feature and click Update Settings to save your changes.

enable image resize detection

If this is enabled, when you view your site on the front end, you will notice an Image Issues section in your right sidebar.

image issues sidebar

NOTE: Only site administrators will see this information and the front end will remain unchanged for any visitors.

Both oversized and undersized images will be listed with the actual size of the image in a yellow bubble and the recommended image dimensions in a green bubble. Hover over each numbered block for a note recommending the ideal image size for that container, or click on it to be redirected to the image in question. The image that is associated with the numbered block you just clicked will flash once with a gray cast to indicate that it is the image you have selected.

If all the images on the page are the correct size or there are no images on the page, you will see a note stating that All images are properly sized under the same Image Issues section.

all images properly sized note

Bulk Restore

Use the Bulk Restore feature to restore your image thumbnails to their original format. This tool can be useful if you make any mistakes with your images and wish to revert them back to their original state.

NOTE

You need to have the Store a copy of my full size images feature enabled in the Bulk Smush Settings to be able to restore your images.

The Bulk Restore tool uses the original image to restore the thumbnails. This means that if your original image has been compressed by Smush, the quality of the restored thumbnail may be worse than its original state. To change whether or not your original images are compressed, you can enable or disable the Smush my original images feature in your Bulk Smush settings. More information on changing Bulk Smush settings can be found in the Bulk Smush Settings technical document.

Click the Restore Thumbnails button to start the restoration process.

restore thumbnail button

You will then be met with a confirmation request. Click Confirm to follow through with the restoration. Alternatively, click Cancel or the X icon to exit without initiating the restoration.

restore thumbnails confirmation

The restoration process will be tracked by a progress bar and you can cancel the process by clicking on either of the X icons.

restoration progress bar

If the bulk restoration has been successful, you will receive a success message. Click Finish to complete the process.

bulk restoration complete

If Smush has run into any errors while trying to bulk restore your thumbnails, you will receive a message informing you of which images were not regenerated.

unrecoverable images message

Click Retry to run the bulk restoration again or Cancel to close the message. You can view the unrecovered images in your media library by clicking on the arrow icon for each image.

The settings module allows you to change the Smush default settings for the following features:

NOTE

The Settings module in Smush will not be available on subsites of WordPress Multisite networks. To change the Settings on a multisite, you need to do so in the Network Administrator dashboard.

Translations

Smush will automatically use the language set in your WordPress Admin Settings as the Active Translation language, provided there is a matching translation available.

english active translation

In order for the Active Translation language to reflect in Smush, you need to ensure that the Smush translation file for the relevant language has been added to your site. Read our WPMU DEV Translations document for a detailed guide to exporting and using translations. Our translation files for Smush can be found here.

Once the Smush translation file has been added to your site and you have changed your site language in your WordPress Admin Settings, the Smush plugin should fully reflect the new Active Translation language.

Color Accessibility

The color accessibility setting will improve the visibility of elements as per the Web Content Accessibility Guide requirements, up to level AAA which is the highest level of compliance. Click on the Enable high contrast mode toggle and click Update Settings to activate this mode.

enable high contrast mode

Usage Tracking

Enabling this setting is incredibly helpful for our designers. Allowing usage tracking means that we will be able to learn more about what features you are and aren’t using. It is completely anonymous and is a tool for us to be able to deliver more relevant features to you in the future. Click on the Help us make Smush better by allowing usage tracking toggle and Update Settings to save settings.

usage tracking toggle

Subsite Controls

Only for WordPress Multisites.

Subsites will inherit network settings by default, but the Subsite Controls feature allows you to grant subsite administrators the ability to override modules. You can choose to give subsite administrators any of the following permissions:

  • None
  • All
  • Custom

None

Choose None to force subsites to inherit all network settings. Subsite administrators will not have access to any of the Smush modules.

none subsite controls

All

To give subsite administrators the ability to override all Smush modules, select All.

all subsite controls

Custom

The Custom option allows you to individually choose which modules the subsite administrators can override. The modules are:

  • Bulk Smush
  • Integrations
  • Lazy Load
  • CDN
  • Tools

custom subsite controls

Tick the boxes of modules you want to be available in subsites.

Data

This setting allows you to decide how to deal with your plugin data.

Restore Images

Use this tool when you want to restore your thumbnails to their original state. This is super handy if you happen to make any mistakes and need to regenerate your images. Read our Tools section for a quick guide to the Restore Images tool.

data settings restore images

Uninstallation

Choose how you want us to handle your data if you uninstall Smush. You can decide to save your settings or revert them back to the factory settings. Select Keep to save your settings which will be restored upon re-installation. Or you can choose Delete which will wipe your current settings and if Smush is re-installed, it will be restored to the factory settings.

data settings uninstallation

Remember to click Update Settings to save your changes.

Reset Factory Settings

If you ever need to restore your default settings, click Reset Settings to instantly revert back to the factory state.

reset to factory settings

API Status

Your API key is linked to your WPMU DEV membership account and is important for granting you access to many of the features offered. If you are having issues with accessing pro features, you can force update your API key to update your membership status. Click Update API Status to action this update.

update API status

This module gives you direct access to Smush tutorials that may be extremely beneficial in helping you get the most out of the plugin. Click on any of the articles to read the full blog or click on the View All button to jump to our complete Tutorial blog page.

smush tutorials

After reading this guide, if you still have questions regarding Smush, don’t hesitate to start a live chat with our support Superheroes or submit a support ticket using the Support tab of your WPMU DEV Dashboard.

new support ticket