More Products

Optimize images and videos in WordPress (video tutorial)

Last updated: Sep-12-2024

On this page:

Overview
Video tutorial
Tutorial contents
Keep learning

Overview

This video tutorial teaches you how to optimize the delivery of images and videos on your WordPress site using the Cloudinary Wordpress plugin.


0:00	WordPress is a great content management system, but using it without good processes for optimizing your media assets can hurt your experience and performance. To solve your optimization problems, you can use the Cloudinary WordPress plugin, which automatically optimizes your media across your whole site.


0:29	To install the plugin, search for Cloudinary in your WordPress plugins dashboard and click Install Now followed by Activate. You should now see the Cloudinary menu entry on the sidebar.


0:47	If you don't have a Cloudinary account you can sign up for free. Click Next to begin set up. You'll need to find your connection string from the Cloudinary dashboard. Under account details, copy the API environment variable and paste it into the Connection string field of the WordPress plugin wizard. Once successfully connected, click Next to view the optimization settings. For most sites, the default settings will provide the best optimization. You're now set up and Cloudinary will start syncing your media assets to your Cloudinary product environment.

If you don't have a Cloudinary account you can sign up for free. Click Next to begin set up. You'll need to find your connection string from the Cloudinary dashboard. Under account details, copy the API environment variable and paste it into the Connection string field of the WordPress plugin wizard. Once successfully connected, click Next to view the optimization settings. For most sites, the default settings will provide the best optimization. You're now set up and Cloudinary will start syncing your media assets to your Cloudinary product environment.

Note

You can no longer access your full credentials directly from the Dashboard. Find your Cloud name on the Dashboard, and all credentials, including API Key, API Secret, and API environment variable, on the API Keys page of the Cloudinary Console Settings.

View media status and impact on site


1:56	Head to the Media section to view the sync status of your media assets. Once successfully uploaded, you can view the assets on your site. In this example, the images have been replaced by SVG placeholders to prevent the page shifting. Once loaded, you can see that the images have been automatically optimized and served by Cloudinary, including the use of automatic format and quality. This also works for videos, where the file size for the video is reduced considerably.

1:56

Head to the Media section to view the sync status of your media assets. Once successfully uploaded, you can view the assets on your site. In this example, the images have been replaced by SVG placeholders to prevent the page shifting. Once loaded, you can see that the images have been automatically optimized and served by Cloudinary, including the use of automatic format and quality. This also works for videos, where the file size for the video is reduced considerably.

Keep learning

If you like this, you might also like...

Optimization Tips

Tips for delivering optimized images

Optimize Videos in React

Optimize delivery of videos in a React app

Video Transformations

Build an e-commerce video showcasing products, in Node.js

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

✔️ Feedback sent!