Enhance and restore images (video tutorial)

Overview

Watch this tutorial to learn how to improve the visual appeal of images and remove compression artifacts using AI.

Video tutorial

Tutorial contents

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

Enhancing user-generated content

0:00	User-generated content plays a crucial role in engaging audiences and building trust, but some images that users upload can be poor quality, and not reflective of your brand. Cloudinary can help to revitalize these images by using AI to restore quality and enhance their visual appeal.

Different improvement options

0:47	There are many options that you can use to improve the images on your site, and they can even be combined to take advantage of all their strengths. You can use any of the Cloudinary SDKs to apply the enhancements to your delivered images programmatically. A React environment is used in this tutorial.

Generative restore

1:06	The generative restore effect uses generative AI to recover image details lost due to compression and over-processing. Install and configure the React SDK, then instantiate a CloudinaryImage object for the image you want to improve. Import generativeRestore from @cloudinary/url-gen/actions/effect and apply the effect to the image:

Compare images

1:39	Use the react-compare-slider library to compare the original image with the restored image.

Upscale

2:10	Upscaling, by simply increasing the dimensions of an image, makes the quality worse. Cloudinary's super-resolution upscale effect increases the quality, especially for faces. Import upscale from @cloudinary/url-gen/actions/effect and apply the effect to the image:

Enhance

2:59	The enhance effect uses AI to analyze the image, then applies various operators to enhance it, improving, for example, exposure, color balance and white balance. Import enhance from @cloudinary/url-gen/actions/effect and apply the effect to the image:

Improve

3:26	The improve effect uses a filter to adjust the colors, contrast and lighting. Import enhance from @cloudinary/url-gen/actions/effect and apply the effect to the image:

Combine all the effects

3:46	You can combine all the effects to take advantage of all their strengths. Each effect is applied to the result of the previous:

---

Keep learning

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

 

 

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.