Optimizing images can significantly improve loading times, reduce bandwidth usage, and improve the overall user experience. When images are properly optimized, they load quickly and look great, which can keep visitors on the site for longer and increase the chances of them returning in the future. Additionally, optimized images can improve search engine optimization (SEO) by reducing loading times and helping to improve your site’s ranking in search engine results. Thus, image optimization is a crucial aspect of website design that can have a big impact on user engagement and website performance.

This tutorial will walk you through some steps that it’s going to take in order to optimize your images using the service offered by Cloudinary.

Step 1: Have an account in “Cloudinary.com”.

To get started with image optimization, you should first have an account in “Cloudinary.com”. To register/sign up your account on Cloudinary, go to https://cloudinary.com/users/register_free and follow the instructions. 


Step 2: Login with the credentials you used to Sign Up

Step 3: Once you are successfully logged in, you should be able to see the Cloudinary dashboard as shown in the screen below:

Desktop version

Tablet version

Step 4: On the navigation bar, you can see a “Media library” tab. Click on it.

Desktop version

Tablet version

Note: This step is for tablet version only 

Step 5: On the media library page there is a tab bar with Assets, Folders, Collections and Moderation tabs. Go to the “Folders” tab.

Step 6: Creating a folder

You will be driven to a page where you will see an add folder icon.

Desktop version

Tablet version


Click on the icon, you will be asked to enter the folder name

Enter the folder name of your choice.

Let’s say the folder “apartment” is created.

Your newly created folder will appear as in the screen below.

Desktop Version:

Tablet version

Click on the folder to go inside it. You will see something like this:

Desktop version

Tablet version

Step 7: Uploading the image

Click on the “Upload” button inside the folder you have created earlier.

Desktop version

Tablet version

Browse the image from your PC and Upload

Step 8: Edit and Download the image

Now that you have uploaded the image, you can move further towards optimizing it by double clicking on the image.

Desktop version

Tablet version

You will see the following screen

Note: Upcoming screens are same for both the desktop and the tablet version

There are two different features available to edit the image:


      1. Transformation Presets

      1. Resize and Crop


        1. Using Transformation Presets

      At the bottom, there are different transformation presets such as Banner(tall), Banner(wide), Circle, Sharpened, Square and so on. You can use those presets as per your requirements.

      For instance, I have used the sharpened feature as shown in the screen below:

      Once you are done with editing, you can click on the download icon as shown in the screen

      This will automatically download the optimized image to your PC.


          1. Resize and Crop

        Click on the edit icon as shown in the screen below

        You will see a screen with different editing options that will allow you to resize and crop your image. Use those options to meet your requirements for an optimized image.

        For every changes you make using the editing options, you should click on the “Refresh Preview” button appearing on the center of the image that is being edited to be able to see the updates.

        After making changes using the editing options. “Refresh Preview” shows up

        After clicking the Refresh Preview button, changes are updated.

        Once you are done with using the resize and crop feature, you can click the refresh preview button as mentioned earlier before you download the image.

        Note: If you miss to refresh, changes you made won’t be updated.

        For downloading, you should click on the link that appears under the image you edited as in the screen below:

        This will drive you to a page in new tab which contains the optimized version of your image.

        Right click on the image, which will show the “save image as” option. Click it to save the image in your desired location on your PC.

        Eventually, you will be able to download your optimized image.