{"id":21583,"date":"2017-08-28T12:47:13","date_gmt":"2017-08-28T12:47:13","guid":{"rendered":"http:\/\/make_all_images_on_your_website_responsive_in_3_easy_steps"},"modified":"2025-02-21T16:32:15","modified_gmt":"2025-02-22T00:32:15","slug":"make_all_images_on_your_website_responsive_in_3_easy_steps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps","title":{"rendered":"How to Create Images for Responsive Web Design"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Images are crucial to website performance, but most still don\u2019t implement responsive images. It\u2019s not just about fitting an image on the screen, but also making the image size relatively rational to the device. The srcset and sizes options, which are your best hit are hard to implement. Cloudinary provides an easier way, which we will discuss in this article.<\/p>\n<p>In this blog, I\u2019ll share a valuable shortcut that can help you turn all images responsive. But first, let\u2019s talk a bit about what <a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">responsive images<\/a> are: An image is considered responsive if it retains its quality on varying device sizes without having an unpleasant impact on performance.<\/p>\n<p>To better understand this concept, let\u2019s take a look at some device dimensions:<\/p>\n<h4>Possible Full-Width Image Dimensions by Screen Sizes<\/h4>\n<ul>\n<li>\n<strong>Large\/X-Large commercial screens<\/strong>: 2000+ pixels<\/li>\n<li>\n<strong>Websites<\/strong>: 760 &#8211; 1200 pixels<\/li>\n<li>\n<strong>Mobile Phones<\/strong>: &lt; 760 pixels<\/li>\n<\/ul>\n<p>Let\u2019s assume you have a mobile-first strategy for building responsive apps. You may decide to use 760px images throughout, without considering larger screens. If these images are meant to take the full width of the devices on which they are rendered, then your content will look distorted and unprofessional on websites or commercial screens.<\/p>\n<p>Your next attempt would be to use the largest possible image (2000px) and scale it down based on the screen sizes on which it is displayed.<\/p>\n<p>This is part of a series of articles about <a href=\"https:\/\/cloudinary.com\/guides\/responsive-images\/what-are-responsive-images-and-6-useful-techniques\">Responsive Images<\/a>.<\/p>\n<h2>Down-Scaling Images<\/h2>\n<p>Using CSS or JavaScript to down-scale images only makes them <em>dimensionally<\/em> responsive. The following image illustrates this better:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Screen_Shot_2017-08-03_at_1.17.28_PM_aukf2g.png\" alt=\"Down-scaling illustration\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1031\"\/>\nOn mobile<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill\/dpr_auto\/Screen_Shot_2017-08-03_at_1.20.05_PM_ogvphp.png\" alt=\"Down-scaling illustration\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1031\"\/>\nOn desktop<\/p>\n<p>Both on web and mobile devices, the size is still <strong>8.9MB<\/strong>. Bearing in mind that your mobile phones have less resources than your PC, we still have more work to do.<\/p>\n<p>Using only a down-scaling approach is not ideal because it does not account for the size of the image; just its dimensions.<\/p>\n<p>We have already seen that up-scaling wouldn\u2019t work either, hence we need something that handles both dimensions and size.<\/p>\n<h2>Size-Fitting<\/h2>\n<p>Our best option is to generate images based on the screen size and render them. This process can be extremely complex, but there\u2019s a shortcut that can help you automate much of the process. You can make all images responsive in three easy steps with <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a>:<\/p>\n<h3>1. Include Cloudinary in Your Project<\/h3>\n<p>Add the Cloudinary SDK to your project simply by including it in your index.html using script tags:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cloudinary-core\/2.3.0\/cloudinary-core-shrinkwrap.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>2. Add Images with data-src<\/h3>\n<p>You don\u2019t want the images rendered immediately, until JavaScript runs. Hence, include the image using the <code>data-src<\/code> attribute instead of <code>src<\/code>:<\/p>\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\">&lt;img data-src=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/christekh\/image\/upload\/w_auto,c_scale\/v1501761946\/pexels-photo-457044_etqwsd.jpg\"<\/span> alt=<span class=\"hljs-string\">\"\"<\/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-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>Using this approach, Cloudinary analyzes your browser screen first, resizes the image saved in Cloudinary storage as provided in <code>data-src<\/code>, and then renders the image in the appropriate size and dimension using JavaScript.<\/p>\n<p>Two things to note from the tag:<\/p>\n<ul>\n<li>\n<code>w_auto,c_scale<\/code> transformation parameters tell Cloudinary 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.<\/li>\n<li>The class <code>cld-responsive<\/code> tells Cloudinary which images to apply this feature too.<\/li>\n<\/ul>\n<h3>3. JavaScript Call<\/h3>\n<p>Finally, initialize a Cloudinary instance in your JavaScript files and call the <code>responsive<\/code> method on this instance:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Initialize<\/span>\n<span class=\"hljs-keyword\">var<\/span> cl = cloudinary.Cloudinary.<span class=\"hljs-keyword\">new<\/span>({  cloud_name: <span class=\"hljs-string\">'&lt;Cloud Name&gt;'<\/span> });\n<span class=\"hljs-comment\">\/\/ Call<\/span>\ncl.responsive();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Remember to <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">create a free Cloudinary<\/a> account so you can be handed a cloud name for configuring this instance.<\/p>\n<p>This piece of code will walk through the DOM, find all image tags with the class <code>cld-responsive<\/code> to apply <strong>size<\/strong> and <strong>dimension<\/strong> fitting images on them.<\/p>\n<h2>Final Words<\/h2>\n<p>Always keep in mind that when you use CSS like the following code below to make images responsive, it does not guarantee a good user experience:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: auto;\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\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The sizes of these images remain the same. Large images on mobile devices eat up resources (like allocated memory and running processes) causing slow downloads or unexpected behavior on the user\u2019s device. Responsive images ensure that users save lots of data bandwidth &amp; have great experiences when using your image-rich website or app.<\/p>\n<p>Lastly, it\u2019s good to keep in mind that the suggested approach relies on JavaScript. Therefore, preloading provided by srcset and sizes are sacrificed and your browser must have JavaScript active for this feature to work.<\/p>\n<hr \/>\n<h2>Want to Learn More About Responsive Images?<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">How to Create Images for Responsive Web Design<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images\">Introducing smart cropping, intelligent quality selection and automated responsive images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary\">Responsive images with \u2018srcset\u2019, \u2018sizes\u2019 and Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/upscaling_raster_image_to_vector_graphic_conversions\">Programmatically Convert Raster Images to Vector Graphics<\/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>\n\n\n<h2>See Our Additional Guides on Key Front-End Development Topics<\/h2>\nTogether with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/front-end-development-the-complete-guide\">Front-End Development<\/a>.\n\n\n<table class=\"table\" style=\"font-size: 80%\">\n    <tbody>\n        <tr>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\">CSS Image<\/a><\/h5>\n               \n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\">CSS Image Overlay: Overlaying Text and Images for Visual Effect<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\">Image Resizing: Manually With CSS and Automatically With Cloudinary<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\">CSS Image Effects: Five Examples and a Quick Animation Guide<\/a><\/li>\n                <\/ul>\n            <\/td>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_choosing_the_best_option\">Lazy Loading<\/a><\/h5>\n                \n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/how_to_get_killer_page_performance_with_angular_lazy_loading\">How to Get Killer Page Performance With Angular Lazy Loading<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\">Lazy-Loading JavaScript for High-Speed Webpage Performance<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/lazy_load_react_and_boost_page_performance_for_your_apps\">Lazy-Load React and Boost Page Performance for Your Apps<\/a><\/li>\n                <\/ul>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/guides\/live-streaming-video\/a-guide-on-live-streaming-and-tips-for-making-it-a-success\">Live Streaming Video<\/a><\/h5>\n                \n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/live-streaming-video\/preparing-live-streams-for-video-on-demand\">Preparing Live Streams for Video on Demand<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/http_live_streaming_hls_a_practical_guide\">HTTP Live Streaming (HLS): a Practical Guide<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/html5_video_tags_won_t_do_for_your_videos\">Adaptive HLS Streaming Using the HTML5 Video Tag<\/a><\/li>\n                <\/ul>\n            <\/td>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/guides\/marketing-videos\/12-types-of-marketing-videos-and-10-ways-to-make-them-great\">Marketing Videos<\/a><\/h5>\n               \n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/marketing-videos\/video-tracking-with-google-analytics-made-simple\">Video Tracking With Google Analytics Made Simple<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/marketing-videos\/product-videos-101-what-makes-them-great\">Product Videos 101: What Makes Them Great?<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/marketing-videos\/tips-for-retaining-audience-through-engaging-videos\">Tips for Retaining Audience Through Engaging Videos<\/a><\/li>\n                <\/ul>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">Responsive Images<\/a><\/h5>\n                \n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images\">Smart Cropping, Intelligent Quality Selection, and Automated Responsive Images<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary\">Responsive images with \u2018srcset\u2019, \u2018sizes\u2019 and Cloudinary<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/best_practices_for_responsive_web_design\">Best Practices for Responsive Web Design<\/a><\/li>\n                <\/ul>\n            <\/td>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/guides\/user-generated-content\/user-generated-content-marketing-opportunity-of-the-century-and-its-only-the-beginning\">User Generated Content<\/a><\/h5>\n               \n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/user-generated-content\/ugc-in-marketing-an-authentic-marketing-component-in-the-digital-age\">UGC in Marketing: An Authentic Marketing Component in the Digital Age<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/user-generated-content\/ten-examples-of-successful-user-generated-content-in-action\">Ten Examples of Successful User-Generated Content in Action<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/guides\/user-generated-content\/strategies-for-user-generated-content-seven-key-steps\">Strategies for User-Generated Content: Seven Key Steps<\/a><\/li>\n                <\/ul>\n            <\/td>\n        <\/tr>\n\n        <tr>\n            <td>\n                <h5><a href=\"https:\/\/cloudinary.com\/blog\/html5_video_player\">HTML5 Video Player<\/a><\/h5>\n                <ul>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/how_to_get_the_most_from_the_html5_video_player\">Get More Out of HTML5 Video Tags with Cloud-Based Video Transcoding<\/a><\/li>\n                    <li><a href=\"https:\/\/cloudinary.com\/blog\/html5_video_player\">Ultimate HTML5 Video-Player Showdown: 12 Players Compared<\/a><\/li>\n                <\/ul>\n            <\/td>\n            <td><\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>See Our Additional Guides on Key Front-End Development Topics Together with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of Front-End Development. CSS Image CSS Image Overlay: Overlaying Text and Images for Visual Effect Image Resizing: Manually With CSS and Automatically [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":23348,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,251],"class_list":["post-21583","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-responsive-images"],"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>How to Create Images for Responsive Web Design<\/title>\n<meta name=\"description\" content=\"Images are crucial to website performance, but most still don&#039;t implement responsive images. Learn how to make images for responsive web design\" \/>\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\/make_all_images_on_your_website_responsive_in_3_easy_steps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Images for Responsive Web Design\" \/>\n<meta property=\"og:description\" content=\"Images are crucial to website performance, but most still don&#039;t implement responsive images. Learn how to make images for responsive web design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-28T12:47:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T00:32:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647045697\/33_img_responsive_design\/33_img_responsive_design-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\/make_all_images_on_your_website_responsive_in_3_easy_steps#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to Create Images for Responsive Web Design\",\"datePublished\":\"2017-08-28T12:47:13+00:00\",\"dateModified\":\"2025-02-22T00:32:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\"},\"wordCount\":222,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\",\"url\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\",\"name\":\"How to Create Images for Responsive Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA\",\"datePublished\":\"2017-08-28T12:47:13+00:00\",\"dateModified\":\"2025-02-22T00:32:15+00:00\",\"description\":\"Images are crucial to website performance, but most still don't implement responsive images. Learn how to make images for responsive web design\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Images for Responsive Web 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":"How to Create Images for Responsive Web Design","description":"Images are crucial to website performance, but most still don't implement responsive images. Learn how to make images for responsive web design","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\/make_all_images_on_your_website_responsive_in_3_easy_steps","og_locale":"en_US","og_type":"article","og_title":"How to Create Images for Responsive Web Design","og_description":"Images are crucial to website performance, but most still don't implement responsive images. Learn how to make images for responsive web design","og_url":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps","og_site_name":"Cloudinary Blog","article_published_time":"2017-08-28T12:47:13+00:00","article_modified_time":"2025-02-22T00:32:15+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647045697\/33_img_responsive_design\/33_img_responsive_design-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps"},"author":{"name":"","@id":""},"headline":"How to Create Images for Responsive Web Design","datePublished":"2017-08-28T12:47:13+00:00","dateModified":"2025-02-22T00:32:15+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps"},"wordCount":222,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA","keywords":["Guest Post","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps","url":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps","name":"How to Create Images for Responsive Web Design","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA","datePublished":"2017-08-28T12:47:13+00:00","dateModified":"2025-02-22T00:32:15+00:00","description":"Images are crucial to website performance, but most still don't implement responsive images. Learn how to make images for responsive web design","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Images for Responsive Web 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\/v1647045697\/33_img_responsive_design\/33_img_responsive_design.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21583","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=21583"}],"version-history":[{"count":23,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21583\/revisions"}],"predecessor-version":[{"id":36936,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21583\/revisions\/36936"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23348"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}