{"id":21766,"date":"2018-07-26T18:14:56","date_gmt":"2018-07-26T18:14:56","guid":{"rendered":"http:\/\/client_hints_and_responsive_images_what_changed_in_chrome_67"},"modified":"2024-06-01T14:46:56","modified_gmt":"2024-06-01T21:46:56","slug":"client_hints_and_responsive_images_what_changed_in_chrome_67","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67","title":{"rendered":"Client Hints and Responsive Images &#8211; Chrome 67 Changes"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>TL;DR<\/h2>\n<ul>\n<li>Chrome 35 introduced Client Hints, a tool for simplifying <a href=\"https:\/\/cloudinary.com\/features\/responsive_images\">Responsive Images<\/a>.<\/li>\n<li>Cloudinary quickly deployed a number of Client-Hints-powered features:\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/automatic_responsive_images_with_client_hints#automatic_width\">Using <code>w_auto<\/code><\/a>, you can fit images to their layout width. Since the feature\u2019s debut, it has delivered a median byte-size savings of 42% (51 KB) compared to the baseline.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/automatic_responsive_images_with_client_hints#automatic_dpr\">With <code>dpr_auto<\/code><\/a>, you can enhance images to crisp, high-DPR images for the 60% of users with high-DPR displays (65% of desktop; 95% of mobile) while ensuring that the default is still a 1x, baseline image.<\/li>\n<li>We\u2019ve made <code>q_auto<\/code> <a href=\"https:\/\/cloudinary.com\/blog\/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size#automatic_quality_default_values\">aware of the <code>Save-Data<\/code><\/a> hint, saving even more bytes.<\/li>\n<\/ul>\n<\/li>\n<li>A month ago, <a href=\"https:\/\/github.com\/httpwg\/http-extensions\/issues\/372\">concerns were raised<\/a> about Client Hints\u2019 potential for  tracking users across websites. As a result, <em>desktop<\/em> Chrome 67 \/temporarily\/ stopped sending Client Hints to third parties and subdomains, such as <code>res.cloudinary.com<\/code> and <code>images.example.com<\/code>.<\/li>\n<li>We were able to <a href=\"https:\/\/groups.google.com\/a\/chromium.org\/forum\/#!msg\/blink-dev\/8RBFue7RMXQ\/7TF4VPVzBAAJ\">provide some feedback<\/a> to the Chrome team which ensured that Cloudinary\u2019s Client Hints-powered features <a href=\"https:\/\/groups.google.com\/a\/chromium.org\/forum\/#!msg\/blink-dev\/8RBFue7RMXQ\/7TF4VPVzBAAJ\">still work on mobile Chrome<\/a>. Desktop Chrome will work again as soon as the <a href=\"https:\/\/wicg.github.io\/feature-policy\/\">Feature Policy<\/a> spec work and implementation are complete.<\/li>\n<\/ul>\n<h2>What are Client Hints, Again?<\/h2>\n<p>In 2015, Chrome 35 added support for Client Hints. Client Hints are <a href=\"https:\/\/www.smashingmagazine.com\/2016\/01\/leaner-responsive-images-client-hints\/\">awesome<\/a>! With Client Hints, you can <a href=\"https:\/\/cloudfour.com\/thinks\/responsive-images-201-client-hints\/\">simplify the HTML required for Responsive Images<\/a>, ensure that images are crisp on high-DPR displays, and improve <a href=\"http:\/\/wpostats.com\/\">#webperf<\/a>. At the time of writing, Chrome 35+ is the only browser to have adopted this standard. Cloudinary has introduced support with the <code>w_auto<\/code>, <code>dpr_auto<\/code>, and <code>q_auto<\/code> parameters.<\/p>\n<p>To refresh your memory, the four primary Client Hints are:<\/p>\n<ul>\n<li>\n<code>Viewport-Width<\/code>: This is the width of the browser window in CSS pixels. On mobile devices, this width is almost always 100% of the screen size, usually around 320 pixels (CSS).<\/li>\n<li>\n<code>DPR<\/code>: This is the device\u2019s pixel ratio. For mobile devices, this ratio is usually between 2-4. Increasingly, desktop displays also have a <code>DPR<\/code> of 2.<\/li>\n<li>\n<code>Width<\/code>: This is the actual width\u2014in device pixels\u2014of the image as shown on screen. <strong>Note<\/strong>: This width is sent only if you also add the <code>&lt;img sizes&gt;<\/code> attribute.<\/li>\n<li>\n<code>Save-Data<\/code>: This flag, particularly useful on cellular, indicates that a server should help reduce data. (For completeness, this hint has moved to the <a href=\"https:\/\/wicg.github.io\/netinfo\/#save-data-request-header-field\">NetInfo spec<\/a>.)<\/li>\n<\/ul>\n<h2>What has Client Hints Really Done for Me Lately?<\/h2>\n<p style=\"text-align:left; font-size: 20px; font-style: italic;margin: 30px;line-height:36px\">\nw_auto typically reduces image bytes by 42%!\n<\/p>\n<p><code>w_auto<\/code> ensures that end-users receive image resources that are sized to fit the image\u2019s layout size. Usually, that means scaling down an image, which reduces image bytes and makes for a faster experience.<\/p>\n<p>For example, if you had a thumbnail image that fills only one-third of the screen, you could use the following HTML. Note the <code>&lt;img sizes&gt;<\/code> attribute.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;meta http-equiv=&quot;Accept-CH&quot; content=&quot;DPR, Viewport-Width, Width&quot;&gt;\n\n&lt;img src=&quot;https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_auto\/sample.jpg&quot; sizes=&quot;33vw&quot;&gt;\n<\/code><\/pre>\n<p>Users without Client Hints (eg: those who are on Firefox or Safari) do not get a resized image. To accommodate them, most developers set a fallback size, such as <code>w_auto:100:500<\/code>. Yet, if you compare the bytes sent by Chrome with Client-Hints to other (\u201csimple-brain\u201d) browsers, you can see that the median user downloads 42% less bytes, or 51KB per image, a significant savings.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto\/dpr_auto\/Percent_byte_reduction.png\" alt=\"Byte savings per image request\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1000\" height=\"618\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto\/dpr_auto\/KB_Savings.png\" alt=\"Byte savings per image request\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1000\" height=\"618\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto\/dpr_auto\/KB_Savings_2.png\" alt=\"Byte savings per image request\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1000\" height=\"618\"\/><\/p>\n<p>Of course, different images see different savings. Some images are smaller by default; others are larger. Above is a Cumulative Distribution Function (CDF) of end-user experiences. On the y-axis is the percentile of user requests (a popular image is counted more times than an unpopular image). On the x-axis is the percent of bytes saved and the amount of bytes that Client Hints users saved per image as compared to non-Client Hints users.<\/p>\n<p>As you can see, with Client Hints you can dramatically reduce the byte size per image. Responsive Images matter for performance!<\/p>\n<p style=\"text-align:left; font-size: 20px; font-style: italic;margin: 30px;line-height:36px\">\n60% of users have high-DPR screens \n<\/p>\n<p>With the introduction of Retina displays on the iPhone 4, mobile and desktop manufacturers have increased physical-pixel density for a high-quality experience. To keep web pages from appearing really small on those devices, the number of logical, CSS pixels that are presented to web developers have remained constant (usually around 320 CSS pixels). However, you can multiply those CSS pixels by the device pixel ratio (DPR) to get the number of actual, physical pixels.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/DPR_Values_1.png\" alt=\"DPR by Users\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"865\"\/><\/p>\n<p>Currently, approximately 60% of all users have high-DPR displays. Ironically, it is mostly mobile devices that have those fantastic displays: 95% of Android devices compared to 65% of desktops.<\/p>\n<p>Most content on the web is designed for <code>DPR: 1<\/code> and, therefore, must be \u2018\u201cup-sampled\u201d\u2019 to fill in the extra pixels on the display. The result is a subpar experience, which might not matter for icons and logos. However, for hero images, marketing campaigns, product images, art, and such, you would want to enhance the experience by matching the DPR of the device.<\/p>\n<p>Of course, you wouldn\u2019t want to send a <code>DPR: 3<\/code> image unnecessarily to a 1x device since it would result in unnecessary bytes. By adding the <code>dpr_auto<\/code> parameter, you can automatically enhance the user experience based on the device:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;meta http-equiv=&quot;Accept-CH&quot; content=&quot;DPR, Viewport-Width, Width&quot;&gt;\n&lt;img src=&quot;https:\/\/res.cloudinary.com\/demo\/image\/upload\/dpr_auto\/sample.jpg&quot; &gt;\n<\/code><\/pre>\n<h2>What Are the Privacy Concerns With Client Hints?<\/h2>\n<p>During a routine review, Google\u2019s privacy team <a href=\"https:\/\/github.com\/httpwg\/http-extensions\/issues\/372\">raised the concern<\/a> that Client Hints could be used for fingerprinting users. Specifically, a person could be identified between websites without cookies but by correlating their screen size with the <code>Viewport-Width<\/code> and <code>DPR<\/code> attributes. That is possible because Client Hints, once enabled on, say, <code>www.example.com<\/code>, are sent not only to the <code>www.example.com<\/code> domain, but also to subdomains and third parties, such as <code>images.example.com<\/code> and <code>evil.zombies.com<\/code>. If multiple, unrelated web pages enable Client Hints and load sub-resources from <code>evil.zombies.com<\/code>, <code>evil.zombies.com<\/code> might be able to use those hints in their evil quest to uniquely identify some users, \u201cfingerprinting\u201d and tracking them as they move across the web.<\/p>\n<p>Given that the viewport size of a Pixel 2 is the same for every device, you might wonder how one could use Client Hints to uniquely identify an individual. Also, how could request details like <code>Viewport-Width: 320<\/code>, <code>DPR: 2<\/code>, and <code>Width: 500<\/code> be used for fingerprinting?<\/p>\n<p>Good questions. Client Hints don\u2019t reveal personal information. Nonetheless, in some situations \u2013 especially on desktops, where <code>Viewport-Width<\/code> varies wildly \u2013 those values could be combined with other details, e.g., your IP address, to make you measurably more unique than you already were. For example, if you don\u2019t have your browser window set to full screen, you probably have a slightly different <code>Viewport-Width<\/code> value than that of most other users. By combining that browser-width with, say, your Starbucks WiFi IP address, <code>evil.zombies.com<\/code> could passively identify <a href=\"https:\/\/freedom-to-tinker.com\/2018\/06\/29\/against-privacy-defeatism-why-browsers-can-still-stop-fingerprinting\/\">and fingerprint you<\/a> you across multiple unrelated web pages.<\/p>\n<p>We understood this concern in principle, but wanted to see what it looked like, in practice. So we looked at the existing values that we were receiving for <code>Viewport-Width<\/code> and found that 99% users fall into 40 standard viewport widths. However, the long tail of viewport-widths is very long \u2013 there are thousands of different values.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Viewport-Width_values.png\" alt=\"Viewport-Width by Users\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"865\"\/><\/p>\n<p>(Note that most of the 2.6% of \u201cOther\u201d Android values are probably \u201cdesktop\u201d ChromeBooks.)<\/p>\n<h2>Where Are We Now? What Has Changed?<\/h2>\n<p>Out of an abundance of caution, the Chrome team decided to take action and disabled Client Hints for all cross-origin domains. So even if <code>www.example.com<\/code> has enabled Client Hints, desktop Chrome is not currently sending them to <code>images.example.com<\/code> or <code>res.cloudinary.com<\/code>.<\/p>\n<p>Fortunately, <a href=\"https:\/\/groups.google.com\/a\/chromium.org\/d\/msg\/blink-dev\/8RBFue7RMXQ\/haCCmxcwBAAJ\">we were able to share the benefits that our customers see with Client Hints<\/a>, and make the case that hints from <em>mobile<\/em> devices should still be sent. The significant benefits of our Client Hints features mostly go to mobile users, and the privacy concerns are largely about desktop users. The Chrome team agreed, and decided to leave <a href=\"https:\/\/groups.google.com\/a\/chromium.org\/forum\/#!msg\/blink-dev\/8RBFue7RMXQ\/7TF4VPVzBAAJ\">mobile\/Android Chrome unchanged at this time<\/a>).<\/p>\n<p>The current plan, endorsed by both Google and the W3C, is to deliver fine-grain privacy controls to developers with the <a href=\"https:\/\/wicg.github.io\/feature-policy\/\">Feature Policy API<\/a>. When that is in place in Chrome, desktop Client Hints for cross-origins will be re-enabled \u2013 and Cloudinary\u2019s features will once again work for everyone.<\/p>\n<p>One other change: the spec now requires TLS for the browser to send Client Hints. Fortunately, 80% of users are already benefiting from TLS. If you are in the 20% category, what\u2019s holding you back from adopting TLS?<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Percentage_Users.png\" alt=\"HTTP Protocol from Client Hint Users\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"865\"\/><\/p>\n<h2>What Do I Do Now?<\/h2>\n<p>Despite the temporary service interruption, you, Cloudinary customer, can still realize the value of Client Hints. Here is a quick action plan for you:<\/p>\n<ol>\n<li>Move to TLS. Change all of your links to Cloudinary to <code>https:\/\/res.cloudinary.com<\/code>.<\/li>\n<li>At a minimum, enable (or keep using!) <code>w_auto<\/code> and <code>q_auto<\/code>. They will still work for mobile Chrome users, who generally benefit the most from these features.<\/li>\n<li>For images that take up significantly less than the full viewport width, be sure to add an <code>&lt;img sizes&gt;<\/code>.<\/li>\n<li>While we wait for Feature Policy, consider either using <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images#automating_responsive_images_with_javascript\">Cloudinary\u2019s JavaScript SDK<\/a>, \u2013 which can make <code>w_auto<\/code> and <code>dpr_auto<\/code> URLs work again (for a price paid in performance) \u2013 or implementing a <a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary\">markup-based responsive images solution<\/a> (for a price paid in complexity).<\/li>\n<\/ol>\n<p>If total bytes are more important to your users than speed, our JavaScript SDK can be a great stopgap solution, requiring minimal markup changes. But whereas Client Hints (and <code>srcset<\/code>) work <em>with<\/em> browsers\u2019 <a href=\"https:\/\/andydavies.me\/blog\/2013\/10\/22\/how-the-browser-pre-loader-makes-pages-load-faster\/\">preloaders<\/a>, our JavaScript SDK must work around it, intentionally delaying image loads until after it knows each image\u2019s layout size. So even though it will save kilobytes, using Javascript for responsive images costs seconds. Consider your\/your users needs carefully.<\/p>\n<h2>Conclusion<\/h2>\n<p>We love Client Hints because they produce crisp, high-quality user experiences while also saving bytes! The recent changes in Chrome are a small setback but a precautionary compromise to balance user privacy (lessons, we have learned the hard way from companies like Cambridge Analytica). Cloudinary is active in the W3C standards working groups and is working to re-enable fully-functional Client Hints as soon as possible.<\/p>\n<p>Watch for the upcoming release of the <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/06\/feature-policy\">Feature Policy API<\/a>, which will afford developers greater control over Client Hints \u2014 and much else besides. As always, feel free to join the discussion with your opinions or concerns about image standards.<\/p>\n<p>In a follow-up post, we\u2019ll share more insights on end-users of media content and best practices for using Client Hints. Just one teaser:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Viewport-Width_DPR_1.png\" alt=\"Viewport-Width vs. DPR\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"865\"\/><\/p>\n<p>Stay tuned!<\/p>\n<hr \/>\n<h2>Further Reading on 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\">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\/responsive_images_with_srcset_sizes_and_cloudinary\">Responsive Images: The srcset and sizes HTML Image Attributes<\/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":21767,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,251],"class_list":["post-21766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","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>Client Hints and Responsive Images - Chrome 67 Changes<\/title>\n<meta name=\"description\" content=\"Chrome 67 changed desktop Client Hints for privacy concerns.\" \/>\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\/client_hints_and_responsive_images_what_changed_in_chrome_67\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Client Hints and Responsive Images - Chrome 67 Changes\" \/>\n<meta property=\"og:description\" content=\"Chrome 67 changed desktop Client Hints for privacy concerns.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-26T18:14:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-01T21:46:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\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\/client_hints_and_responsive_images_what_changed_in_chrome_67#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Client Hints and Responsive Images &#8211; Chrome 67 Changes\",\"datePublished\":\"2018-07-26T18:14:56+00:00\",\"dateModified\":\"2024-06-01T21:46:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2018\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67\",\"url\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67\",\"name\":\"Client Hints and Responsive Images - Chrome 67 Changes\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA\",\"datePublished\":\"2018-07-26T18:14:56+00:00\",\"dateModified\":\"2024-06-01T21:46:56+00:00\",\"description\":\"Chrome 67 changed desktop Client Hints for privacy concerns.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Client Hints and Responsive Images &#8211; Chrome 67 Changes\"}]},{\"@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":"Client Hints and Responsive Images - Chrome 67 Changes","description":"Chrome 67 changed desktop Client Hints for privacy concerns.","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\/client_hints_and_responsive_images_what_changed_in_chrome_67","og_locale":"en_US","og_type":"article","og_title":"Client Hints and Responsive Images - Chrome 67 Changes","og_description":"Chrome 67 changed desktop Client Hints for privacy concerns.","og_url":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67","og_site_name":"Cloudinary Blog","article_published_time":"2018-07-26T18:14:56+00:00","article_modified_time":"2024-06-01T21:46:56+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67"},"author":{"name":"","@id":""},"headline":"Client Hints and Responsive Images &#8211; Chrome 67 Changes","datePublished":"2018-07-26T18:14:56+00:00","dateModified":"2024-06-01T21:46:56+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA","keywords":["Asset Management","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2018","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67","url":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67","name":"Client Hints and Responsive Images - Chrome 67 Changes","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA","datePublished":"2018-07-26T18:14:56+00:00","dateModified":"2024-06-01T21:46:56+00:00","description":"Chrome 67 changed desktop Client Hints for privacy concerns.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/client_hints_and_responsive_images_what_changed_in_chrome_67#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Client Hints and Responsive Images &#8211; Chrome 67 Changes"}]},{"@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\/v1649721808\/Web_Assets\/blog\/Client-Hints-Workaround-2000x1100-v3a\/Client-Hints-Workaround-2000x1100-v3a.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21766","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=21766"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21766\/revisions"}],"predecessor-version":[{"id":34252,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21766\/revisions\/34252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21767"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}