Disclosure: WP Mayor is a professional review site that receives compensation from the companies whose products we review. Each product is thoroughly tested and our honest opinions are shared publicly. We are independently owned and the opinions expressed below are our own.
If you want to speed up your WordPress site, optimizing your site’s images is one of the best returns on investment you’re going to get.
According to the HTTP Archive, the average web page’s file size is about 50% images, so shrinking the size of your image files gives you a chance to make a significant dent in your site’s file size.
In this Optimole review, I’m going to give you a look at a new’ish tool that’s focused on handling pretty much every part of the image optimization process for your WordPress site.
While part of that is automatically resizing and compressing your images, Optimole also dynamically serves the right image size based on a user’s browser/viewport, serves images via its own CDN, and adds lazy loading.
Keep reading my Optimole review for some real test data and a hands-on look at this tool.
Optimole Review: The Feature List
I touched on the main features above, but now let’s get a little deeper into what Optimole is actually doing on your WordPress site.
First, there’s the “standard” image optimization approach:
Optimole can automatically use lossy or lossless compression to shrink the file size of the images that you upload to your site. That’s certainly helpful, but there are a lot of quality image compression plugins already, so that’s definitely not the most unique thing about Optimole.
Where Optimole is unique is that it also optimizes how those images are served. Let’s unpack that…
Dynamic Image Serving
First, Optimole dynamically serves different image sizes based on the browser and viewport of each individual visitor.
For example, someone on a 750 px wide smartphone doesn’t need the same image size as someone on a 2880 px wide retina screen. Optimole takes that into account and serves a smaller image to the smartphone user and a higher resolution image to the retina screen user.
Image CDN
Beyond that, Optimole also serves your images via its own CDN to speed up global load times.
On free plans, this is a “custom made CDN” (not 100% sure what that entails), while paid plans use the Amazon CloudFront CDN to deliver images.
Lazy Loading
Finally, Optimole also adds lazy loading to delay loading below-the-fold images until a user starts scrolling down the page without the need for jQuery.
Other Smaller Features
Beyond those big features above, Optimole also adds support for:
- Automatic image watermarking
- WebP images
- Backend optimization/usage stats
Optimole Pricing
Optimole offers both free and paid plans.
With the free plan, you get:
- 1 GB of image optimization per month
- 5 GB of image CDN bandwidth per month
Additionally, the free tier uses Optimole’s own custom built CDN.
After that, paid plans start at $9 per month for more optimization/bandwidth and use of Amazon CloudFront as the CDN.
On the highest tier plans, you also get the ability to use your own custom domain name for the CDN-served images, rather than an Optimole subdomain.
Hands-on With The Optimole Plugin
For this hands-on section, I’ll first show you around the Optimole dashboard. Then, I’ll share some data on how much Optimole compresses images and how the dynamic image sizing works.
To set up Optimole, you’ll first need to sign up to get an API key:
Once you add your API key, you’ll see a summary of your site and CDN URL at the top (you can see how the free plan uses an Optimole subdomain for the CDN):
General Settings
To configure most of Optimole’s settings, you’ll go to the General Settings tab.
Here, you can set up five important options:
- Enable image replacement – this lets Optimole replace your own image URLs with the optimized images served from the Optimole CDN.
- Admin bar status – this lets you see your Optimole usage in the WordPress toolbar.
- Javascript replacement & Lazy load – this encompasses the dynamic image resizing as well as the lazy loading.
- Resize larger images – in addition to the dynamic resizing, you can also have Optimole automatically resize large images.
- Compression level – lets you choose whether you want to go lossy or lossless, or let Optimole decide with the Auto option
Simple enough so far, right?
Watermark options
If you want to automatically watermark your images, that’s what the Watermark options area is for.
To get started, you’ll want to upload the image you want to use as a watermark. Optimole lets you use up to 5 possible watermark images, so you aren’t limited to a single option. You can see that I’ve uploaded Mr. WP Mayor:
Then, further down the page, you can choose which watermark to actively use (from the up-to five images that you’ve added), as well as:
- Opacity
- Position
- Offset
- Scale
Optimole Cloud Dashboard
Beyond the settings in your WordPress dashboard, Optimole also gives you a cloud dashboard where you can see usage across all the sites that you’re using Optimole on (and the same Optimole API key).
For example, you can see that I’m currently sitting at 60% average compression for the images on my test site, which isn’t too shabby (this is with the Auto option enabled):
Testing How Optimole Resizes Images
Above, you saw that after uploading a bunch of random images to my site, my average compression rate is sitting at about 60% with Optimole’s Auto compression setting.
Now, though, I want to show you the other part of the equation, which is how Optimole automatically resizes the images that it serves based on a user’s device.
To do that, I’m going to use Chrome Developer Tools to emulate a few different devices and see how the original size of the image changes.
First, I’ll start with loading a regular browser – 1440 x 900 px. Here, Optimole loads the image with 1450 x 814 px dimensions:
When I load it simulating an iPad Pro, the dimensions switch to 1336 x 750 px:
And if I go down to an iPhone 6, the dimensions of the image that Optimole serves are just 630 x 354 px to match the smaller screen:
You can also see that if you look at the actual image URL, it’s being loaded from Optimole’s servers:
Final Thoughts on Optimole
Optimole is very easy to use – you pretty much just upload it, plug in your API key, and it starts working.
There are already several quality image compression plugins, so I think the differentiator with Optimole is definitely all the other stuff it does. By that, I mainly mean:
- Built-in dynamic image serving to serve the best size based on a user’s actual device
- Lazy loading
- Image CDN
And the watermark feature is nice to have if you want it, though I don’t think that’s as big of a differentiator.
So if you want those extra features, give Optimole a look. You can get started for free at WordPress.org. Then, if you need more usage and/or you want access to the Amazon CloudFront CDN integration, you can upgrade starting at just $9 per month.
0 comments:
Post a Comment