This is Ben from WP Answered and by the end of this video,
you'll know how to use OptiMole to optimize images in WordPress.
Let's get started.
OptiMole is a WordPress image optimization plugin that will reduce the size of
your images by up to 95%.
Since images make up 50% of the average webpage's weight,
this can massively speed up your website.
If your images are currently unoptimized,
this is going to make a big difference. To get started with OptiMole,
visit their site and click the "Sign Up for Free" button.
I have a link to their site in the description below,
and if you're wondering why you need to sign up to use a plugin,
I'll explain that in just a moment.
Enter your name and email address on the next page to create your account,
and you'll be immediately redirected to the dashboard.
You can find various reports here on how much bandwidth you've saved and your
average compression levels,
but the only thing you need is the API key located here.
Sorry I've had to blur mine out for security purposes,
but it's just a long string of letters and numbers.
Copy it to your clipboard now, and then log into your WordPress site.
Once inside, hover your mouse over the Plugins menu,
and click the Add New button. In the search bar at the top right,
type in "optimole" and you'll see the plugin show up here.
Click Install Now and once the plugin finishes installing,
click the blue Activate button.
You'll be redirected to this welcome page and since you already have your API
key, you can click this button. On the next page,
paste your API key into this field and click the green Connect button.
Once OptiMole is connected to your domain,
they'll let you know that the initial optimization is beginning.
What's happening is that OptiMole is optimizing every image already uploaded to
your Media Library, which is going to make every page on your site load faster.
And, since it's handled by their servers,
you won't notice any lagging or downtime during this process.
Now let me explain why you needed to create an account in the first place.
The reason why you need an OptiMole account is so that you can get this private
API key that allows you to use their servers to handle the image compression.
Using their servers instead of optimizing the image with your hosting is better
for three reasons. If the plugin used your server,
then every time you upload an image you'd have to sit and wait for it to be
optimized. That would really slow down your blogging workflow. Second,
your site can slow down for visitors while running a very intensive operation
like image compression, especially when doing a bulk optimization. Third,
OptiMole doesn't modify the images on your site so you have all the originals
preserved. When someone visits your site,
the images that show up are coming from OptiMole servers which load super fast
thanks to their service performance optimization. Also,
the other nice thing about this setup is that you can reuse the same API key on
as many sites as you want. Now that the initial optimization is done,
you're finished with the plugin set up. Believe it or not,
there's actually nothing else you need to do.
There's no complex configuration menu like other optimization plugins,
so you can just stop right now if you're happy with the default configurations
in OptiMole. That said,
if you are curious about how you can customize this plugin,
here's a look at the settings that come included. First off,
in the General settings, you can disable image replacement and lazy loading.
The image replacement makes your images load from OptiMole's CDN,
which is very fast and I recommend you leave this option enabled.
I highly recommend you keep the other option enabled as well.
Scaling allows smaller versions of your images to be loaded on mobile devices
and with lazy loading,
your site won't load images on the page until they actually show up on screen.
Both of these features can make your site considerably faster.
Now let's take a quick look at the Advanced tab. In the compression section,
you can automatically serve lower quality images for visitors on slow networks.
If your image quality isn't that important to you and you have lots of mobile
traffic, this option may create a better experience for your site.
For photographers or sites with detailed graphs where resolution is very
important, I would recommend keeping this setting off.
OptiMole can also auto-convert GIFs into videos. In case you didn't know this,
GIFs tend to load slowly because they're an old and poorly optimized file
format. A GIF with 15 frames in it is literally just 15 images.
Videos will actually load faster than GIFs because there are better compression
algorithms available for them. Lastly,
the image quality slider lets you decide how aggressive you want the compression
to be. You can see some quality loss in the Medium setting,
but honestly if you're just adding images to a blog for visual appeal and you're
not a photographer, this small loss of quality is probably okay,
and I would recommend the Medium setting for most websites.
In the Resizing section,
there is an option called Smart Cropping that will crop your images
automatically, but to be totally honest,
I wouldn't trust an algorithm to crop my images and I probably already liked the
way their cropped now.
Enabling retina images will allow larger versions of your images to be displayed
on 4K screens, but again,
this isn't necessary unless you're a photographer and image quality is of
paramount importance.
The Resizing option is helpful for reducing the size of large images uploaded,
but you should resize your images before you upload them.
This is easily done on Macs and PCs without installing any new apps.
In the Lazy Load section,
you can display a generic placeholder which is actually just a blank space.
It's slightly faster than the alternative,
but I like the way OptiMole handles lazy loading by default.
Watch the image on screen carefully as I refreshed the page.
What you're seeing is two images. First,
a very blurry version of the image that is less than one kilobyte gets loaded,
and then the real image gets loaded and replaces it.
If you have 20 images in your post,
all 20 of these blurry images would be loaded first and then the real images
would be loaded as the visitor scrolls down the page.
Lazy loading can enabled for background images too, which is great.
And if OptiMoles missing any background images added by your theme,
you can use CSS selectors to target them here.
The Exclusion section is neat because it allows you to forego optimizing or lazy
loading for images based on their file name. For instance,
you could enter "nocompression" and then if you uploaded an image called
"sunset_nocompression.jpg," OptiMole would ignore it completely.
Lastly,
they have a Watermark feature in beta right now that lets you automatically add
watermarks to your images. As of now,
I don't really like this option because it's going to affect every one of your
images, but I'm guessing they'll add more control in the future.
I hope this OptiMole tutorial helps you to optimize your images and speed up
your WordPress site. And if it does, please like this video.
If you've still got questions,
post below in the comment section and I'll help you out.
And if you want more WordPress tutorials,
make sure to subscribe because I have a lot more videos on the way.
Thanks for watching.