{"id":28338,"date":"2022-06-10T08:38:57","date_gmt":"2022-06-10T08:38:57","guid":{"rendered":"http:\/\/resize-an-image-in-react.js-using-cloudinary"},"modified":"2022-06-10T08:38:57","modified_gmt":"2022-06-10T08:38:57","slug":"resize-an-image-in-react-js-using-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/","title":{"rendered":"Resize an Image in React.js Using Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Whether we are building a blog, website, or social media platform, resizing images can help with faster load time and increase our application\u2019s performance.<\/p>\n<p>In this article, we will be learning how to resize images in a React.js application using Cloudinary.<\/p>\n<h1>Sandbox<\/h1>\n<p>We completed this project in <a href=\"https:\/\/codesandbox.io\/s\/empty-water-iur1bf?file=\/src\/resize.js\">Codesandbox<\/a>. Fork and get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/empty-water-iur1bf?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Resize image in React.js using Cloudinary\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h1>Github<\/h1>\n<p>Check out the complete source code here:<\/p>\n<p><a href=\"https:\/\/github.com\/shosenwales\/Image-resize\">https:\/\/github.com\/shosenwales\/Image-resize<\/a><\/p>\n<h1>Prerequisites<\/h1>\n<p>The following are required for this article:<\/p>\n<ul>\n<li>Basic understanding of React<\/li>\n<li>A Cloudinary account (create a free account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">here<\/a>)<\/li>\n<\/ul>\n<h1>Project Setup<\/h1>\n<p>We will start by creating a new React project by running the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">npx create-react-app <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project-name<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After successfully creating a project, let\u2019s navigate into the project directory, install the <a href=\"https:\/\/www.npmjs.com\/package\/cloudinary-react\">cloudinary-react<\/a> package, and start the application with the following commands:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    cd &lt;project-name&gt;  <span class=\"hljs-comment\">#changing directory<\/span>\n    npm install cloudinary-react <span class=\"hljs-comment\">#installs the cloudinary-react library<\/span>\n    npm start        <span class=\"hljs-comment\">#starting development server<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>React will start a development environment, which we can access at <code>localhost:3000<\/code>.<\/p>\n<h1>Get Images from Cloudinary<\/h1>\n<p>We\u2019ll use two of the images from the Cloudinary demo accounts for this project. We can find the images <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/basketball_in_net.jpg\">here<\/a> and <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/butterfly.jpg\">here<\/a>.<\/p>\n<p>Learn how to upload photos to Cloudinary by reading this blog <a href=\"https:\/\/medium.com\/geekculture\/how-to-upload-images-to-cloudinary-with-a-react-app-f0dcc357999c\">post<\/a>.<\/p>\n<h1>Resizing an Image<\/h1>\n<p>With Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#landingpage\">Image transformation feature<\/a>, images can be resized using any of the following techniques:<\/p>\n<ul>\n<li>Scaling and cropping techniques<\/li>\n<li>Smart cropping techniques<\/li>\n<\/ul>\n<p>Now, let\u2019s look at these techniques in detail.<\/p>\n<h2>Scaling and Cropping Techniques<\/h2>\n<p>This technique allows us to resize images by setting the image height, width, and crop\/resize mode.<\/p>\n<p>Cloudinary has a wide range of crop\/resize modes that can dynamically resize images. Let\u2019s try out some of these modes by creating a resize.js component in our <code>src<\/code> directory and adding the following code snippet:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { CloudinaryContext, Image, Transformation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"cloudinary-react\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Images<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryContext<\/span> <span class=\"hljs-attr\">cloudName<\/span>=<span class=\"hljs-string\">\"demo\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">publicId<\/span>=<span class=\"hljs-string\">\"basketball_in_net.jpg\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"limit\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">publicId<\/span>=<span class=\"hljs-string\">\"basketball_in_net.jpg\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fill\"<\/span>\/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CloudinaryContext<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Let\u2019s break down the code above:<\/p>\n<ul>\n<li>\n<code>crop=&quot;limit&quot;<\/code>: this cropping mode limits our image size after specifying the width and height, we\u2019ll have an image that does not exceed our given width and height while resizing our image from its original 1000 x 635, to 200 x 127<\/li>\n<li>\n<code>crop=&quot;fill&quot;<\/code>: by setting the width and height of an image, this cropping mode resizes our image to fill specified dimensions<\/li>\n<\/ul>\n<p>The complete list of Cloudinary supported resize\/crop modes can be found <a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping#resize_and_crop_modes\">here<\/a>.<\/p>\n<h2>Smart Cropping Techniques<\/h2>\n<p>Cloudinary allows us to use its intelligent cropping techniques, including face detection or auto-gravity, to focus on the essential parts of an image.<\/p>\n<p>Let\u2019s try this out by adding the following code snippet to our resize.js component:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">publicId<\/span>=<span class=\"hljs-string\">\"butterfly.jpg\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Transformation<\/span> <span class=\"hljs-attr\">gravity<\/span>=<span class=\"hljs-string\">\"face\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fill\"<\/span>\/&gt;<\/span>\n <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We used the gravity=\u201cface\u201d parameter from the code above to automatically crop our image based on the detected face, which creates a 200 x 200 image with the fill cropping mode to keep as much as possible of the original image.<\/p>\n<p>If we run our code, we should have the result below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_456E98A68B97EDC27C7F3E2B1DBE2425F55C28CE1DF05EBBC603C8DCCD429481_1653302929303_2022-05-23+11_47_38-empty-water-iur1bf+-+CodeSandbox.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"437\" height=\"363\"\/><\/p>\n<h1>Conclusion<\/h1>\n<p>This article taught us how to resize images in React.js using Cloudinary\u2019s Resize and Cropping modes. Now we can easily resize and crop our images in React using Cloudinary\u2019s Transformation tools.<\/p>\n<h1>Resources<\/h1>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#landingpage\">Cloudinary Image transformation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping\">Cloudinary Image resizing and croping<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/face_detection_based_transformations#face_detection_based_cropping\">Cloudinary Face detection based cropping<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28339,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,246,371],"class_list":["post-28338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Resize an Image in React.js Using Cloudinary<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resize an Image in React.js Using Cloudinary\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T08:38:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Resize an Image in React.js Using Cloudinary\",\"datePublished\":\"2022-06-10T08:38:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\",\"name\":\"Resize an Image in React.js Using Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA\",\"datePublished\":\"2022-06-10T08:38:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA\",\"width\":5184,\"height\":3456},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resize an Image in React.js Using Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Resize an Image in React.js Using Cloudinary","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/","og_locale":"en_US","og_type":"article","og_title":"Resize an Image in React.js Using Cloudinary","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T08:38:57+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/"},"author":{"name":"","@id":""},"headline":"Resize an Image in React.js Using Cloudinary","datePublished":"2022-06-10T08:38:57+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA","keywords":["Guest Post","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/","name":"Resize an Image in React.js Using Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA","datePublished":"2022-06-10T08:38:57+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA","width":5184,"height":3456},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/resize-an-image-in-react-js-using-cloudinary\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Resize an Image in React.js Using Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924772\/Web_Assets\/blog\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744\/4fdf004bb69c300799da3f93bd161be733766c4f-5184x3456-1_283398c744.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28338"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28339"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}