Converting Multiple Images to WebP

This is how to convert your multiple any images from .png or .jpeg to .webp format with storage (Cloud) and optimization features.

WebP is so fast image format for your web app. WebP is also developed and recommended by Google. It is also extremely important for SEO and web performance with image contents. Normally, you can use Google's native WebP Converter. But this is not capable of web storage and other image optimization.

We use Cloudinary image storage for this converting solutions.There are two simple solutions to converting multiple images.

Solution 1

You can set up the pre-transformation Upload settings on Cloudinary.

Go to Settings and Add Upload Preset :

Click to Upload Manipulations :

And then click to Add Eager Transformation:

Set your pre upload.

• Choose the format as WebP
• You don't have to set the image resolution to 1080 , but most screen device is smaller than 2K or 4K for web image contents.
• You can check for other useful flags like adding unique ID of filename.

Here is the final settings should look like:

Thus, every image you upload will be automatically optimized to webp using both Media library UI or CLI.

Solution 2

But what if we want to change the images we uploaded before? In this case, we have to use Cloudinary CLI.

You can transform your all images using URL reference adding variables after /upload/ path like /c_scale,f_auto,h_517,w_1080/.

But you have to list all URL of your images.

Listing URLs

Firstly, we must install the CLI with Python PIP.

pip3 install cloudinary-cli 

Configure your CLI with your Cloudinary API KEY

export CLOUDINARY_URL=cloudinary://123456789012345:abcdefghijklmnopqrstuvwxyzA@cloud_name

• You can find your API key on dashboard.

And, we should list all images info with Search API.

You can search any variable like that, but we have to add output option for listing items to JSON file.

cld search "cat" -f context -f tags -n 10 output.json

The output should be like that:

"public_id": "5953361",
    "filename": "sasdasd-01_ek7rzs",
    "format": "webp",
    "version": 1595336182,
    "resource_type": "image",
    "type": "upload",
    "created_at": "2020-07-21T12:56:22+00:00",
    "uploaded_at": "2020-07-21T12:56:22+00:00",
    "bytes": 47488,
    "backup_bytes": 0,
    "width": 1080,
    "height": 796,
    "aspect_ratio": 1.35678,
    "pixels": 859680,
    "pages": 1,
    "url": "http://res.cloudinary.com/raufsamestone/image/upload/v1595336182/sdasdasd.ek7rzs.webp",
    "secure_url": "https://res.cloudinary.com/raufsamestone/image/upload/v1595336182/asdasd.webp",
    "status": "active",
    "access_mode": "public",
    "access_control": null,
    "etag": "581034c158165f6f9c9c872f03618a6c",
    "created_by": {
      "access_key": "126251566858748",
      "custom_id": "asdasdfas12ff",
      "external_id": "61c057372fa8c45e60a23fa51aebf1"
    },
    "uploaded_by": {
      "access_key": "126251566858748",
      "custom_id": "asdasdasdasd",
      "external_id": "61c057372fa8c45e60a23fa51aebf1"
    }
  },

And we can map the specify "URL" from JSON with Node JS for listing all URLs.

const data = require('./output.json');
const output = data.map(url => url.url);
console.log(output);

and then you can replace and modify your all URL with any IDE.

What about JAMstack?

If you are interesting in adding Cloudinary to your JAMstack project, you can check Gatsby's image optimization plugin called gatsby-transformer-cloudinary and you can connect with Netlify CMS to your Clodinary API.

@raufsamestone