How to Optimize and Compress Images in WordPress

In this tutorial, we will show you how to Optimize, Compress, and lazy load images in WordPress. We will use the free Smush Image Compression and Optimization plugin. First, we will walk you through installing and setting up the plugin to bulk compress, optimize, and lazy load images in WordPress. Then, we’ll show you how to modify the settings within the Smush plugin.

Install Smush Image Compression and Optimization

  1. Log into your WordPress Dashboard.
  2. Click Plugins, then Add New.
  3. Type ‘smush’ in the search field. When you see the Smush – Lazy Load Images, Optimize & Compress Images plugin by WPMU DEV, click the Install Now button.
    Installing Smush Plugin For WordPress
  4. Once installed, click the Activate button to enable the plugin.

Setup Smush to Optimize & Compress Images

Now that you have installed the Smush – Lazy Load Images, Optimize & Compress Images plugin, we will show you how to use it to optimize and compress images on your WordPress site. Since we are using the free version, it can only bulk process 50 at a time, so this may take several tries to complete.

  1. Login to your WordPress Dashboard if you haven’t already.
  2. Click the Smush link in your main Dashboard menu.
  3. You will then see a setup wizard pop-up, click the Begin Setup button.
  4. On the next screen, select if you want to Automatically optimize new uploads then click the Next button.
  5. Choose if you want to Enable enhanced multi-pass lossy compression is enabled then click Next.
  6. Select if you want to Strip my image metadata then click Next.
  7. Choose if you want to Enable Lazy Loading then click the Next button.
  8. On the last page select if you want to Allow usage data tracking then click the Finish Setup Wizard button. It will then check your site to determine what images need optimized and compressed.

Modify the Bulk Smush Settings

  1. Click the Smush then Bulk Smush link in your WordPress Dashboard.
  2. You can then scroll down to the Settings section and modify your image compression options as needed.
  3. You can then scroll down and adjust the default settings as needed.
  4. Click the Save Changes button after modifying your bulk smash settings.

Modify Lazy Loading Settings

  1. In your WordPress Dashboard, click Smush then Lazy Load.
  2. Scroll down to the Lazy Load section and click the Activate button if it isn’t already enabled. You will then see a message stating “Lazy loading is active.” This means that it is running with the default settings.
  3. You can then scroll down and adjust the default settings as needed.
  4. Click the Save Changes button after modifying your lazy loading settings.

Congratulations, now you know how to optimize, compress, and lazy load images in WordPress with the Smush Image Compression and Optimization plugin!

For further reading, check out Using Inline Images versus the Image Block.

Become a master of WordPress plugins! Protect, optimize, secure, and expand the functionality of your website easily with the help of WordPress plugins!

IC
InMotion Hosting Contributor Content Writer II

InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!

More Articles by InMotion Hosting

0 thoughts on “How to Optimize and Compress Images in WordPress

  1. I want to share my 2017 year experience in Google Pagespeed images optimization for my website:

    I have tried free version of WP Smush, but Google Pagespeed still had issues to my images. Then I read that in September 2017 Google Pagespeed changed the rules of the game, and now it wants all images to be smaller then webp q75 + 10%. I tried to achieve that with MozJpeg encoder, but resulting images had terrible artifacts.

    So as I understand there is no way now to achieve high score in Google Pagespeed, except using webp images. I used free plugin Opti MozJpeg Guetzli WebP to create webp duplicates for each image in my media library. Now I have two files for each thumbnail (original and webp). If browser supports webp, it gets webp duplicate, If not – original image. It is achieved by the following code in .htaccess:

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule (.*) $1.webp [T=image/webp,E=accept:1]
    </IfModule>
    <IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
    </IfModule>
    AddType image/webp .webp
    1. Thanks for your contribution to the Community! We appreciate that you are willing to share your knowledge and experience to assist others. Kudos!

Was this article helpful? Join the conversation!

Questions about our MailChannels Deployment? We have answers and are here to help!Learn More
+