{"id":27856,"date":"2022-05-03T15:18:38","date_gmt":"2022-05-03T15:18:38","guid":{"rendered":"http:\/\/image-optimization-with-cloudinary"},"modified":"2025-04-16T12:58:47","modified_gmt":"2025-04-16T19:58:47","slug":"image-optimization-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/image-optimization-with-cloudinary\/","title":{"rendered":"Image Optimization with Cloudinary"},"content":{"rendered":"

With websites being accessed from many devices worldwide, the attention paid to image delivery could be the difference between high customer retention and a high website bounce rate. Special attention has to be paid to the nature of the devices available and tailoring the delivered image to each device to ensure maximum satisfaction. However, it doesn\u2019t stop there; we also need to consider the size of the image to be delivered and how this can be managed to provide a smooth user experience. This is what is referred to as image optimization.<\/p>\n

Cloudinary<\/a> has made a name for itself by not only providing a means of image storage but also providing fast CDN delivery, which helps to get resources to your users quickly. Additionally, Cloudinary automatically performs certain optimizations on transformed images and videos by default and it also provides features that enable you to optimize your media further to fit your needs.<\/p>\n

In this article, we\u2019ll look at how to optimize images for various screen sizes by building a simple photo album application with React<\/a>. This application will allow us to upload multiple images to our Cloudinary account and then view them in a grid.<\/p>\n

For UI components in our application, we will use antd<\/a> while axios<\/a> will be used for uploading our images to our Cloudinary account.<\/p>\n

Here is a link<\/a> to the demo CodeSandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Setting Up the Project<\/h2>\n

Create a React application using the following command:<\/p>\n

npx create-react-app image_optimization_demo\n<\/code><\/span><\/pre>\n
Next, let\u2019s add the project dependencies.<\/p>\n
npm<\/span> install<\/span> antd<\/span> @ant-design<\/span>\/icons axios\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Add Styling<\/h2>\n
Let\u2019s import the CSS for antd. Open your src\/App.css<\/code> file and edit its content to match the following:<\/p>\n
@import<\/span> '~antd\/dist\/antd.css'<\/span>;\n\n.overlay<\/span> {\n    position<\/span>: fixed;\n    display<\/span>: none;\n    width<\/span>: 100%<\/span>;\n    height<\/span>: 100%<\/span>;\n    top<\/span>: 0<\/span>;\n    left<\/span>: 0<\/span>;\n    right<\/span>: 0<\/span>;\n    bottom<\/span>: 0<\/span>;\n    background-color<\/span>: rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0.5<\/span>);\n    z-index<\/span>: 2<\/span>;\n    cursor<\/span>: pointer;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
We also declare the styling for a class named overlay<\/code>. This will be used to blur the screen when the user is uploading images.<\/p>\n
For the image grid, we\u2019ll also need some custom styling. Create a new file called Grid.css<\/code> in the src<\/code> folder and add the following to it:<\/p>\n
.gallery<\/span> {\n    display<\/span>: grid;\n    grid-gap<\/span>: 10px<\/span>;\n    grid-template-columns<\/span>: repeat<\/span>(auto-fit, minmax(150px<\/span>, 1<\/span>fr));\n}\n\n.gallery<\/span> img<\/span> {\n    width<\/span>: 100%<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Create Helper Class for API Requests<\/h2>\n
To help with requests to the Cloudinary API, in your src<\/code> folder, create a folder called util<\/code>, and inside it, create a file called api.js<\/code> and add the following to it:<\/p>\n
import<\/span> axios from<\/span> \"axios\"<\/span>;\n\nexport<\/span> const<\/span> getImages = ({ successCallback }<\/span>) =><\/span> {\n  axios\n    .get(`https:\/\/res.cloudinary.com\/YOURCLOUDNAME\/image\/list\/image_optimization_demo.json`<\/span>)\n    .then((response<\/span>) =><\/span> successCallback(response.data.resources));\n};\n\nexport<\/span> const<\/span> uploadFiles = ({ selectedFiles, successCallback }<\/span>) =><\/span> {\n  const<\/span> uploadResults = [];\n  selectedFiles.forEach((file<\/span>) =><\/span> {\n    uploadFile({\n      file,\n      successCallback<\/span>: (response<\/span>) =><\/span> {\n        uploadResults.push(response);\n        if<\/span> (uploadResults.length === selectedFiles.length) {\n          successCallback(uploadResults);\n        }\n      },\n    });\n  });\n};\n\nconst<\/span> uploadFile = ({ file, successCallback }<\/span>) =><\/span> {\n  const<\/span> url = `https:\/\/api.cloudinary.com\/v1_1\/YOURCLOUDNAME\/image\/upload`<\/span>;\n  const<\/span> data = new<\/span> FormData();\n  data.append(\"file\"<\/span>, file);\n  data.append(\"upload_preset\"<\/span>, \"YOURUPLOADPRESET\"<\/span>);\n  data.append(\"tags\"<\/span>, \"image_optimization_demo\"<\/span>);\n\n  axios\n    .post(url, data, {\n      headers<\/span>: {\n        \"Content-Type\"<\/span>: \"multipart\/form-data\"<\/span>,\n      },\n    })\n    .then((response<\/span>) =><\/span> successCallback(response.data));\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
To ensure that this feature is available on your Cloudinary account, you need to enable the \u00a0Resource list option. By default, the list delivery type is restricted. To enable it, open the Security settings<\/strong> in your Management console and clear the Resource list<\/strong> item under Restricted image types<\/strong>. You may want to clear this option only temporarily, as needed. Alternatively, you can bypass this (and any) delivery type restriction using a signed URL.<\/p>\n
\"https:\/\/paper-attachments.dropbox.com\/s_A1DDAD984DA0826D5292CEA08A9DCD06B2B4DA9D1A22D2ADC7A3AAC80A765B17_1638657976854_Screenshot+2021-12-04+at+23.45.51.png\"<\/p>\n
The uploadFiles<\/code> function is used to upload the selected images to Cloudinary. It iterates through the list of selected images and, using the uploadImage<\/code> function, uploads the image to Cloudinary, attaching the image_optimization_demo<\/code> tag to the image. This will be used to filter the images in our store and only retrieve the album images when we want to populate the grid. A callback function is also provided, which will be executed once all the images have been uploaded. This callback function also receives the result of the upload process, which can be used elsewhere in the application.<\/p>\n
\n
Update YOURCLOUDNAME and YOURUPLOADPRESET as specified in your Cloudinary account.<\/p>\n<\/blockquote>\n
Creating the ImageUpload<\/code> Component<\/h2>\n
Next, let\u2019s create a component to upload images to Cloudinary. In the src<\/code> directory, create a new folder named components<\/code>.<\/p>\n
In the src\/components<\/code> directory, create a new file called ImageUpload.js<\/code> and add the following to it:<\/p>\n
import<\/span> { Upload, Button, Card, Col, Row } from<\/span> \"antd\"<\/span>;\nimport<\/span> { UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\nimport<\/span> { useEffect, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { uploadFiles } from<\/span> \"..\/util\/api\"<\/span>;\n\nconst<\/span> ImageUpload = ({ onCompletion }<\/span>) =><\/span> {\n  const<\/span> [selectedFiles, setSelectedFiles] = useState([]);\n  const<\/span> [showSubmitButton, setShowSubmitButton] = useState(false<\/span>);\n  const<\/span> [isUploading, setIsUploading] = useState(false<\/span>);\n\n  useEffect(()<\/span> =><\/span> {\n    setShowSubmitButton(selectedFiles.length > 0<\/span>);\n  }, [selectedFiles]);\n\n  const<\/span> addFile = (file<\/span>) =><\/span> {\n    setSelectedFiles((currentSelection<\/span>) =><\/span> [...currentSelection, file]);\n  };\n\n  const<\/span> removeFile = (file<\/span>) =><\/span> {\n    setSelectedFiles((currentSelection<\/span>) =><\/span> {\n      const<\/span> newSelection = currentSelection.slice();\n      const<\/span> fileIndex = currentSelection.indexOf(file);\n      newSelection.splice(fileIndex, 1<\/span>);\n      return<\/span> newSelection;\n    });\n  };\n\n  const<\/span> beforeUpload = (file<\/span>) =><\/span> {\n    addFile(file);\n    return<\/span> false<\/span>;\n  };\n\n  const<\/span> successCallback = (response<\/span>) =><\/span> {\n    setIsUploading(false<\/span>);\n    onCompletion(response);\n  };\n  \n  const<\/span> handleSubmit = ()<\/span> =><\/span> {\n    setIsUploading(true<\/span>);\n    uploadFiles({ selectedFiles, successCallback });\n  };\n\n  return<\/span> (\n    <Card<\/span>\n      style<\/span>={{<\/span>\n        position:<\/span> \"fixed<\/span>\",\n        top:<\/span> \"50<\/span>%\",\n        left:<\/span> \"50<\/span>%\",\n        transform:<\/span> \"translate<\/span>(-50<\/span>%, -50<\/span>%)\",\n      }}\n    ><\/span>\n      <Upload<\/span>\n        onRemove<\/span>={removeFile}<\/span>\n        addFile<\/span>={addFile}<\/span>\n        beforeUpload<\/span>={beforeUpload}<\/span>\n        fileList<\/span>={selectedFiles}<\/span>\n        multiple<\/span>={true}<\/span>\n        accept<\/span>=\"image\/*\"<\/span>\n      ><\/span>\n        {!showSubmitButton && <Button<\/span>><\/span>Select files<\/Button<\/span>><\/span>}\n      <\/Upload<\/span>><\/span>\n      {showSubmitButton && (\n        <Row<\/span>><\/span>\n          <Col<\/span> offset<\/span>={9}<\/span> span<\/span>={6}<\/span>><\/span>\n            <Button<\/span>\n              icon<\/span>={<\/span><UploadOutlined<\/span> \/><\/span>}\n              type=\"primary\"\n              onClick={handleSubmit}\n              loading={isUploading}\n            >\n              Upload\n            <\/Button<\/span>><\/span>\n          <\/Col<\/span>><\/span>\n        <\/Row<\/span>><\/span>\n      )}\n    <\/Card<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> ImageUpload;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In this component, we declare three state variables – one to keep track of user file selection, another to determine whether or not the submit button should be rendered, and the last to determine whether or not files are being uploaded, and this will be used to show a loading animation on the submit button when the images are being uploaded.<\/p>\n
We use the useEffect<\/code> hook to keep track of the number of files selected by the user. Once the user has selected some files, we render the submit<\/code> button to allow the user to upload the current selection. However, if the user has not selected any file, the submit button is not rendered.<\/p>\n
The file selection in state is modified using the addFile<\/code> and removeFile<\/code> functions. These are used by the Upload<\/code> component to update the list of files in state based on the user\u2019s action.<\/p>\n
The beforeUpload<\/code> function is passed to the Upload<\/code> component as a prop. It returns false<\/code> to prevent the automatic upload of files by antd.<\/p>\n
The handleSubmit<\/code> function is used as a handler for when the Upload<\/code> button is clicked. This function sets the isUploading<\/code> state variable to true<\/code> and calls the uploadFiles<\/code> function we declared earlier to initiate the upload process.<\/p>\n
Finally, we declare the JSX for the component, a button the user clicks to select the files they wish to upload, and a button (which is rendered conditionally depending on whether or not the user has selected any image). Using the accept<\/code> prop for the Upload<\/code> component, we restrict the possible selection of files to images.<\/p>\n
Creating the ImageGrid<\/code> Component<\/h2>\n
In the src\/components<\/code> directory, create a new file called ImageGrid.js<\/code> and add the following to it:<\/p>\n
import<\/span> \"..\/Grid.css\"<\/span>;\n\nconst<\/span> baseUrl = \"https:\/\/res.cloudinary.com\/YOURCLOUDNAME\/image\/upload\"<\/span>;\n\nconst<\/span> generateSrcSet = (image<\/span>) =><\/span>\n  `\n  ${baseUrl}<\/span>\/w_400,h_300,c_scale\/v${image.version}<\/span>\/${image.public_id}<\/span>.${image.format}<\/span> 400w,\n  ${baseUrl}<\/span>\/w_800,h_600,c_scale\/v${image.version}<\/span>\/${image.public_id}<\/span>.${image.format}<\/span> 800w,\n  ${baseUrl}<\/span>\/w_1200,h_900,c_scale\/v${image.version}<\/span>\/${image.public_id}<\/span>.${image.format}<\/span> 1200w,\n  `<\/span>;\n\nconst<\/span> ImageGrid = ({ images }<\/span>) =><\/span> {\n  return<\/span> (\n    <div<\/span> className<\/span>=\"gallery\"<\/span>><\/span>\n      {images.map((image) => (\n        <img<\/span>\n          key<\/span>={image.public_id}<\/span>\n          src<\/span>={<\/span>`${baseUrl<\/span>}\/w_400<\/span>,h_200<\/span>,c_scale<\/span>\/v<\/span>${image.version<\/span>}\/${image.public_id<\/span>}.<\/span>${image.format<\/span>}`}\n          srcSet<\/span>={generateSrcSet(image)}<\/span>\n          sizes<\/span>=\"(max-width: 768px) 300px,(max-width: 992px) 600px, 900px\"<\/span>\n        \/><\/span>\n      ))}\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> ImageGrid;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
To ensure that the images are optimized for screen size, in addition to providing a default image source (in the src<\/code> prop), we declare two additional props – srcSet<\/code> and sizes<\/code>. Using these, the image source and size are set based on the screen width of the user\u2019s device.<\/p>\n
The string value of the srcSet<\/code> prop is generated using the generateSrcSet<\/code> function. The generateSrcSet<\/code> function takes advantage of Cloudinary\u2019s URL transformation feature to generate three versions of the same image on the fly.<\/p>\n
\n
Update YOURCLOUDNAME in the baseUrl with your cloud name.<\/p>\n<\/blockquote>\n
Putting it Together<\/h2>\n
Finally, modify your src\/App.js<\/code> file to match the following:<\/p>\n
import<\/span> \".\/App.css\"<\/span>;\nimport<\/span> { UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\nimport<\/span> { message, Menu } from<\/span> \"antd\"<\/span>;\nimport<\/span> ImageGrid from<\/span> \".\/components\/ImageGrid\"<\/span>;\nimport<\/span> ImageUpload from<\/span> \".\/components\/ImageUpload\"<\/span>;\nimport<\/span> { useEffect, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { getImages } from<\/span> \".\/util\/api\"<\/span>;\n\nconst<\/span> items = [\n  {\n    label<\/span>: \"Upload Image\"<\/span>,\n    key<\/span>: \"upload\"<\/span>,\n    icon<\/span>: <UploadOutlined<\/span> \/><\/span><\/span>,\n  },\n];\n\nconst<\/span> App = ()<\/span> =><\/span> {\n  const<\/span> [images, setImages] = useState([]);\n  const<\/span> [showImageUpload, setShowImageUpload] = useState(true<\/span>);\n\n  useEffect(()<\/span> =><\/span> {\n    getImages({\n      successCallback<\/span>: (response<\/span>) =><\/span> {\n        setImages(response);\n        setShowImageUpload(response.length === 0<\/span>);\n      },\n    });\n  }, []);\n\n  const<\/span> onCompletion = (response<\/span>) =><\/span> {\n    setImages(response);\n    message.success(\"Images uploaded successfully\"<\/span>);\n    setShowImageUpload(false<\/span>);\n  };\n\n  return<\/span> (\n    <div<\/span> style<\/span>={{<\/span> margin:<\/span> \"1<\/span>%\" }}><\/span>\n      <div<\/span>\n        className<\/span>=\"overlay\"<\/span>\n        style<\/span>={{<\/span>\n          display:<\/span> `${showImageUpload<\/span> ? \"block<\/span>\" :<\/span> \"none<\/span>\"}`,\n        }}\n      ><\/span>\n        <ImageUpload<\/span> onCompletion<\/span>={onCompletion}<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <Menu<\/span>\n        onClick<\/span>={()<\/span> =><\/span> {\n          setShowImageUpload(true);\n        }}\n        mode=\"horizontal\"\n        items={items}\n        style={{ marginBottom: \"10px\" }}\n      \/>\n      <ImageGrid<\/span> images<\/span>={images}<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
On page load, we retrieve the images from Cloudinary using the getImages<\/code> function declared earlier. If the result is an empty array, then we render the ImageUpload<\/code> component. If not, we pass the resources to the ImageGrid<\/code> component to be rendered accordingly.<\/p>\n
Conclusion<\/h2>\n
In this article, we created a basic photo album application and took advantage of the srcset<\/code> and sizes<\/code> HTML attribute to optimize the size of images rendered based on the user\u2019s device screen size.<\/p>\n
In the generation of the srcSet<\/code> string, we saw one of the advantages of using Cloudinary. We were able to use the URL transformation feature to generate images of different sizes without duplicating and modifying the images for each screen size manually. However, it doesn\u2019t stop there, as Cloudinary provides additional optimizations that make for a seamless experience.<\/p>\n
By default, all metadata is stripped from the images being returned. This reduces the image size and the time taken to download the image. Also, by providing the images via CDN, the waiting time to retrieve the images is reduced, thus making for a quick retrieval and download process.<\/p>\n
** Resources you may find helpful: **<\/p>\n
Find the complete project here<\/a> on GitHub.<\/p>\n
The ImageGrid<\/code> component takes an array of Cloudinary image<\/a> resources as a prop, iterates through the array, and renders each image.<\/p>\n
In the getImages<\/code> function, we use the Client-side asset lists<\/a> feature to retrieve the list of images with the tag image_optimization_demo<\/code>.<\/p>\n
For this tutorial, we will be sending images to Cloudinary via unsigned POST \u00a0requests. To do this, we need our account cloud name and an unsigned upload preset<\/a>.<\/p>\n