How to Get Started With Optimole

Optimole is a cloud-based solution for optimizing your website's images. In this guide, you will find out how to activate it on your WordPress website within a few steps. To use it on non-WordPress websites, just create your free account and follow the custom integration steps.

Hero Image Preloader

An important feature of Optimole is its ability to detect the hero image on the web pages, ensuring its quick loading without significant effects on performance. To do this, it appends the attribute fetchpriority="high"  to prioritize their loading. It scans for the initial image that fits the criteria and doesn't apply this to any other images. Apart from this, it is applied also to the Site Logo.

📚 What's in this guide?

📩 Install the Optimole plugin on your WordPress site

1

Log in to your WordPress admin panel and go to Plugins → Add New.

2

Search for the Optimole plugin using the box on the right:

3

Click on Install Now next to the plugin's name:

4

When the installation finishes, the Activate button will appear in place of the Install Now button. Click on it. A new panel Optimole will appear.

⛳️ 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 Create & connect your account 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, the API key you got in the email is already there, so you just need to 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:

🏁 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 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 central 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.

⚙️ Optimole settings - General

This is where you can see the 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. - read more
• Enable error diagnosis tool - ease using Optimole, enabling this troubleshooting mechanism. - read more
• Clear cached resources - re-optimize the images by clearing the cache. As the description mentions, there might be a chance that Optimole shows the old version of some updated resources.
• Enable Optimole badge - by enabling this option, an "Optimized by Optimole" badge will be displayed on your website. As a reward, you will get 20.000 more visits. Please note that for websites that have been already connected to the API key, there will be a 5 minutes cache.

⚠️ 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.

🚀 Advanced 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:

Compression

By default, Optimole compresses the images on your website, and it uses Machine Learning algorithms to detect how to get the smallest possible size with minimum perceived quality losses. In case you feel this automatic process doesn't suit your needs, it is possible to disable it and manually set the level of compression/image quality you're okay with.

At the bottom, a dial 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.

Once you decide on a compression level, don't forget to press the Save Changes button.

Manual compression enabled

Above the dial, there are more options:

• Enable Best Format - Optimole offers the best format support for its users, which means that the images are returned at minimum size without quality loss.
• Enable network-based optimizations - enable to make your images load faster on low-speed internet connections.
• Serve CSS&JS through Optimole - when you have images embedded in CSS/JS files, Optimole proves to be helpful by optimizing those images and delivering the CSS/JS content via the CDN.
• Enable GIF to video conversion - enable if you're the kind of person who likes to publish animated GIFs.
• Enable avif conversion - AVIF is a new image format offering significant compression gains over other formats like JPEG and WebP. While the exact savings will depend on the content, encoding settings, and quality target, you can see up to 50% savings vs. JPEG.

• Strip Image Metadata - the ability to toggle on or off the removal of metadata (such as EXIF, IPTC, etc.) from the generated image, granting the users greater autonomy over their content.

Resize

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. - read more

• 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
• Limit Image Dimensions with max width/height - as the name suggests, you will be able to set custom maximum width or height for the images served by Optimole. When this setting is enabled, the option for retina images will be disabled to ensure consistency between the images.
• Add a new crop image size - insert width and height for cropped images. Once you add size, the cropped images will be listed there.
• Resize large images original source - 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.

Lazyload

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. Read More
• Exclude first X of images from lazyload - avoid lazy loading for some of the first images, or use 0 to disable the feature.
• Use native lazyload - adds an additional flag that allows the browser to pick a lazyload method. When this is enabled, Optimole stops the rescaling process.
• Scale Images - scale the images on lazyload.
• Enable lazyload for background images - by default, lazy loading will not work for your background images.
• Enable lazyload for embedded videos and iframes - by default, lazy loading will not work for your embedded videos and iframes.
• Enable noscript tag - by default, this option will be off for the new users and on for already connected users. This will help browsers that cannot handle Optimole-based features load fallback 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.

🎥Video - Lazy-load Explained: How to Optimize Your Webpages for Maximum Speed

Exclusions

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.

📝 Note: Read more about excluding images from optimizing or lazyloading here.

☁️ Cloud Integration

The Cloud Integration tab, as the name suggests, presents storage options of Optimole, to free up disk space on your website:

📝 Note: Read more about Cloud Library Browsing here.

✅ Custom Integration 

To use the service on a non-WordPress website just follow two steps: Activate your Optimole account, and follow the Custom Integration guide. This will allow you use Optimole on personally build websites, outside WordPress.

🤝 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 400+ CloudFront CDN locations. 🏃🏃

If you want to expand on that, sign up to Optimole premium plans and upgrade to 50,000 monthly visitors and 400+ CDN locations. 🏃🏃🏃🏃🏃🏃🏃🏃🏃

🎥 Video - How to Speed up Your WordPress Website using Optimole