{"id":21468,"date":"2017-02-13T16:13:11","date_gmt":"2017-02-13T16:13:11","guid":{"rendered":"http:\/\/responsive_images_guide_part_2_variable_image_resolution"},"modified":"2024-06-01T15:13:29","modified_gmt":"2024-06-01T22:13:29","slug":"responsive_images_guide_part_2_variable_image_resolution","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution","title":{"rendered":"Responsive Images Guide, Part 2: Variable Image Resolution"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>In <a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_1_what_does_it_mean_for_an_image_to_be_responsive#fn-1-mark\">Part 1<\/a> of this series, I discussed (rather abstractly) what it means for an image to be \u201cresponsive.\u201d In short, a <a href=\"https:\/\/cloudinary.com\/features\/responsive_images\">responsive image<\/a> is a <em>variable<\/em> image that adapts to fit variable contexts, in order to provide a great experience to users no matter what their screen, browser, network connection, or device may be.<\/p>\n<p>That adaptive variability can take many forms; the most common and impactful of these is <a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\">adaptive<\/a>, variable, image <strong>resolution<\/strong>.<\/p>\n<h2>Fixed vs Fluid<\/h2>\n<p>Bitmap images have a <em>fixed<\/em> resolution: they contain a fixed number of pixels. <a href=\"https:\/\/alistapart.com\/article\/fluid-images\">Images on the web, however, are <em>fluid<\/em><\/a>, and the number of pixels that they occupy in layouts and on screens can <em>vary<\/em>.<\/p>\n<p>Here\u2019s an example. Let\u2019s say we have an image\u2014<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/photo.png\" alt=\"image in a window, with resolution in the menubar\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"513\"\/><\/p>\n<p>\u2014and we want to share it with the world. We put it on a website, and load that site on our phone:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/on_phone.png\" alt=\"Image on a website on a phone\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"700\"\/><\/p>\n<p>It looks pretty sharp! Proud of our work, we send the URL to a friend, who just so happens to have a brand new 5K display:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/on_5k.png\" alt=\"Your images are blurry, brah\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"558\"\/><\/p>\n<p>He\u2019s, well, less than impressed. The problem? Our original image has a resolution of 800 \u00d7 600 \u2014 so while it looks sharp-as-a-tack on our 750 \u00d7 1334 iPhone 7 screen, it looks horribly blurry when scaled to fit our friend\u2019s 5120 \u00d7 2880 monster.<\/p>\n<p>Crispness in this (extreme!) context requires a (much!) bigger image:<\/p>\n<style>\n.erics_table {\nborder-collapse: collapse;\nmargin: 2em auto;\n}\n.erics_table td:first-child,\n.erics_table th {\npadding: 0.25em 0.5em;\n}\nerics_table td {\npadding: 0.5em;\n}\n.erics_table thead {\nborder-bottom: 1px solid #eee;\n}\n<\/style>\n<table class=\"erics_table\">\n<thead><tr>\n<th>resolution<\/th><th># of pixels<\/th><th># of bytes<\/th>\n<\/tr><\/thead>\n<tbody>\n<tr>\n<td>800 \u00d7 600<\/td><td style=\"text-align: right;\">0.48 MP<\/td><td style=\"text-align: right;\">66 kB<\/td>\n<\/tr>\n<tr>\n<td>5000 \u00d7 3750<\/td><td style=\"text-align: right;\">18.75 MP<\/td><td style=\"text-align: right;\">2.2 MB<\/td>\n<\/tr><\/tbody>\n<\/table>\n<p>To fill our friend\u2019s 5K screen, our image would need almost <em>40 times more data<\/em>. This super-sized file would, all by itself, <a href=\"http:\/\/mobile.httparchive.org\/interesting.php?a=All&amp;l=Dec%202%202016#bytesperpage\">outweigh the average webpage<\/a> and take forever to load over anything but the fastest internet connections. Worst of all, on smaller (and far more common) screens, our giant image would ultimately be downscaled to fit, and all of those extra pixels would be useless.<\/p>\n<h2>Multiple, alternate versions<\/h2>\n<p>So \u2013 should we use high-resolution images in order to take advantage of high-resolution hardware? Or should we use small images, which will load fast in low-resolution environments?<\/p>\n<p>The answer, of course, is an emphatic \u201cyes\u201d to both, and everything in-between! We can and should include <em>multiple, alternate versions of our images<\/em> \u2013<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/multiple_alternates.png\" alt=\"An array of progressively larger images\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"242\"\/><\/p>\n<p>\u2014 and make sure that we only send high-resolution versions to users who need them, while still sending low-resolution versions to everyone else.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/multiple_alternates_delivered.png\" alt=\"Arrows pointing from those versions to a phone, tablet, and 5k display\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"642\"\/><\/p>\n<p>This concept is simple enough, and the the HTML feature that allows developers to supply those multiple alternates is straightforward, too; it\u2019s called <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/Img#attr-srcset\"><code>srcset<\/code><\/a>.<\/p>\n<p>But the devil is in the details, and figuring out\u2014<\/p>\n<ol>\n<li>how many different versions you actually need<\/li>\n<li>what their resolutions should be<\/li>\n<li>and how to intelligently pick and load one of them from the set<\/li>\n<\/ol>\n<p>\u2014is surprisingly tricky! We\u2019ll tackle each of those problems in turn.<\/p>\n<h2>How many versions, at what resolutions?<\/h2>\n<p>In order to serve users in varying contexts well, we need to supply our image in multiple, alternate resolutions. But how many versions do we need, and what should their resolutions be?<\/p>\n<p>This is a hard question, so let\u2019s break it into smaller pieces. We can start by thinking about the limits: what are the largest and smallest resolutions that we\u2019ll need? In order to figure <em>that<\/em> out, we need to consider: what are the largest and smallest sizes that our image can grow\/shrink to on our layout? And what display sizes and densities do we actually care about supporting?<\/p>\n<p>Once we\u2019ve established the limits of our range, we need to figure out how to fill it in.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/min_max.png\" alt=\"min, max, question marks around the in-between\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"372\"\/><\/p>\n<p>For web devs, more resources means more to manage.<\/p>\n<p>For users, more resources means less waste. But also, more HTML to download, and fewer cache hits, resulting in, paradoxically, slower loads.<\/p>\n<p>How should we navigate these conflicting priorities? Initially, most developers threw up their hands and picked a more-or-less arbitrary step size, in pixels. <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-101-part-9-image-breakpoints\/\">Jason Grigsby pioneered the idea<\/a> that we can be smarter about this by using <em>file-size-based<\/em> steps, instead. So rather than having versions that were, say, 600, 800, and 1000 pixels-wide, we would generate versions that weighed 60 kB, 80 kB, and 100 kB.<\/p>\n<p>Why? Because different images can have surprisingly different compression characteristics, and we care much more about the wasted <em>bytes<\/em> when we load an over-sized image, than we do wasted <em>pixels<\/em>.<\/p>\n<p>Cloudinary thought that this file-size-based \u201cresponsive image breakpoint\u201d strategy was pretty smart, and built the <a href=\"http:\/\/responsivebreakpoints.com\">Responsive Images Breakpoints Generator<\/a> in order to help developers implement it. The Generator allows you to input a high-res original image and pick a maximum resolution, minimum resolution, and step-size in kilobytes; it then generates a full set of alternate resources and provides a convenient download link along with the markup you need to include them all in your HTML. Neat!<\/p>\n<h2>Pickin\u2019 problems<\/h2>\n<p>Now that we\u2019ve marked up a set of multiple, alternate resources \u2013 how should browsers pick and load the most appropriate resource out of the set?<\/p>\n<p>In order to choose, browsers need to know how many pixels are in this box:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/eric-cloudinary\/image\/upload\/w_700,q_auto,f_auto\/respimg-guide\/how_big_is_this_box.png\" alt=\"Picture of an image on a website, highlighted\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"544\"\/><\/p>\n<p>Once they know that, they can pick the version that best fills the box. But! That box-size is determined by a number of things:<\/p>\n<ol>\n<li>the viewport size<\/li>\n<li>the screen density<\/li>\n<li>the page layout<\/li>\n<\/ol>\n<p>The viewport size and screen density are always known to the browser. Page layout, however, is where things get sticky.<\/p>\n<p>When loading a webpage and parsing its HTML, browsers begin loading external resources (like CSS and images) as soon as they see their URLs in the markup. This is good for performance \u2013 <a href=\"http:\/\/mobile.httparchive.org\/interesting.php#bytesperpage\">image bytes account for 68% of the web<\/a>, and we want to <a href=\"https:\/\/www.stevesouders.com\/blog\/2013\/04\/26\/i\/\">start moving those bytes across the network as soon as possible<\/a>. But it\u2019s bad for layout-aware image loading, as it means that browsers don\u2019t, won\u2019t, and can\u2019t wait for layout before kicking off image loads. The load-it-as-soon-as-you-see-it strategy means that we, as web developers, must choose between:<\/p>\n<ul>\n<li>intentionally delaying image loads and waiting for page layout to complete so that we know how many pixels of resolution we actually need, before loading a given image<\/li>\n<li>kicking off image loads as soon as we possibly can (without knowing how many pixels we\u2019ll actually need)<\/li>\n<\/ul>\n<p>In other words: do we want our images to be resolution-responsive, or loaded without delay? Because \u2013 without adding something else to this equation \u2013 we can\u2019t have both.<\/p>\n<h2>Solutions<\/h2>\n<p>In some contexts, delayed, resolution-adaptive-sizing isn\u2019t a problem. If an image is lazy-loaded (or even just below-the-fold), we can afford to wait for layout. The <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_js\">Cloudinary Javascript library<\/a> and libraries like Alexander Farkas\u2019 <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\">lazy-sizes<\/a> circumvent the browser\u2019s normal image loading mechanisms and responsively load images \u2013 after layout \u2013 with Javascript.<\/p>\n<p>But if we want our resolution-responsive images <em>fast<\/em>, we need to short-circuit the normal flow of information. We need to <em>tell the browser the layout size of the image directly in markup<\/em>.<\/p>\n<p>This is what <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-101-part-5-sizes\/\">the <code>sizes<\/code> attribute<\/a> is for. <code>sizes<\/code> declarations have a reputation for being difficult to read and I know from bitter experience that they can be tricky to write. Because the attribute was explicitly designed to break the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Separation_of_presentation_and_content\">separation of concerns<\/a> and duplicate a little bit of layout information right there in markup, the most challenging thing about <code>sizes<\/code> might be maintenance; sites whose layout is subject to frequent tweaking will especially suffer.<\/p>\n<p>The reason that <a href=\"https:\/\/ericportis.com\/posts\/2014\/srcset-sizes#rainbow\">I love <code>sizes<\/code><\/a> <em>despite<\/em> its difficulties, is that it addresses the how-do-we-know-about-the-layout-before-we-know-about-the-layout problem <em>head on<\/em>, directly giving browsers the minimum amount of information that they need to start loading resolution-responsive images as soon as possible.<\/p>\n<p>As such, <code>sizes<\/code> is <em>required<\/em> when using the <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-101-part-4-srcset-width-descriptors\/\"><code>srcset<\/code> attribute with <code>w<\/code> descriptors<\/a> \u2013 which is the standard (and <a href=\"https:\/\/caniuse.com\/#feat=srcset\">universally supported<\/a>!) pattern for implementing resolution-adaptive responsive images.<\/p>\n<h2>Problematic, but possible<\/h2>\n<p>Fast, resolution-responsive images can be a bit tricky to implement, but the <a href=\"http:\/\/alistapart.com\/article\/responsive-images-in-practice#section3\">the payoff is enormous<\/a>. By supplying multiple versions of each image, and using either Javascript or <code>srcset<\/code> and <code>sizes<\/code> to pick amongst them, we can ensure that every user \u2013 whether they\u2019re on a phone, 5K display, or anything in between \u2013 gets a version of our image with just enough resolution to look great on their display.<\/p>\n<p>Join us next time, when we\u2019ll talk about another, vital, way that images can vary: <a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_3_variable_image_encoding\"><em>variable image encoding<\/em><\/a>.<\/p>\n<h2>Demos and more<\/h2>\n<ul>\n<li>Cloudinary\u2019s official <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images#about_responsive_images\">responsive images documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary\">An in-depth tutorial on using <code>srcset<\/code>, <code>sizes<\/code>, and Cloudinary<\/a>.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_create_images_for_responsive_design\">An introduction<\/a> to Cloudinary\u2019s Javascript-based responsive images solution.<\/li>\n<li>\n<a href=\"https:\/\/dev.opera.com\/articles\/native-responsive-images#variable-width-images\">Yoav Weiss on variable-width images<\/a>\n<\/li>\n<li>The <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-101-part-4-srcset-width-descriptors\/\">srcset<\/a>, <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-101-part-5-sizes\/\"><code>sizes<\/code><\/a>, and <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-101-part-9-image-breakpoints\/\">responsive image breakpoints<\/a> sections of Jason Grigsby\u2019s 10-part <cite>Responsive Images 101<\/cite> series (already linked above, but down here again, for good measure!)<\/li>\n<li>A <a href=\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_where_it_all_started\">three<\/a> <a href=\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_a_look_at_today_s_solutions\">part<\/a> <a href=\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\">interview<\/a> with Jason, about the history and future of responsive images.<\/li>\n<li>Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions\">introduction<\/a> and <a href=\"https:\/\/cloudinary.com\/blog\/push_button_art_direction_with_cloudinary_s_responsive_image_breakpoints_generator\">update<\/a> to the <a href=\"http:\/\/responsivebreakpoints.com\">Responsive Images Breakpoint Generator<\/a>.<\/li>\n<li>Finally, as a bit of advanced-topics extra credit: yours truly on <a href=\"https:\/\/cloudinary.com\/blog\/automatic_responsive_images_with_client_hints\">making the complexity of <code>srcset<\/code> the server\u2019s problem using <code>w_auto<\/code> and Client Hints<\/a>.<\/li>\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_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\/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":21469,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[249,251],"class_list":["post-21468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-responsive","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>Responsive Images Guide, Part 2: Variable Image Resolution<\/title>\n<meta name=\"description\" content=\"A dive into the most important responsive images use-case \u2013 resolution-adaptie images that can scale up and down to fit different display sizes and display densities \u2013\u00a0and how to solve it\" \/>\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\/responsive_images_guide_part_2_variable_image_resolution\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Images Guide, Part 2: Variable Image Resolution\" \/>\n<meta property=\"og:description\" content=\"A dive into the most important responsive images use-case \u2013 resolution-adaptie images that can scale up and down to fit different display sizes and display densities \u2013\u00a0and how to solve it\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-13T16:13:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-01T22:13:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"470\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/responsive_images_guide_part_2_variable_image_resolution#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Responsive Images Guide, Part 2: Variable Image Resolution\",\"datePublished\":\"2017-02-13T16:13:11+00:00\",\"dateModified\":\"2024-06-01T22:13:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA\",\"keywords\":[\"Responsive\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\",\"url\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\",\"name\":\"Responsive Images Guide, Part 2: Variable Image Resolution\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA\",\"datePublished\":\"2017-02-13T16:13:11+00:00\",\"dateModified\":\"2024-06-01T22:13:29+00:00\",\"description\":\"A dive into the most important responsive images use-case \u2013 resolution-adaptie images that can scale up and down to fit different display sizes and display densities \u2013\u00a0and how to solve it\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA\",\"width\":700,\"height\":470},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Images Guide, Part 2: Variable Image Resolution\"}]},{\"@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":"Responsive Images Guide, Part 2: Variable Image Resolution","description":"A dive into the most important responsive images use-case \u2013 resolution-adaptie images that can scale up and down to fit different display sizes and display densities \u2013\u00a0and how to solve it","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\/responsive_images_guide_part_2_variable_image_resolution","og_locale":"en_US","og_type":"article","og_title":"Responsive Images Guide, Part 2: Variable Image Resolution","og_description":"A dive into the most important responsive images use-case \u2013 resolution-adaptie images that can scale up and down to fit different display sizes and display densities \u2013\u00a0and how to solve it","og_url":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution","og_site_name":"Cloudinary Blog","article_published_time":"2017-02-13T16:13:11+00:00","article_modified_time":"2024-06-01T22:13:29+00:00","og_image":[{"width":700,"height":470,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution"},"author":{"name":"","@id":""},"headline":"Responsive Images Guide, Part 2: Variable Image Resolution","datePublished":"2017-02-13T16:13:11+00:00","dateModified":"2024-06-01T22:13:29+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA","keywords":["Responsive","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution","url":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution","name":"Responsive Images Guide, Part 2: Variable Image Resolution","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA","datePublished":"2017-02-13T16:13:11+00:00","dateModified":"2024-06-01T22:13:29+00:00","description":"A dive into the most important responsive images use-case \u2013 resolution-adaptie images that can scale up and down to fit different display sizes and display densities \u2013\u00a0and how to solve it","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA","width":700,"height":470},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_guide_part_2_variable_image_resolution#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Images Guide, Part 2: Variable Image Resolution"}]},{"@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\/v1649747339\/Web_Assets\/blog\/pt-2-hero\/pt-2-hero.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21468","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=21468"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21468\/revisions"}],"predecessor-version":[{"id":34266,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21468\/revisions\/34266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21469"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}