{"id":21424,"date":"2016-09-29T11:31:00","date_gmt":"2016-09-29T11:31:00","guid":{"rendered":"http:\/\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball"},"modified":"2022-02-25T23:40:12","modified_gmt":"2022-02-25T23:40:12","slug":"jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball","title":{"rendered":"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball"},"content":{"rendered":"
<\/div>\n

In the conclusion of this three-part interview the Jason Grigsby, we examine what the future may hold for images on the web. Previously: Part 1<\/a>, Part 2<\/a>.<\/p>\n

EP:<\/strong> I want to go back to the idea that we started with, that images are fundamentally complicated; that they\u2019ll always present us with problems. What do you think we are going to be working on and talking about in five-to-10 years with regard to images?<\/em><\/p>\n

JG:<\/strong><\/em> In five-to-10 years, I hope this stuff is all automated and we won\u2019t be talking about it. In the nearer term, there are a few things things we haven\u2019t yet solved. The obvious one is that the image-set() specification<\/a> [which allows you to use the srcset<\/code> syntax in CSS] is not yet on par with srcset<\/code> \u2013 it\u2019s not implemented in as many browsers as it should be. image-set()<\/code> actually existed before srcset<\/code>, so it\u2019s ironic that it now languishes behind.<\/p>\n

\"Can<\/p>\n

Can I Use image-set()?<\/a> Not yet, unfortunately.<\/p>\n<\/div>\n

Another thing that we encountered during our recent Cloud Four redesign<\/a> \u2013 the SVG image<\/code> element for embedding bitmaps in SVGs doesn\u2019t support srcset<\/code>. So we can\u2019t have responsive images inside of SVGs without resorting to some pretty ugly markup<\/a>.<\/p>\n

I know Tab Atkins<\/a> [of Google] talked on an SVG mailing list earlier this year about adding srcset<\/code> to SVG, and there was some discussion, but it seems to have died out. That\u2019s another area where we need to shore things up that have been left behind.<\/p>\n

And, I think, people are going to start understanding Client Hints. Right now, the only people who get what they do are CDN providers or people who work on very large sites. Client Hints can really simplify the implementation for people<\/a>.<\/p>\n

EP:<\/strong> Yes!<\/em><\/p>\n

JG:<\/strong><\/em> To the point where occasionally I think, why\u2019d we go do all of this stuff with markup standards if Client Hints were just going to come along? But, you know, Client Hints still work best with sizes<\/code>; at a minimum you need that. But they can really simplify client side implementations.<\/p>\n

\"Client<\/p>\n

The Client Hints specification.<\/p>\n<\/div>\n

EP:<\/strong> They allow you to move all of the complexity of srcset<\/code> from the markup to the server.<\/em><\/p>\n

JG:<\/strong><\/em> And they can also replace some picture<\/code> elements! You no longer need picture<\/code> to provide different image file format options. You can have an img<\/code> with the src<\/code> pointing to an asset and have a server look at the Accept<\/code> headers and decide whether a particular browser accepts WebP \u2013 if so, and if the WebP is smaller, let\u2019s ship out a WebP. And all of that can be done automatically.<\/p>\n

So, to get format adaptation, instead of having a picture<\/code> element with a bunch of source<\/code> elements with different types<\/code>, you just have a basic img<\/code> element \u2013 you don\u2019t even need a srcset<\/code>. Boom you\u2019re done.<\/p>\n

There is support for that right now. But we\u2019ve got a ways to go<\/a> to get it into all of the browsers, and also to support it from a server perspective.<\/p>\n

EP:<\/strong> Cloudinary just rolled out support<\/a>, and I\u2019m trying to strike a balance between telling people to be really excited about it \u2013 this is here, use it! \u2013 while also acknowledging the fact that, right now, it will only work in Chrome. Hopefully later this year it\u2019ll work in Firefox and maybe someday in Safari.<\/em><\/p>\n

JG:<\/strong><\/em> Support should get better. But \u2014 we\u2019re so much better off than we were before. Five years ago, we had no solutions for any of this. So any griping at this point… \u00a0Sure, there is still work that needs to be done, but it feels great to be where we are now, compared to where we were before.<\/p>\n

EP:<\/strong> Yeah, it feels like there\u2019s a foundation for people to build tooling on top of to make responsive images easy to use. But before, it wasn\u2019t hard to do responsive images \u2014 it was impossible.<\/em><\/p>\n

JG:<\/strong><\/em> People didn\u2019t even think it was a problem! We\u2019ve come a long way.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the conclusion of this three-part interview the Jason Grigsby, we examine what the future may hold for images on the web. Previously: Part 1, Part 2. EP: I want to go back to the idea that we started with, that images are fundamentally complicated; that they\u2019ll always present us with problems. What do you […]<\/p>\n","protected":false},"author":41,"featured_media":21425,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,249,251],"class_list":["post-21424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-responsive","tag-responsive-images"],"acf":[],"yoast_head":"\nAn interview with Jason Grigsby about Responsive Images<\/title>\n<meta name=\"description\" content=\"Cloudinary interviews Jason Grigsby about where responsive images are going next. Client Hints and server-side responsive image automation, here we come!\" \/>\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\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball\" \/>\n<meta property=\"og:description\" content=\"Cloudinary interviews Jason Grigsby about where responsive images are going next. Client Hints and server-side responsive image automation, here we come!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-29T11:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-25T23:40:12+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/cloudinary.com\/blog\/wp-content\/uploads\/sites\/12\/2022\/02\/hero-pt3-colored.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"333\" \/>\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\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball\",\"datePublished\":\"2016-09-29T11:31:00+00:00\",\"dateModified\":\"2022-02-25T23:40:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\"},\"wordCount\":672,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Responsive\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2016\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\",\"url\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\",\"name\":\"An interview with Jason Grigsby about Responsive Images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA\",\"datePublished\":\"2016-09-29T11:31:00+00:00\",\"dateModified\":\"2022-02-25T23:40:12+00:00\",\"description\":\"Cloudinary interviews Jason Grigsby about where responsive images are going next. Client Hints and server-side responsive image automation, here we come!\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA\",\"width\":500,\"height\":333},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball\"}]},{\"@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":"An interview with Jason Grigsby about Responsive Images","description":"Cloudinary interviews Jason Grigsby about where responsive images are going next. Client Hints and server-side responsive image automation, here we come!","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\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball","og_locale":"en_US","og_type":"article","og_title":"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball","og_description":"Cloudinary interviews Jason Grigsby about where responsive images are going next. Client Hints and server-side responsive image automation, here we come!","og_url":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball","og_site_name":"Cloudinary Blog","article_published_time":"2016-09-29T11:31:00+00:00","article_modified_time":"2022-02-25T23:40:12+00:00","og_image":[{"width":500,"height":333,"url":"http:\/\/cloudinary.com\/blog\/wp-content\/uploads\/sites\/12\/2022\/02\/hero-pt3-colored.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball"},"author":{"name":"","@id":""},"headline":"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball","datePublished":"2016-09-29T11:31:00+00:00","dateModified":"2022-02-25T23:40:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball"},"wordCount":672,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA","keywords":["Guest Post","Responsive","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2016","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball","url":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball","name":"An interview with Jason Grigsby about Responsive Images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA","datePublished":"2016-09-29T11:31:00+00:00","dateModified":"2022-02-25T23:40:12+00:00","description":"Cloudinary interviews Jason Grigsby about where responsive images are going next. Client Hints and server-side responsive image automation, here we come!","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA","width":500,"height":333},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/jason_grigsby_on_responsive_images_gazing_into_the_crystal_ball#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Jason Grigsby on Responsive Images: Gazing into the Crystal Ball"}]},{"@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\/v1649718766\/Web_Assets\/blog\/hero-pt3-colored_2142567a01\/hero-pt3-colored_2142567a01.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21424","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=21424"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21424\/revisions"}],"predecessor-version":[{"id":22943,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21424\/revisions\/22943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21425"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}