{"id":21297,"date":"2015-07-21T14:24:09","date_gmt":"2015-07-21T14:24:09","guid":{"rendered":"http:\/\/how_to_automatically_create_images_for_responsive_design"},"modified":"2025-09-26T14:10:21","modified_gmt":"2025-09-26T21:10:21","slug":"how_to_automatically_create_images_for_responsive_design","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design","title":{"rendered":"How to automatically create images for Responsive design"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><a href=\"https:\/\/cloudinary.com\/features\/responsive_images\">Responsive web design<\/a> is a method of designing websites to provide an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution used to view the website. A site designed responsively adapts its layout to the viewing environment, resizing and moving elements dynamically and based on the properties of the browser or device the site is being displayed on.<\/p>\n<p>The responsive web design uses CSS for dynamic content changes and controlling the text font size, the layout grid used and the various image dimensions, which are based on media queries and the browser window size. \u00a0Most of the dynamic changes can be accomplished this way (or with frameworks like <a href=\"https:\/\/getbootstrap.com\">Bootstrap<\/a>) but not so when it comes to the images.<\/p>\n<p>When it comes to images, a responsively designed website should not just send a high-resolution image and then use browser resizing to display the image on various devices: that would be a huge waste of bandwidth for users on small, low-resolution displays. To serve as a <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images\">responsive image<\/a>, a version of the image should be created in different resolutions, so that devices can load only the relevant image data<\/p>\n<p>Cloudinary can help reduce the complexity with dynamic image and video transformation. You can simply build image URLs with any image width or height based on the specific device resolution and window size. This  means you don\u2019t have to pre-create the images, with dynamic resizing taking place on-the-fly as needed.<\/p>\n<h2>Responsive design images solution<\/h2>\n<p>The solution for simply and dynamically integrating images within responsive web design layouts, can be implemented with a method added to Cloudinary\u2019s Javascript library. The Cloudinary Javascript library, which is based on jQuery, automatically builds image URLs to match the size available for each image in the responsive layout and works as follows:<\/p>\n<ul>\n<li>\n<p>A Cloudinary dynamic transformation URL is automatically built on the fly to deliver an uploaded image that is scaled to the exact available width.<\/p>\n<\/li>\n<li>\n<p>If the browser window is consequently enlarged then new higher resolution images are automatically delivered, while using stop-points (every 100px by default) to prevent loading too many images.<\/p>\n<\/li>\n<li>\n<p>If the browser window is scaled down, browser-side scaling is used instead of delivering a new image.<\/p>\n<\/li>\n<\/ul>\n<p>This feature allows you to provide one high resolution image, and have it automatically adapted to the resolution and size appropriate to each user\u2019s device or browser on the fly. This ensures a great user experience by delivering the best possible resolution image, based on the device\u2019s resolution and the width available, without needlessly wasting bandwidth or loading time.<\/p>\n<p><a name=\"implementing_responsive_design_with_cloudinary_s_javascript_library\" class=\"anchor\"><\/a><\/p>\n<p><strong>Update:<\/strong> Beyond dynamic image transformation, it\u2019s now possible to automate how you deal with responsive design images using <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images#automating_responsive_images_with_javascript\">JavaScript<\/a> (on the client side), or using <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images#automating_responsive_images_with_client_hints\">Client Hits<\/a> (on the server side).<\/p>\n<h2>Implementing responsive web design with Cloudinary\u2019s Javascript library<\/h2>\n<p><strong>Update 04\/16<\/strong>: The Cloudinary Javascript library was updated and you can now enjoy the same responsive behavior  without the dependency on jQuery (using  jQuery is still an option as described below). For more information see the <a href=\"https:\/\/cloudinary.com\/blog\/painless_image_and_video_manipulation_with_javascript\">article on the new library<\/a>.<\/p>\n<p>Implementing the responsive web design in code using the Cloudinary jQuery plugin is a very simple process.<\/p>\n<p><strong>Step 1:<\/strong><\/p>\n<p>Include the jQuery plugin in your HTML pages (see the <a href=\"https:\/\/cloudinary.com\/documentation\/jquery_integration#getting_started_guide\">jQuery plugin getting started guide<\/a> for more information).<\/p>\n<p><strong>Step 2:<\/strong><\/p>\n<p>For each image to display responsively:<\/p>\n<ol>\n<li>\n<p>Set the <code>data-src<\/code> attribute of the <code>img<\/code> tag to the URL of an image that was uploaded to Cloudinary. The <code>src<\/code> attribute is not set and the actual image is updated dynamically (you can set the src attribute to a placeholder image that is displayed until the image is loaded).<\/p>\n<\/li>\n<li>\n<p>Set the <code>width<\/code> parameter to <code>auto<\/code> (<code>w_auto<\/code> in URLs). This allows the jQuery plugin to dynamically generate an image URL scaled to the correct width value, based on the detected width actually available for the image in the containing element.<\/p>\n<\/li>\n<li>\n<p>Add the <code>cld-responsive<\/code> class to the image tag. This is the default class name, but you can use custom class names and programmatically make HTML elements become responsive.<\/p>\n<\/li>\n<\/ol>\n<p>For 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\">&lt;img data-src=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto\/smiling_man.jpg\"<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span><\/span>=<span class=\"hljs-string\">\"cld-responsive\"<\/span>&gt;\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><strong>Step 3:<\/strong><\/p>\n<p>Add Cloudinary\u2019s <code>responsive<\/code> Javascript method call at the end of the HTML page.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" 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\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"javascript\">$.cloudinary.responsive()<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/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\">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>The <code>responsive<\/code> method looks for all images in the page that have the \u201ccld-responsive\u201d class name, detects the available width for the image on the page, and then updates the HTML image tags accordingly. The image is also updated whenever the window size or screen resolution changes.<\/p>\n<p>Note that the three step process presented above covers the simplest and most general solution. The behaviour can be further customized to control whether to update images on resize, when to update the image using stop-points, preserving the CSS image height and more. See the <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_js\/blob\/master\/js\/jquery.cloudinary.js\">Cloudinary Javascript library<\/a> for more details.<\/p>\n<p>Thats it! Checkout the following demo images created using Cloudinary (for the images) and Bootstrap (for the layout). The images also include a text overlay that is updated on-the-fly to display the actual width of the image and the Device Pixel Ratio setting (see further on in this blog post for more details on DPR).<\/p>\n<p>Resize this browser window to see how the layout and images dynamically respond to the changes.<\/p>\n<div>\n  <h4>4 columns<\/h4>\n  <div class=\"row\">\n    <div class=\"col-xs-3\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/woman.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/woman.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n     <div class=\"col-xs-3\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/woman.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/woman.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n    <div class=\"col-xs-3\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/woman.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/woman.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n    <div class=\"col-xs-3\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/woman.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/woman.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n  <\/div>\n  <h4>4-3-2 grid<\/h4>\n  <div class=\"row\">\n    <div class=\"col-lg-3 col-sm-4 col-xs-6 thumnail\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_couple.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/nice_couple.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n     <div class=\"col-lg-3 col-sm-4 col-xs-6\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_couple.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/nice_couple.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n    <div class=\"col-lg-3 col-sm-4 col-xs-6\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_couple.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/nice_couple.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n    <div class=\"col-lg-3 col-sm-4 col-xs-6\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/nice_couple.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/nice_couple.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n  <\/div>\n  <h4>3-2-1 grid<\/h4>\n  <div class=\"row\">\n    <div class=\"col-lg-4 col-sm-6 col-xs-12\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/smiling_man.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/smiling_man.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n     <div class=\"col-lg-4 col-sm-6 col-xs-12\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/smiling_man.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/smiling_man.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n    <div class=\"col-lg-4 col-sm-6 col-xs-12\">\n        <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/smiling_man.jpg\" class=\"thumbnail\" target=\"_blank\">\n             <img data-src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto,c_limit\/co_white,l_text:Arial_18_bold:w_auto%0A+dpr_auto\/smiling_man.jpg\" class=\"img-responsive cld-responsive\">\n        <\/a>\n    <\/div>\n  <\/div>\n<\/div>\n<p>As can be seen in the demo images above, the URL of an image can be <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">further transformed<\/a> on the fly like any other image uploaded to Cloudinary.<\/p>\n<h2>Implementing responsive web design with the Cloudinary SDKs<\/h2>\n<p>To make things even easier, responsive web design can be implemented with the Cloudinary SDK\u2019s view helper methods (e.g. <code>cl_image_tag<\/code> in Ruby on Rails). Setting the <code>width<\/code> parameter to <code>auto<\/code> creates an HTML image tag with a blank <code>src<\/code> attribute while the <code>data-src<\/code> attribute points to a dynamic image transformation URL. When you load Cloudinary\u2019s jQuery plugin and call the <code>responsive<\/code> method, the image tags are automatically updated and URLs are replaced with the correct width value. You can also set a placeholder image using the <code>responsive_placeholder<\/code> parameter, or set it to an inline blank image by setting the parameter to <code>blank<\/code>.<\/p>\n<p>For example, creating an HTML image tag for the \u201csmiling_man.jpg\u201d image with the width automatically determined on the fly as needed, and using a blank image placeholder:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;smiling_man.jpg\\&quot;, :width =&gt; :auto, \\n  :responsive_placeholder =&gt; \\&quot;blank\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;smiling_man.jpg\\&quot;, :width =&gt; :auto, \\n  :responsive_placeholder =&gt; \\&quot;blank\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;smiling_man.jpg\\&quot;, \\u00a0array(\\&quot;width\\&quot; =&gt; \\&quot;auto\\&quot;, \\n  \\&quot;responsive_placeholder\\&quot; =&gt; \\&quot;blank\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;smiling_man.jpg\\&quot;, \\u00a0array(\\&quot;width\\&quot; =&gt; \\&quot;auto\\&quot;, \\n  \\&quot;responsive_placeholder\\&quot; =&gt; \\&quot;blank\\&quot;));&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.CloudinaryImage(\\&quot;smiling_man.jpg\\&quot;).image(width = \\&quot;auto\\&quot;,\\n  responsive_placeholder = \\&quot;blank\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.CloudinaryImage(\\&quot;smiling_man.jpg\\&quot;).image(width = \\&quot;auto\\&quot;,\\n  responsive_placeholder = \\&quot;blank\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;smiling_man.jpg\\&quot;, \\u00a0{ width: \\&quot;auto\\&quot;, \\n  responsive_placeholder: \\&quot;blank\\&quot; })&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;smiling_man.jpg\\&quot;, \\u00a0{ width: \\&quot;auto\\&quot;, \\n  responsive_placeholder: \\&quot;blank\\&quot; })&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(\\&quot;auto\\&quot;).\\n  responsive_placeholder(\\&quot;blank\\&quot;)).imageTag(\\&quot;smiling_man.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(\\&quot;auto\\&quot;).\\n  responsive_placeholder(\\&quot;blank\\&quot;)).imageTag(\\&quot;smiling_man.jpg\\&quot;);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>The code above generates the following HTML image tag:<\/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\">&lt;img <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span><\/span>=<span class=\"hljs-string\">\"cld-responsive\"<\/span> \ndata-src=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto\/smiling_man.jpg\"<\/span>\nsrc=<span class=\"hljs-string\">\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"<\/span> \u00a0\/&gt;\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<h2>Responsive web design with support for retina and HiDPI devices<\/h2>\n<p>You can also simultaneously create the correct DPR image for devices that support higher resolutions by simply adding the <code>dpr<\/code> parameter set to <code>auto<\/code> to the URL or SDK method. The Javascript code will check the DPR of the device as well as the space available for the image. Delivery and transformation URLs are then built automatically (and lazily) for all image tags to match the specific settings, with all image generation happening in the cloud. Users of devices with high pixel density will get a great visual result, while low-DPR users don\u2019t have to wait needlessly for larger images to load.<\/p>\n<p>For example, creating an HTML image tag for the \u201cwoman.jpg\u201d image with the width and DPR automatically determined on the fly as needed, and using a blank image placeholder:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, :width =&gt; :auto, \\u00a0:dpr =&gt; :auto,\\n  :responsive_placeholder =&gt; \\&quot;blank\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, :width =&gt; :auto, \\u00a0:dpr =&gt; :auto,\\n  :responsive_placeholder =&gt; \\&quot;blank\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, \\u00a0array(\\&quot;width\\&quot; =&gt; \\&quot;auto\\&quot;, \\u00a0\\&quot;dpr\\&quot; =&gt; \\&quot;auto\\&quot;,\\n  \\&quot;responsive_placeholder\\&quot; =&gt; \\&quot;blank\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, \\u00a0array(\\&quot;width\\&quot; =&gt; \\&quot;auto\\&quot;, \\u00a0\\&quot;dpr\\&quot; =&gt; \\&quot;auto\\&quot;,\\n  \\&quot;responsive_placeholder\\&quot; =&gt; \\&quot;blank\\&quot;));&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.CloudinaryImage(\\&quot;woman.jpg\\&quot;).image(width = \\&quot;auto\\&quot;, dpr = \\&quot;auto\\&quot;, \\n  responsive_placeholder = \\&quot;blank\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.CloudinaryImage(\\&quot;woman.jpg\\&quot;).image(width = \\&quot;auto\\&quot;, dpr = \\&quot;auto\\&quot;, \\n  responsive_placeholder = \\&quot;blank\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;woman.jpg\\&quot;, \\u00a0{ width: \\&quot;auto\\&quot;, dpr: \\&quot;auto\\&quot;, \\n  responsive_placeholder: \\&quot;blank\\&quot; })&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;woman.jpg\\&quot;, \\u00a0{ width: \\&quot;auto\\&quot;, dpr: \\&quot;auto\\&quot;, \\n  responsive_placeholder: \\&quot;blank\\&quot; })&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(\\&quot;auto\\&quot;).dpr(\\&quot;auto\\&quot;). \\n  responsive_placeholder(\\&quot;blank\\&quot;)).imageTag(\\&quot;woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(\\&quot;auto\\&quot;).dpr(\\&quot;auto\\&quot;). \\n  responsive_placeholder(\\&quot;blank\\&quot;)).imageTag(\\&quot;woman.jpg\\&quot;);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>The code above generates the following HTML image tag:<\/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\">&lt;img <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span><\/span>=<span class=\"hljs-string\">\"cld-responsive\"<\/span> \ndata-src=\n<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto,dpr_auto\/woman.jpg\"<\/span>\nsrc=<span class=\"hljs-string\">\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"<\/span> \u00a0\n\/&gt;\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<h2>Summary<\/h2>\n<p>In the modern world, applications have to look good on both the web and on various mobile devices, and therefore need to become more responsive to support the large number of devices available and adjust to the varying amount of space available for displaying content. Responsive frameworks such as Bootstrap can help with the layout and text, but have no support for images beyond client-side resizing.<\/p>\n<p>Cloudinary allows you to manage your images in a very simple way by just uploading your hi-res images, using any web framework to add your image tag with automatic width and automatic DPR, and adding one line of Javascript for all your images to become Responsive. Improve your user\u2019s experience with plenty more of Cloudinary\u2019s image optimization and transformation capabilities all done in the cloud, without the need to install image processing software or pre-generating all the image versions and resolutions, while reducing needless page loading times and saving bandwidth.<\/p>\n<p>Responsive support is available in all the Cloudinary plans, including the free plan. If you don\u2019t have a Cloudinary account, you are welcome to <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up to our free account<\/a> and try it out.<\/p>\n<p><strong>Update<\/strong> &#8211; See our other blog posts on responsive web design:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">Responsive images with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions\">Introducing intelligent responsive image breakpoints solutions<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary\">Responsive design images with \u2018srcset\u2019, \u2018sizes\u2019 and Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images\">Auto-Crop Images for Responsive Designs and Improved Image Quality<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/automatically_art_directed_responsive_images\">Automatically art-directed responsive design images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/push_button_art_direction_with_cloudinary_s_responsive_image_breakpoints_generator\">Push-button Art Direction<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_1_what_does_it_mean_for_an_image_to_be_responsive\">Responsive design Images Guide, Part 1<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\">Responsive design Images Guide, Part 2<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_3_variable_image_encoding\">Responsive design Images Guide, Part 3<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">Make All Images on Your Website Responsive in 3 Easy Steps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/best_practices_for_responsive_web_design\">Best Practices for Responsive Web Design<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":23350,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,92,165,176,183,214,229,251,257],"class_list":["post-21297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-dotnet","tag-image-transformation","tag-java","tag-jquery","tag-node","tag-php","tag-responsive-images","tag-ruby-on-rails"],"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>Automatically Create Images for Responsive Web Design<\/title>\n<meta name=\"description\" content=\"Learn how to dynamically create images for automatic integration within responsive web design layouts using Cloudinary&#039;s jQuery integration.\" \/>\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\/how_to_automatically_create_images_for_responsive_design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to automatically create images for Responsive design\" \/>\n<meta property=\"og:description\" content=\"Learn how to dynamically create images for automatic integration within responsive web design layouts using Cloudinary&#039;s jQuery integration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-21T14:24:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T21:10:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\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\/how_to_automatically_create_images_for_responsive_design#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to automatically create images for Responsive design\",\"datePublished\":\"2015-07-21T14:24:09+00:00\",\"dateModified\":\"2025-09-26T21:10:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA\",\"keywords\":[\"Django\",\"DotNet\",\"Image Transformation\",\"Java\",\"jQuery\",\"Node\",\"PHP\",\"Responsive Images\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2015\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\",\"url\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\",\"name\":\"Automatically Create Images for Responsive Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA\",\"datePublished\":\"2015-07-21T14:24:09+00:00\",\"dateModified\":\"2025-09-26T21:10:21+00:00\",\"description\":\"Learn how to dynamically create images for automatic integration within responsive web design layouts using Cloudinary's jQuery integration.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to automatically create images for Responsive design\"}]},{\"@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":"Automatically Create Images for Responsive Web Design","description":"Learn how to dynamically create images for automatic integration within responsive web design layouts using Cloudinary's jQuery integration.","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\/how_to_automatically_create_images_for_responsive_design","og_locale":"en_US","og_type":"article","og_title":"How to automatically create images for Responsive design","og_description":"Learn how to dynamically create images for automatic integration within responsive web design layouts using Cloudinary's jQuery integration.","og_url":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design","og_site_name":"Cloudinary Blog","article_published_time":"2015-07-21T14:24:09+00:00","article_modified_time":"2025-09-26T21:10:21+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design"},"author":{"name":"","@id":""},"headline":"How to automatically create images for Responsive design","datePublished":"2015-07-21T14:24:09+00:00","dateModified":"2025-09-26T21:10:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA","keywords":["Django","DotNet","Image Transformation","Java","jQuery","Node","PHP","Responsive Images","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2015","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design","url":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design","name":"Automatically Create Images for Responsive Web Design","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA","datePublished":"2015-07-21T14:24:09+00:00","dateModified":"2025-09-26T21:10:21+00:00","description":"Learn how to dynamically create images for automatic integration within responsive web design layouts using Cloudinary's jQuery integration.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to automatically create images for Responsive design"}]},{"@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\/v1647045698\/34_auto_create_img_responsive\/34_auto_create_img_responsive.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21297","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=21297"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21297\/revisions"}],"predecessor-version":[{"id":38630,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21297\/revisions\/38630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23350"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}