It’s likely, if you have an online store, your media library fills up fast. Not only are you looking at the various file sizes that are created, but for each product you probably have several views and angles to help your customers make better buying decisions.
The fact is, you need to make sure that the media side of your store is optimized. That is where Media Cloud for WordPress comes in. It will speed up your store’s performance by moving you media and other files to online cloud storage such as Amazon S3, Google Cloud Storage, Digital Ocean Spaces, Minio, Wasabi and BackBlaze. From there, you can serve your media through one of the popular CDN’s.
Media Cloud for WordPress and WooCommerce
Aside from the optimal storage it gives you, it also integrates Imgix, for real-time image optimization and manipulation.
Setting Up Media Cloud
We will briefly walk through several settings. You can easily toggle these off and on, and following this screenshot, I will show you the settings for most of these to give you a good example of the control you have over your media and cloud storage.
Setting Up Cloud Storage
Here you will toggle on the services you need and the cloud storage of your choice. For this example, I am using Amazon S3.
To integrate this image processing service, there are a few required settings you will need to complete. I’ll be talking more about the Imgix features later in this post.
Dynamic Image Settings
Direct Upload Settings
If you want to be able to do direct uploads to your cloud storage, you can toggle that on here.
If you choose to use Amazon’s Rekognition AI or Google’s Clould Vision, you will connect here.
I won’t get into the Vision aspect here as it takes a bit of a deeper dive into the setup and adding a bit of code. But in a nutshell, it enables image tagging and classification using machine learning. For example, in Amazon Rekognition, it can be used to detect explicit images for moderation purposes, detect faces and detect celebrities.
Crop Tool Settings
You can also activate the ability to crop your images as well.
Other settings include Debugging, Batch Processing and Integrations.
Image Size Manager
Here we have access to conveniently managing all your WordPress sizes including your WooCommerce image sizes.
Adding a New Image Size
And you can easily add a new image size to your existing list.
Using Imgix for Image Size and Optimization
If you want to edit an existing image size, and you have Imgix activated, you will be taken into the Imgix Ui. First, you need to select an image as an example. For WooCommerce single images, it takes you to your media library to choose only from your WooCommerce product images. Once you have done this, you will get several options beyond just adjusting the image size.
The advantage here is that all edits and optimizations are real-time with previews that you can adjust and then save, as needed.
A lot of these options are great for devs and designers creating sites as you can set up size and images with specific settings for projects where you are dealing with a lot of images that need to have the same adjustments, stylization and cropping across the board.
There are easy ways to adjust your image display. And if you want to really fine-tune your photos, there are controls for luminosity, color, noise, sharpening and blurring,
Taking the editing and optimization even further, adding styles to your images, such as adding halftones, pixellating and monotone and sepia tones, is very easy to do.
You can also add a border and control its width, as well as padding, around the image.
Watermark Your Images
Although you don’t always find the need to watermark your product images, the ability to do it easily in your dashboard and have tighter control over the placement and size is a great option.
Focus Crop Images
This is a very interesting option and something you will want to dive into deeper in their documentation to understand each of the settings under the Focus. For example, the Use Faces might be more popular among news sites and sites that have a lot of celebrity photos.
In other instances, with the options you have, this may also come in handy for some product shots on your WooCommerce store.
Cropping an Image
When you are in your media library, this gives you a much more powerful option for cropping your images vs the default options in the WordPress image editor. If we click on the Crop Image button, we get a window where cropping is much more detailed and refined.
And all the edit features I showed you previously can be accessed via the image editor as well.
Images in Your Media Library/Cloud
You will notice that once you have images migrated and/or uploaded, a small cloud icon will show them in your media library.
If you roll your mouse over the cloud icon, you will see more details.
Direct Upload to the Cloud
As I showed in the settings, you can toggle on the option to upload directly to the cloud. In your Cloud Storage Browser you are able to do this, as well as delete and create or import files and folders.
Moving Your Site to a New Host
I could not end this post without mentioning how much hassle you will save if you are moving your site to another host. If you have done this before, you know what a pain media migration can be. You can use Imgix or their Dynamic Images feature to redesign your site or change themes without having to go through time-consuming regeneration of thumbnails and image sizes.
Going back to WooCommerce specifically, Cloud Media has documentation giving more details on integration and how it works with resizing images, overall image width, and height, as well as many more. You can check that out in their documentation to learn more.
As I have mentioned throughout this post, the advantages of using Media Cloud with your WooCommerce store are obvious, considering the optimization that cloud storage will bring to your site and the ease of having more editing control over your product images.
Speed Up Your WooCommerce Online Store
I have only touched the tip of the iceberg on how this can help developers, designers and store owners across the board. I encourage you to visit their site to watch some of the videos that give you an even better of what it can do for you because you can actually see it in action.
There are three affordable packages. If you are going to run this on your WooCommerce site, at the minimum, I would go for the middle Pro plan at $8.99 a month.
I highly recommend checking out Media Cloud to add that extra boost to image optimization and editing for your WooCommerce online store.
Don't have the time to keep up with my content on a daily basis?
Sign up for our weekly digest that covers my past weeks podcasts, tutorials and the news from the WooCommerce community.
I write this myself and it is delivered to your inbox every Saturday morning.