This will make a big difference.
If you haven’t optimized your images already then what you learn in this tutorial is going to make your website way faster.
Like most things WordPress, optimizing your images is easily done with a plugin. Well, not necessarily…
Most image optimization plugins are extremely confusing and have pages of settings. That’s what makes OptiMole so awesome.
Why use OptiMole?
OptiMole is a new plugin for optimizing images and we really needed a plugin like this.
This plugin is so ridiculously easy to use, you’ll be finished installing & configuring it in a matter of minutes. And then…
Since images make up 50% of the average web page’s weight, optimizing your images going to dramatically speed up your site.
OptiMole will auto-optimize every image in your Media Library and every new image you upload. And you can keep blogging and customizing your site while it runs silently in the background. Basically, it’s awesome.
Here’s how to get started.
How to use OptiMole
One of the reasons I love the OptiMole plugin is because it’s so darn easy to use.
If you’re more of a visual learner, you can follow my video tutorial here:
Create an account
The first step is to visit the OptiMole website and create a free account.
You need to create an account so you can get a private API key that will allow you to use their servers.
Using OptiMole’s servers is much faster than using your site’s hosting to optimize and load the images.
After you create an account, you’ll be redirected to your dashboard where you can review all of your optimization stats. The only thing you need to do here is to copy the API key that shows up at the top.
Once you have your API key copied to your clipboard, it’s time to install the plugin.
Install the plugin
Installing OptiMole is no different than installing any other plugin.
Visit the Plugins menu in your dashboard and click the “Add New” button at the top. On the next page, use the search bar at the top-right to search for OptiMole, and it will show up right away in the results.
Click the “Install Now” button, and once the installation is complete, click the “Activate” button to activate OptiMole on your site.
Activate your API key
After activating OptiMole, you’ll be redirected to this welcome page:
Since you already have your API key, you can click the bottom button which will take you to this page.
Paste your API key into the text field and click the green “Connect” button to connect your site to OptiMole’s servers.
You’ll see them run some tests as they prepare your site for optimization.
And once the tests are complete (takes about 20s), you’ll see this new dashboard page:
Believe it or not, you’re already finished setting up OptiMole!
You don’t need to take any further action to optimize the images on your site. OptiMole is going to take some time to compress all of the images already uploaded to your site, and you can simply sit back and enjoy your faster website.
If you’re impressed with this plugin, now is a good time to create an OptiMole account.
While it’s not necessary to do anything else, here’s a walkthrough of all the various settings available in OptiMole.
First up, we have the General settings. There are only two options here.
OptiMole will automatically replace all image URLs with the ones leading to their servers. This is recommended as it will make your images load faster.
Also, the plugin scales down your images so smaller versions are loaded for mobile devices and images are lazy-loaded too. I recommend keeping both options enabled.
In the Advanced section, you’ll find the Compression settings up first.
If your website is used on a lot of mobile devices or in areas with slow network connections, you may want to enable the first option.
The second setting allows you to auto-convert GIFs into videos which is a good idea if you have large or lengthy GIFs on your site. Videos will actually load much faster since GIFs can’t be optimized very well.
Lastly, the image quality slider lets you choose the degree of image optimization applied by OptiMole. For most websites, I would lower the quality to Medium. You’ll barely notice any difference in your images and your site will load faster. I would only leave this setting on High if you’re a photographer and image quality is extremely important to you.
Next up, we have the Resize menu.
Smart Cropping is an interesting feature, but I don’t trust an algorithm to crop my images. Personally, I think art-direction is best left to people so I leave that option off.
If you need crystal clear images on 4K screens, you can enable retina images, and the final option allows you to auto-resize images you upload.
The auto-resizing is nice, but you should be resizing your images before you upload them to your site. This is easily done with tools that pre-installed on all Macs and PCs.
Inside the Lazyload menu, you can adjust how lazy loading is handled by OptiMole.
You can enable the placeholder (blank space) to show up for images before they’re fully loaded, but I leave it off. By default, OptiMole displays a blurry version of the image right before it loads which is more convincing and only slightly slows your site compared to the blank space.
Unless it causes a bad user experience on your site, I would recommend allowing OptiMole to lazy load background images on your site too.
The Exclusions menu can be used to stop OptiMole from optimizing or lazy loading specific images on your site. This is very handy.
Lastly, the Watermark menu has an experimental option that lets you automatically add a watermark to all of your images.
Keep in mind that this will affect every image you upload to your site.
What do you think of OptiMole?
Overall, I think OptiMole is an awesome image optimization plugin.
In the past, image optimization plugins were really confusing and full of convoluted options. Some still are!
As you’ve seen in this OptiMole review, this is a welcome entrant to the world of WordPress site optimization, and brings a much simpler approach to image compression.
What do you think of OptiMole? Will you use it on your site? Let us know in the comments below.