If you've ever run your website through the PageSpeed Insights tool to find out what you need to do to improve your page speed, you've probably gotten the following message:
Properly formatting and compressing images can save many bytes of data.
Optimize the following images to reduce their size by [estimated percentage]
Under that message, Google will show you a list of image files you should attempt to optimize. Google's help files on how to get this done are as helpful as a sack of potatoes if you're not super technical.
If you didn't already know, there are lots of free WordPress plugins available that will help you compress your images – without losing any quality. Compressing images allows you to reduce their file size and make your pages load faster. If you use a lot of photos in posts and pages, this can make a big impact on your site speed.
For a long time, I used and recommended WP Smush. Then they had some issue and kept popping notices up on my dash about losing some abilities to smush large files unless you chose to upgrade to the paid version. So I went in search of an alternate solution and found the EWWW Image Optimizer plugin. Like WP Smush, the EWWW Image Optimizer plugin allows you to easily optimize your post and page images. But it also allows you to optimize the images used in your theme as well.
Optimizing your WordPress Post and Page images
Both plugins will optimize posts within your Posts and Pages. EWWW Image Optimizer will automatically optimize any new images uploaded after it's installed and activated. To optimize images uploaded before installing the plugin, navigate to the EWWW settings screen and click the “Bulk Optimize” link at the top of that page.
Click the Start Optimizing button on this screen.
That's it! All the images you've uploaded for your posts and pages prior to the plugin being installed are optimized.
Optimizing your WordPress theme files
The most significant benefit that EWWW Image Optimizer has vs. WP Smush for me is the ability to specify specific folders for scanning so that any image in WordPress can be optimized (vs. only those in the Media Library). So, you can not only compress images uploaded to WordPress, but you can also scan images in your theme folder and compress those as well.
To do this, head to the plugin settings screen after installing and activating it. Navigate to Advanced Settings and look for the “Folders to optimize” field. There you can enter the folder path to your theme files and optimize them.
You'll see a comment above the “Folders to optimize” feature that will read: “One path per line, must be within /home/YOURHOSTINGACCOUNTNAME/public_html/. Use full paths, not relative paths.” You'll need to copy and paste whatever path they provide after “must be within,” and put it into the box.
Then you'll need to add the rest of the path to your theme folder. To find the name and path of your theme file, visit your site and view the source code. To do this in Firefox or Chrome, right click and choose “View Page Source.” In the source code, do a “find” (in Mac, this is command+F: in Windows this is control+F) Now perform a search for the word “themes.” Doing so will show you which folder your theme is calling images within.
Copy that link. Remove the http://DOMAINNAME.COM/ portion and the individual /FILENAME.extension at the end. In the example above, this is what's left after trimming the domain name and the specific file name:
This path is what you paste after the full file path EWWW Image Optimizer gives you.
Then click Save Changes at the bottom of the screen and it will optimize any images used in your theme. Your WordPress images for posts, pages, and your theme are optimized.