How to Get Started With Optimole in Just 3 Steps
Here's how to get started with Optimole and get it integrated with your WordPress website in just three simple steps.
This Optimole tutorial is really going to be quick:
1. Install the Optimole plugin on your WordPress site
Log in to your WordPress admin panel and go to Plugins → Add New.
Search for the Optimole plugin using the box on the right:
Click on Install Now next to the plugin's name:
When the installation finishes, the Activate button will appear in place of the Install Now button. Click on it.
2. Activate Optimole
As soon as you install and activate the Optimole plugin, you will be asked to register for an account and input your personal API key that will let you connect to the Optimole service.
Click on the Register & Email API key button (you will be asked to provide an email address that will be used to set up your new account).
🚄 As you know, Optimole will process your images and deliver optimized versions of them to 5,000 of your website visitors a month for free.
When your account is all set up, you'll receive your API key via email. That email will look something like the following:
In the email, apart from the API token, you will also receive the login and password to your user profile on Optimole.com.
Come back to your WordPress admin panel (go to Media → Optimole), and click on the button labeled I already have an API key.
On the next screen, copy and paste the API key that you got in the email, and click on Connect to Optimole Service.
After a couple of seconds, you will be able to start working with Optimole. You'll see this notification:
3. Start using Optimole
The great thing about Optimole is that it works on autopilot, if you don't want to, you don't have to go through any other settings to get Optimole to do its job - it's already working!
You can go to the main dashboard of Optimole's to see the status of the service (in Media → Optimole). There, Optimole shows you your account info along with your usage of the Optimole service and the level of optimization achieved.
⚠️ The main part of this Optimole tutorial ends here. Everything below this point is optional. Optimole is already 100% operational and working.
Even though Optimole works on autopilot, there are still several options that give you a bit more control over what's going on. To see these options, switch to the Settings tab:
This is where you can see the two main settings:
- Enable image replacement - this one represents the core of what Optimole does; keep this enabled to get Optimole's advanced image optimization running.
- Scale images & lazy load - as the label underneath says, this one delivers scales images depending on the visitor's screen size and device, and then displays them using lazy loading.
⚠️ Note; when making any changes, don't forget to click on the Save changes button when you're done.
Switch to the Advanced tab for more settings:
This Advanced tab is where you can take even more control of how Optimole optimizes your images. Let's go through each sub-tab individually:
This is the area where you want to go first.
Here, you can pick the level of compression / image quality that you're okay with.
At the bottom, there's a dial that lets you toggle through the compression levels. As soon as you move that dial in any direction, Optimole will show you a preview based on an image taken from your site's media library.
Above the dial, there are two more options:
- Enable network-based optimizations - enable to make your images load faster on low-speed internet connections
- Enable GIF to video conversion - enable if you're the kind of person who likes to publish animated GIFs
Optimole gives you a couple of cool settings relating to cropping your images and thus making them fit the destination screen of the visitor even better:
- Enable smart cropping - this is a fun AI-powered feature that can be useful for some websites - depending on the kind of images you're publishing; here's an example of how this works:
- Enable Retina images - Retina screens, aka. HiDPI screens pack pixels much more densely than standard screens; as a consequence, images at twice their original size are needed to make everything look crisp; enable this feature to make sure your images look great on Retina; learn more about Retina images here
- Resize large images - if you tend to upload huge images to your site by mistake, this setting can help you resize them to their biggest acceptable dimensions automatically; just check what that value is for your current theme
This section allows you to fine-tune how Optimole executes lazy loading.
- Enable generic lazyload placeholder - when an image waits to be lazy-loaded, the visitor will see a blurred-out version of it in the meantime; if you'd rather have a generic image there, enable this feature
- Enable lazyload for background images - by default, lazy loading will not work for your background images
- Lazyload background images for selectors - this is where you can list all the CSS class selectors that should have lazy loading enabled for background images
If you want to, you can turn off Optimole for individual pages of your site, individual images, or even specific image types.
Just pick the condition and enter the word that should be filtered for.
Optimole tutorial done! 🍾
That is it! Optimole will now optimize your images on autopilot without you needing to do anything.
On the free plan, Optimole can handle up to 5,000 website visitors monthly and deliver images to them from 40 CloudFront CDN locations. 🏃♂️🏃♂️
If you want to expand on that, sign up to Optimole Personal or Business and upgrade to 25,000 monthly visitors and 180+ CDN locations. 🏃♂️🏃♂️🏃♂️🏃♂️🏃♂️🏃♂️🏃♂️🏃♂️🏃♂️