{"id":28161,"date":"2022-04-06T02:18:34","date_gmt":"2022-04-06T02:18:34","guid":{"rendered":"http:\/\/robust-optimization-and-delivery-on-hosted-images"},"modified":"2022-04-06T02:18:34","modified_gmt":"2022-04-06T02:18:34","slug":"robust-optimization-and-delivery-on-hosted-images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/","title":{"rendered":"Robust optimization and delivery on hosted images"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Reusability is at the heart of web development, using hosted images across multiple applications and websites. The need to transform, optimize, and deliver a version of that image with each application may arise.<\/p>\n<p>This post discusses applying robust transformations and optimizations on hosted images in a Next.js website. <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a>, which we will employ, provides a feature to manage this and a suite of image enhancements and optimizations.<\/p>\n<p><strong>Images used in this project<\/strong><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/images.pexels.com\/photos\/6354732\/pexels-photo-6354732.jpeg\">Flying man<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/reefit.netlify.app\/img\/eloho.jpg\">Marathoner<\/a>\n<\/li>\n<\/ul>\n<h2>Sandbox<\/h2>\n<p>This post is completed in a <a href=\"https:\/\/codesandbox.io\/s\/image-optimization-pxrefs\">CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/image-optimization-pxrefs?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=\"implement robust optimization\"\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 \"><p>Check out the <a href=\"https:\/\/github.com\/Terieyenike\/react-cloudinary-image-optimisation\">source code<\/a> on Github.<\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/nodejs.org\/en\/\">Node<\/a> for installing dependencies<\/li>\n<li>Knowledge of <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>\n<\/li>\n<li>A text\/code editor<\/li>\n<\/ul>\n<h2>Setting up the application<\/h2>\n<p>We create a Next.js application using the following command:<\/p>\n<p><code>npx create-next-app image-optimizations &amp;&amp; cd image-optimizations<\/code><\/p>\n<p>Next, we install the Cloudinary packages using <code>yarn<\/code>.<\/p>\n<pre><code>yarn add @cloudinary\/url-gen @cloudinary\/react\n\n# or \n\nnpm i @cloudinary\/url-gen @cloudinary\/react\n<\/code><\/pre>\n<ul>\n<li>\n<code>@cloudinary\/url-gen<\/code>: Includes particular components and directives for easy embedding of assets in our app<\/li>\n<li>\n<code>@cloudinary\/react<\/code>: used to render images on our site<\/li>\n<\/ul>\n<p>Next, let\u2019s install the <code>classnames<\/code> package, a JavaScript utility for conditionally joining <code>classNames<\/code> together in writing the CSS modules for styling.<\/p>\n<pre><code>yarn add classnames\n\n# or \n\nnpm i classnames\n<\/code><\/pre>\n<p>Finally, we start a local development server with the command.<\/p>\n<pre><code>yarn dev\n\n# or \n\nnpm run dev\n<\/code><\/pre>\n<h2>Using Fetch URL<\/h2>\n<p>We will use the fetch-url feature of Cloudinary to deliver the hosted image.<\/p>\n<p>Before adding transformations to any component in our project, we create a file in the component directory that renders the transformed image.<\/p>\n<p>In the component\/Marathoner.js file we create, we include the following code to display an image using the fetch URL, prefixed to the URL of the image.<\/p>\n<p>component\/Marathoner.js<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" 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> { Cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { AdvancedImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/react\"<\/span>;\n    \n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n    \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\">Marathoner<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> cld = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n        <span class=\"hljs-attr\">cloud<\/span>: {\n          <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>\n        }\n      });\n      <span class=\"hljs-keyword\">const<\/span> myImage = cld\n        .image(<span class=\"hljs-string\">\"https:\/\/reefit.netlify.app\/img\/eloho.jpg\"<\/span>)\n        .setDeliveryType(<span class=\"hljs-string\">\"fetch\"<\/span>);\n    \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\">AdvancedImage<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.img}<\/span>\n            <span class=\"hljs-attr\">cldImg<\/span>=<span class=\"hljs-string\">{myImage}<\/span>\n          \/&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-1\"><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><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_0D12BB57618205B87E17B12E5B08CD3885C6760EC64D97CB00BB17BD40950433_1645824800876_image.png\" alt=\"lagos marathoner\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"378\" height=\"308\"\/><\/p>\n<p>The above snippet creates and configures a new Cloudinary instance using a public identifier, <code>cloudName<\/code>. You can get this from your Cloudinary dashboard after <a href=\"https:\/\/cloudinary,com\">you create an account<\/a>.<\/p>\n<p>Using the Cloudinary instance created, we defined a new image pointing to a publicly hosted photo, and we set the delivery type to fetch.\nLastly, we rendered the transformed image using the <code>AdvancedImage<\/code> component.<\/p>\n<p>We create a file called <code>Home.module.css<\/code> in the styles folder having the following content.<\/p>\n<p>styles\/Home.module.css<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-keyword\">@import<\/span> url(<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css?family=Poppins:200,300,400,500,600,700,800,900&amp;display=swap\"<\/span>);\n    \n    <span class=\"hljs-selector-class\">.main<\/span> {\n      <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Poppins\"<\/span>, sans-serif;\n    }\n    <span class=\"hljs-selector-class\">.align<\/span> {\n      <span class=\"hljs-attribute\">text-align<\/span>: center;\n    }\n    <span class=\"hljs-selector-class\">.img<\/span> {\n      <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">display<\/span>: block;\n    }\n    <span class=\"hljs-selector-class\">.container<\/span> {\n      <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">75rem<\/span>;\n      <span class=\"hljs-attribute\">padding-inline<\/span>: <span class=\"hljs-number\">2em<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: auto;\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">85%<\/span>;\n    }\n    <span class=\"hljs-selector-class\">.space<\/span> {\n      <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">2em<\/span>;\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Applying transformations to a hosted image<\/h2>\n<p>After delivering the image, we want to add transformations to it.\nUsing <code>@cloudinary\/url-gen<\/code>, we can import specific Cloudinary transformation actions and qualifiers. These are then used to build a complete image URL with transformations.<\/p>\n<p>Alternatively, we could apply <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">on-the-fly transformations<\/a> to the image by modifying the resulting image URL.<\/p>\n<p>Still in the <code>component\/Marathoner.js<\/code>, include the following code to transform the image.<\/p>\n<p>component\/Marathoner.js<\/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> { Cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { AdvancedImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { Transformation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\"<\/span>;\n    \n    <span class=\"hljs-comment\">\/\/ import required actions and qualifiers<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { thumbnail, scale } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { byRadius } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/roundCorners\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { grayscale } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/effect\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { source } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/overlay\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { FocusOn } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/qualifiers\/focusOn\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { Position } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/qualifiers\/position\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { focusOn } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/qualifiers\/gravity\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { compass } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/qualifiers\/gravity\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { image } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/qualifiers\/source\"<\/span>;\n    \n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n\n    <span class=\"hljs-comment\">\/\/ javascript utility for classnames<\/span>\n    <span class=\"hljs-keyword\">import<\/span> cls <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"classnames\"<\/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\">Marathoner<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> cld = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n        <span class=\"hljs-attr\">cloud<\/span>: {\n          <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>\n        }\n      });\n      <span class=\"hljs-keyword\">const<\/span> myImage = cld\n        .image(<span class=\"hljs-string\">\"https:\/\/reefit.netlify.app\/img\/eloho.jpg\"<\/span>)\n        .setDeliveryType(<span class=\"hljs-string\">\"fetch\"<\/span>);\n    \n      myImage\n        .resize(thumbnail().width(<span class=\"hljs-number\">250<\/span>).height(<span class=\"hljs-number\">250<\/span>).gravity(focusOn(FocusOn.face()))) \n        .roundCorners(byRadius(<span class=\"hljs-number\">20<\/span>))\n        .effect(grayscale())\n        .overlay(\n          source(\n            image(<span class=\"hljs-string\">\"cloudinary_icon_blue\"<\/span>).transformation(\n              <span class=\"hljs-keyword\">new<\/span> Transformation().resize(scale(<span class=\"hljs-number\">50<\/span>))\n            )\n          ).position(\n            <span class=\"hljs-keyword\">new<\/span> Position().gravity(compass(<span class=\"hljs-string\">\"south_west\"<\/span>)).offsetX(<span class=\"hljs-number\">10<\/span>).offsetY(<span class=\"hljs-number\">5<\/span>)\n          )\n        );\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\">AdvancedImage<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{cls(styles.img,<\/span> <span class=\"hljs-attr\">styles.space<\/span>)}\n            <span class=\"hljs-attr\">cldImg<\/span>=<span class=\"hljs-string\">{myImage}<\/span>\n          \/&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><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_0D12BB57618205B87E17B12E5B08CD3885C6760EC64D97CB00BB17BD40950433_1645828257732_image.png\" alt=\"flying man\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"407\" height=\"385\"\/><\/p>\n<p>The code above applies the following transformations:<\/p>\n<ul>\n<li>The image is cropped to a 250 x 250 thumbnail using face-detection gravity to determine the crop\u2019s location automatically<\/li>\n<li>Round the corners of the image with a radius of 20px<\/li>\n<li>Applied to the image is the grayscale effect<\/li>\n<li>Applied to the image is the Cloudinary logo on the southwest corner of the photo and scaled-down to 50px width of the original size with an offset from the edge of the picture in the X and Y direction<\/li>\n<\/ul>\n<h2>Applying optimizations to a hosted image<\/h2>\n<p>Like the image transformation steps, we\u2019ll add a transformation effect to an image, along with format and quality optimizations.<\/p>\n<p>Next, we create a new file called <code>Athlete.js<\/code> in the <code>component<\/code> directory with the following content:<\/p>\n<p>component\/Athlete.js<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" 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> { Cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { AdvancedImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/react\"<\/span>;\n\n    <span class=\"hljs-comment\">\/\/ import required actions<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { vectorize } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@cloudinary\/url-gen\/actions\/effect\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/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\">Athlete<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> cld = <span class=\"hljs-keyword\">new<\/span> Cloudinary({\n        <span class=\"hljs-attr\">cloud<\/span>: {\n          <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>\n        }\n      });\n      <span class=\"hljs-keyword\">const<\/span> athlete = cld\n        .image(<span class=\"hljs-string\">\"https:\/\/images.pexels.com\/photos\/6354732\/pexels-photo-6354732.jpeg\"<\/span>)\n        .setDeliveryType(<span class=\"hljs-string\">\"fetch\"<\/span>);\n    \n      athlete.effect(vectorize()).format(<span class=\"hljs-string\">\"auto\"<\/span>).quality(<span class=\"hljs-string\">\"auto\"<\/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\">AdvancedImage<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.img}<\/span> <span class=\"hljs-attr\">cldImg<\/span>=<span class=\"hljs-string\">{athlete}<\/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-4\"><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>The resulting image should look like this:<\/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_0D12BB57618205B87E17B12E5B08CD3885C6760EC64D97CB00BB17BD40950433_1645829921396_image.png\" alt=\"flying man\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"427\" height=\"243\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>This post discussed modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.<\/p>\n<h2>Further Reading<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/fetch_remote_images#remote_image_fetch_url\">Deliver remote media files<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/react_image_transformations#image_transformations_with_react\">Image transformations<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28162,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,175,177,212,371],"class_list":["post-28161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-jamstack","tag-javascript","tag-next-js","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>Robust optimization and delivery on hosted images<\/title>\n<meta name=\"description\" content=\"Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.\" \/>\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\/robust-optimization-and-delivery-on-hosted-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Robust optimization and delivery on hosted images\" \/>\n<meta property=\"og:description\" content=\"Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:18:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"5099\" \/>\n\t<meta property=\"og:image:height\" content=\"3399\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/robust-optimization-and-delivery-on-hosted-images\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Robust optimization and delivery on hosted images\",\"datePublished\":\"2022-04-06T02:18:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"JAMStack\",\"Javascript\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/\",\"name\":\"Robust optimization and delivery on hosted images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA\",\"datePublished\":\"2022-04-06T02:18:34+00:00\",\"description\":\"Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA\",\"width\":5099,\"height\":3399},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Robust optimization and delivery on hosted images\"}]},{\"@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":"Robust optimization and delivery on hosted images","description":"Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.","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\/robust-optimization-and-delivery-on-hosted-images\/","og_locale":"en_US","og_type":"article","og_title":"Robust optimization and delivery on hosted images","og_description":"Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:18:34+00:00","og_image":[{"width":5099,"height":3399,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/"},"author":{"name":"","@id":""},"headline":"Robust optimization and delivery on hosted images","datePublished":"2022-04-06T02:18:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA","keywords":["Guest Post","Image","JAMStack","Javascript","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/","name":"Robust optimization and delivery on hosted images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA","datePublished":"2022-04-06T02:18:34+00:00","description":"Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA","width":5099,"height":3399},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/robust-optimization-and-delivery-on-hosted-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Robust optimization and delivery on hosted images"}]},{"@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\/v1681925259\/Web_Assets\/blog\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1\/c9da6c68825013868713d7ceb2c56e2c197ab4b6-5099x3399-1_2816283bc1.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28161","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=28161"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28161\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28162"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}