5 Ways To Enhance Your Images and Videos On WordPress

This content originally appeared on DEV Community and was authored by Sharon Yelenik

It's no secret that visuals are the heart of your website. Your images and videos pump life and energy, captivating visitors and keeping them coming back.

Great visuals result in website success and increased sales. No doubt your images are carefully selected to fit your brand and captivate your audience. With the Cloudinary WordPress Plugin, the rest is automatic. You no longer have to worry about how a wide image will fit on mobile or allocate resources for personalizing 500 new product images and cropping them to fit the bounding box.

The Cloudinary WordPress Plugin seamlessly integrates into your WordPress media library, posts, tags, and other functionalities, allowing you to easily enhance, retrieve and manage your visuals without changing your workflow. Additionally, the plugin offers numerous essential optimization features in a single, comprehensive image and video management solution, eliminating the need for separate plugins for each enhancement.

Here are 5 ways to enhance the appearance of your images and videos on WordPress using the Cloudinary Plugin.

# 1 Crop Images and Videos with AI

If you're dealing with a single image, manual cropping makes sense. But with hundreds of images, automation becomes essential--and sometimes comes out even better than the human touch. That's particularly true when cropping images and videos to focus on specific areas. Check out the results you can achieve using the Cloudinary WordPress Plugin AI automatic cropping feature:

Here’s how to set cropping with AI in your Plugin’s Image settings. In the Additional image transformations section of Image – Global Settings, enter the automatic cropping and gravity parameters, c_auto,g_auto along with the desired dimensions, in this case w_600,h_600.

Tip: For more cropping options, see Image and Video resizing and cropping.

Now check out the results you can achieve using the Cloudinary WordPress Plugin AI automatic cropping feature:

• Image cropping: This landscape image needs to fit a square bounding box. A standard center crop ruins the image. However, AI-powered cropping ensures a perfect crop that focuses on the essential areas. Moreover, AI face recognition cropping delivers a profile without unnecessary noise.

Original

Cropped: c_crop,w_600,h_600

AI-powered crop: c_auto,g_auto,w_600,h_600

AI-powered crop with face recognition: c_auto,b_face,w_600,h_600

• Video cropping: In this example, the same video needs to be landscape for desktops and portrait for mobile. Simply cropping a landscape video to portrait often results in losing focus on the main subject, in this case the dog, leaving much of the viewport empty. However, by applying AI to focus on the dog, we ensure that it remains in the viewport throughout the entire video. Watch it in action!

Your browser does not support the video tag.

Original

Your browser does not support the video tag.

Regular crop: c_fill,h_400,w_244

Your browser does not support the video tag.

Crop with AI: c_fill,g_auto:dog,h_400,w_244

# 2 Personalize Images and Videos

Need to brand your visuals with watermarks? Looking to add some spice with special effects? Perhaps your videos need trimming, or your product image requires additional text? You can accomplish all that and more, with the flexibility to apply these modifications either site-wide or to specific files.

In the Video – Global Settings, specify a transformation, in this case, l_samples:logo/w_200,g_north_east,fl_layer_apply to add a watermark named “logo” from the “samples” folder of the Cloudinary Media Library, with a width or 200 pixels at the top left corner.

Here are some examples:

Watermarked Image

Zoompan Effect

Background removal with drop shadow effect

Your browser does not support the video tag.

                                                              Video with image and text overlays

# 3 Customize Your Video Player

When visitors scroll down the page, they might not notice a game-changing video you recently uploaded.

You can use Cloudinary's top-notch HTML5 Video Player available via the Plugin to make your videos pop. For example, you can select to play the video automatically when it enters the viewport. In addition, you can hide video controls and play the video infinitely. These are just a few ways to enhance user engagement with this customizable video player.

Monitor your usage using the Video Player metrics dashboard and watch your engagement increase.

This is the settings page for customizing videos. Notice that, in addition to customizing the video player, you can brand your videos with watermarks:

Take a look at this example in action:

Your browser does not support the video tag.

# 4 Upgrade Your Product Gallery

If your website is used for e-commerce, you undoubtedly showcase your product images within a gallery. As the essential method of conveying your product to visitors, the gallery you choose deserves careful consideration.

Introducing the Cloudinary Product Gallery. This visually appealing feature includes a customizable slider, video support, 360-spin sets, augmented reality (AR), and a customizable zoom mode, making it ideal for enhancing specific product pages on WooCommerce stores.

Your browser does not support the video tag.

# 5 Simplified management

Finally, simplify the organization and management of your images and videos with Cloudinary's Media Library, seamlessly integrated directly within WordPress. Explore its advanced AI-powered features like auto-tagging and smart search capabilities, all presented through a user-friendly and intuitive interface.

On Your Way to Enhanced Images and Videos

The Cloudinary WordPress Plugin consolidates all these features into a single, easy-to-configure solution. With most functionalities available out of the box, it eliminates the need to juggle multiple plugins or manually optimize and manage your media assets. You’ll be able to monitor how these features impact your site’s performance from a centralized dashboard. And, for developers or advanced users, you can adjust the Plugin's functionality to your needs using a range of filters.

Transform your WordPress site into a visual masterpiece with captivating images and videos. Start using the Cloudinary WordPress Plugin today to seamlessly enhance your media.

Next Steps

• Watch a quick setup video to get started enhancing your media assets.

• Feel free to share your thoughts with us on the Cloudinary Community Forum.

• For more detailed information, visit the Cloudinary WordPress Plugin documentation.

• Take the comprehensive Introduction to Cloudinary for WordPress Administrators Cloudinary Academy course.

• Read about how the Cloudinary WordPress Plugin can optimize your images and videos!

This content originally appeared on DEV Community and was authored by Sharon Yelenik