More Products

Optimize images and videos in WordPress (video tutorial)

Last updated: Feb-26-2024

Overview

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

Video tutorial


Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video  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.

Install the Cloudinary WordPress plugin

Jump to this spot in the video  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.

Set up and configure the plugin

Jump to this spot in the video  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.

View media status and impact on site

Jump to this spot in the video  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

Related topics

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

 

Cloudinary Academy

 

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!

Rate this page: