{"id":21554,"date":"2017-06-28T16:31:33","date_gmt":"2017-06-28T16:31:33","guid":{"rendered":"http:\/\/should_you_transform_images_on_upload_or_on_demand"},"modified":"2024-06-05T16:22:38","modified_gmt":"2024-06-05T23:22:38","slug":"should_you_transform_images_on_upload_or_on_demand","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand","title":{"rendered":"Should You Transform Images On Upload or On Demand?"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>As a developer, you hope and anticipate that your website or mobile application will be accessed by different users on various devices. To improve the user-experience,  irrespective of the viewing device, you need to make sure that each image adapts to different graphic layouts, device resolutions and other viewing requirements. For example, for an eCommerce site, one image will be displayed on different pages \u2014 home page, product page, shopping cart and more \u2014  and will be viewed on a desktop, cellphone or a tablet. This means that you need to create numerous versions of every image and for a website with hundreds of images, manual transformation is <strong>not<\/strong> scalable.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> enables you to programmatically transform original images from various sources based on viewing requirements.<\/p>\n<h2>Lazy and Eager Transformation<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> offers multiple strategies for transforming your images. In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, which is the default option, and \u201ceager transformations\u201d, which can be selected by adding a flag to the upload API call.<\/p>\n<p>Lazy transformation entails uploading images to Cloudinary as is and then transforming the images only when a user requests the image. The transformation for a given user is performed once, cached and delivered via a CDN for subsequent requests.<\/p>\n<p>This type of transformation is the default option because it limits the bandwidth usage by generating transformations on-demand.<\/p>\n<p>Let\u2019s look at an example:<\/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-comment\">\/\/ Upload image to cloud<\/span>\ncloudinary.v2.uploader.upload(<span class=\"hljs-string\">'lady.jpg'<\/span>,\n\t<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{<span class=\"hljs-built_in\">console<\/span>.log(result); }\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<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Request image and lazy-transform the image<\/span>\ncloudinary.url(<span class=\"hljs-string\">\"lady.jpg\"<\/span>, \n\t<span class=\"hljs-comment\">\/\/ Transformation<\/span>\n\t{<span class=\"hljs-attr\">transformation<\/span>: &#91;\n  {<span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">400<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">400<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"face\"<\/span>, <span class=\"hljs-attr\">radius<\/span>: <span class=\"hljs-string\">\"max\"<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"crop\"<\/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\">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 uploaded image is transformed only when requested with cloudinary.url, which returns a transformed image URL. This is what the request looks like in the network tab:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/ZrpfLjj.png\" alt=\"on demand\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"201\"\/><\/p>\n<p>Even as small as the transformed image is (4.2kb), it still took as much as 976ms to complete the request. Consider how much time it would take if we had up to 50 images that required such transformations on one page of our website. Additionally, customers attempting to access these images during this 1 second in which they are created, will get broken images (error 420) due to concurrent access.<\/p>\n<p>There are cases where, due to highly concurrent access patterns, it is not a good idea to wait until the first access to create the derived image or video. For example, if you run a news site, and tweet about your new article, for thousands of users to access it concurrently, and the images and videos on the article page were not created in advance, many of these users could encounter concurrency issues. In this case, the first user will experience a delay in accessing the images and videos, and while these transformations are being created, rest of the users will get broken images and videos. Reloading the page would fix the problem, but you might lose some users by then.<\/p>\n<p>One way to solve this is to have editors preview their pages before publishing. However, with responsive design, real-time communications, and multiple devices accessing the content, it\u2019s best to make sure the images are created during upload.<\/p>\n<p>Now let\u2019s consider a better solution: <strong>Eager transformation<\/strong>.<\/p>\n<h2>Eager Transformation<\/h2>\n<p>Just as the name states, eager entails transforming images during upload so when the transformations are requested, they will always be optimized and delivered with the best possible performance. So, when a user requests an image, Cloudinary no longer needs to perform transformations on this image because it has already been completed during upload.<\/p>\n<p>With the eager approach, transformation tasks are performed once (during upload) for all requests so users don\u2019t experience any delays.<\/p>\n<p>To perform an eager transformation, use the eager array, which accepts transformation configuration objects:<\/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-comment\">\/\/ Perform transformation while uploading<\/span>\ncloudinary.v2.uploader.upload(<span class=\"hljs-string\">\"lady.jpg\"<\/span>, \n\t<span class=\"hljs-comment\">\/\/ Eager transformation<\/span>\n    { <span class=\"hljs-attr\">eager<\/span>: &#91;\n        { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">400<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">300<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"pad\"<\/span> }, \n        { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">260<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">200<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"crop\"<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"north\"<\/span>} ]}, \n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{<span class=\"hljs-built_in\">console<\/span>.log(result); });\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>You can pass as many transformation objects as you choose to the <code>eager<\/code> array. The callback will be executed once the upload and transformation is completed.<\/p>\n<p>You can as well request the image, but this time, you don\u2019t transform:<\/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-comment\">\/\/ Request image without transforming the image<\/span>\ncloudinary.url(<span class=\"hljs-string\">\"lady.jpg\"<\/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\">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>This is what the request looks like in the network tab:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/lHMAeoN.png\" alt=\"network tab\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"107\"\/><\/p>\n<p>Let\u2019s consider an image larger in size (22.8k) compared to image in the lazy transformation example. The image request was completed at 469ms, which is about 50 percent faster than the lazy method.<\/p>\n<h3>Transforming with API URL<\/h3>\n<p>Cloudinary provides a SDK for most of the platforms available today, including .Net, Node, PHP, Ruby, Python, React and Angular. If you want to talk directly to the API, that is possible. For eager transformation, you can use the <code>eager<\/code> parameter to carry out your actions:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>eager=c_crop,w_400,h_400,g_face\/w_50,h_50,c_scale|w_30,h_40,c_crop,g_south\n<\/code><\/pre>\n<p>The eager parameter receives a list of transformation strings separated with a pipe character (|). Chained transformations are separated with a slash (\/).<\/p>\n<h3>What Of My Existing Images?<\/h3>\n<p>You no doubt have other images already stored on your cloud. It\u2019s possible to use eager transformation on those as well.<\/p>\n<p>Cloudinary allows you to perform  <a href=\"https:\/\/cloudinary.com\/documentation\/managing_assets\">explicit transformations<\/a> on your existing images using the explicit method:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Update existing image<\/span>\ncloudinary.v2.uploader.explicit(<span class=\"hljs-string\">'lady'<\/span>, \n      { <span class=\"hljs-attr\">eager<\/span>: &#91;\n\t      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">200<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"scale\"<\/span> }, \n\t      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">360<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">200<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"crop\"<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"north\"<\/span>} ] }, \n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{<span class=\"hljs-built_in\">console<\/span>.log(result); } );\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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 method takes the name of the existing image as the first argument, then options (which transformation is part of) as the second argument and then the callback function to handle the completed update.<\/p>\n<h2>Conclusion<\/h2>\n<p>Eager transformation delivers better performance, and an improved user experience, while consuming fewer resources. Transformation is just one of the many features you can get from Cloudinary. <a href=\"https:\/\/cloudinary.com\/products\/image_video_technology_platform\">Learn more<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22692,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,165],"class_list":["post-21554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image-transformation"],"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>Should You Transform Images On Upload or On Demand?<\/title>\n<meta name=\"description\" content=\"In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, and \u201ceager transformations\u201d and the benefits of each.\" \/>\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\/should_you_transform_images_on_upload_or_on_demand\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Should You Transform Images On Upload or On Demand?\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, and \u201ceager transformations\u201d and the benefits of each.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-28T16:31:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-05T23:22:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary-png_2269260598-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\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\/should_you_transform_images_on_upload_or_on_demand#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Should You Transform Images On Upload or On Demand?\",\"datePublished\":\"2017-06-28T16:31:33+00:00\",\"dateModified\":\"2024-06-05T23:22:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand\",\"url\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand\",\"name\":\"Should You Transform Images On Upload or On Demand?\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA\",\"datePublished\":\"2017-06-28T16:31:33+00:00\",\"dateModified\":\"2024-06-05T23:22:38+00:00\",\"description\":\"In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, and \u201ceager transformations\u201d and the benefits of each.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Should You Transform Images On Upload or On Demand?\"}]},{\"@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":"Should You Transform Images On Upload or On Demand?","description":"In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, and \u201ceager transformations\u201d and the benefits of each.","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\/should_you_transform_images_on_upload_or_on_demand","og_locale":"en_US","og_type":"article","og_title":"Should You Transform Images On Upload or On Demand?","og_description":"In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, and \u201ceager transformations\u201d and the benefits of each.","og_url":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand","og_site_name":"Cloudinary Blog","article_published_time":"2017-06-28T16:31:33+00:00","article_modified_time":"2024-06-05T23:22:38+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary-png_2269260598-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand"},"author":{"name":"","@id":""},"headline":"Should You Transform Images On Upload or On Demand?","datePublished":"2017-06-28T16:31:33+00:00","dateModified":"2024-06-05T23:22:38+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA","keywords":["Guest Post","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand","url":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand","name":"Should You Transform Images On Upload or On Demand?","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA","datePublished":"2017-06-28T16:31:33+00:00","dateModified":"2024-06-05T23:22:38+00:00","description":"In this article, we\u2019ll discuss two options: \u201clazy transformations\u201d, and \u201ceager transformations\u201d and the benefits of each.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/should_you_transform_images_on_upload_or_on_demand#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Should You Transform Images On Upload or On Demand?"}]},{"@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\/v1645575857\/website-2021\/blog\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598\/6BzHozJUSZW8Rcn4jYIW_transform-images-on-upload-or-on-demand-cloudinary.png_2269260598.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21554","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=21554"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21554\/revisions"}],"predecessor-version":[{"id":34436,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21554\/revisions\/34436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22692"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}