{"id":21840,"date":"2019-02-06T18:34:32","date_gmt":"2019-02-06T18:34:32","guid":{"rendered":"http:\/\/a_chaotic_good_guide_to_image_performance_part_1"},"modified":"2022-02-25T20:29:54","modified_gmt":"2022-02-25T20:29:54","slug":"a_chaotic_good_guide_to_image_performance_part_1","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1","title":{"rendered":"A Chaotic Good Guide to Image Performance, Part 1"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>I\u2019ve spent <em>a lot<\/em> of time thinking about the rules of <a href=\"https:\/\/abookapart.com\/products\/image-performance\">putting images on the web<\/a>.<\/p>\n<p>For such a flexible medium as the web, software development can feel like a painstaking, rules-oriented game\u2014an errant comma might break a build, a missing semicolon might wipe out an entire page. For a long time, the laws of image rendering seemed similarly cut-and-dry: For example, if your markups contained an <code>img<\/code> element , the singular content of its <code>src<\/code> attribute would be foisted on the audience regardless of their browsing context, period.<\/p>\n<p>Likewise, I\u2019ve been mulling long and hard over the seemingly carved-in-stone rules of the web standards-process. I had to, thanks to my role as chairman of the Responsive Issues Community Group, the private radio web-standards body that brought you the <code>picture<\/code> element and <code>srcset<\/code> and <code>sizes<\/code> attributes. After all, we had to know all the rules to, well, find creative ways to work around bureaucratic constraints. For one thing, we weren\u2019t allowed to publish a spec in the first place. We certainly weren\u2019t allowed to change the HTML spec itself though we ended up doing that nonetheless.<\/p>\n<p>We were, I\u2019m proud to say, a chaotic good web-standards group.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>A chaotic good character does what is necessary to bring about change for the better, disdains bureaucratic organizations that get in the way of social improvement, and places a high value on personal freedom, not only for oneself, but for others as well.\n\u2014 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Alignment_(Dungeons_%26_Dragons)#Chaotic_good\">Alignment (Dungeons &amp; Dragons), Wikipedia<\/a><\/p><\/div>\n<p>The short version is that there\u2019s the <em>law<\/em>\u2014the process, the paperwork, the rules, <em>the way we\u2019re supposed to do things<\/em>\u2014and then there\u2019s <em>doing the right thing<\/em>. In cases where the two align, all\u2019s well with the world. If the law comes at the expense of doing the right thing, however, a chaotic good character or, say, a chaotic good web-standards group, would  unhesitatingly deviate from the letter of the law.<\/p>\n<p>We felt justified in this philosophy, considering \u201cthe closest thing web standards have to a <a href=\"https:\/\/www.w3.org\/TR\/html-design-principles\/#priority-of-constituencies\">golden rule<\/a>\u201d:<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.<\/p><\/div>\n<ul>\n<li>\u201c<strong>Theoretical purity<\/strong>\u201d at the bottom of the list is a warning against weighing what looks the most correct on paper over the realities of the way people build and experience the web.<\/li>\n<li>\n<strong>Specifiers<\/strong> are those who are responsible for writing the standards.<\/li>\n<li>\n<strong>Implementors<\/strong> are browser vendors who create the standards for use.<\/li>\n<li>\n<strong>Authors<\/strong> are you and me\u2014the web developers who decide how and when to use the new standards.<\/li>\n<li>\n<strong>Users<\/strong> is a self-explanatory term: They\u2019re the people who, for better or worse, must, day after day,  live with the results of the new standards no matter how they were implemented and authored.<\/li>\n<\/ul>\n<p>If you\u2019re like me, you can see where the Responsive Issues Community Group (RICG) might\u2019ve decided to play a little fast and loose with some of the day-to- day rules of web standards so as to better serve the Priority of Constituencies. The PoC is an inversion of the web-standards power structure\u2014a reminder that those with the most control over how web standards are written, implemented, and used must always prioritize the wants and needs of those with less control. After all, web users pay the costs of the decisions made by the standards process, implementors, and authors alike, and we authors form the users\u2019 first line of defense.<\/p>\n<p>I say \u201ccosts\u201d with good reason, especially with respect to image transfers. The <a href=\"https:\/\/www.httparchive.org\/reports\/page-weight?start=2017_04_01&amp;end=latest\">median webpage\u2019s total transfer size<\/a> is huge: 1.7 MB as of May 2018. Images alone account for roughly half of that. According to <a href=\"http:\/\/www.pewinternet.org\/fact-sheet\/mobile\/\">Pew Research Center<\/a>, one in five Americans owns a smartphone but without a home-broadband connection, up from 13 percent in 2015 and eight percent in 2013. A full 31 percent of adults making less than $30,000 a year have access to a smartphone but no broadband connections at home, up from 20 percent in 2015. They go online by way of connections with metered limits and overage charges. Even those fortunate enough to have an \u201cunlimited\u201d mobile data plan still have their connection speed throttled beyond a certain cap.<\/p>\n<p>It would be easy, but not realistic, to say \u201cjust get rid of some images\u201d to better serve users. I know all too well that you and I are often stuck working within constraints we can\u2019t control: a \u201cfinal, approved design,\u201d a \u201cbusiness requirement,\u201d or someone <em>very important<\/em> feeling <em>very strongly<\/em> that we post images a certain way despite our protests. In real-world development, rules abound.<\/p>\n<p>So, in the spirit of the RICG, let\u2019s be a little \u201cchaotic good\u201d about some of the image performance problems we face in everyday development work. Specifically, let\u2019s be  a little creative in interpreting the constraints with images\u2014and maybe bend the rules a little\u2014in favor of the audience. With a little sleight of hand, nobody will be any wiser.<\/p>\n<p>Stay tuned for part 2 for the details.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21841,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,227],"class_list":["post-21840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-performance-optimization"],"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>A Guide to Image Optimization for Website Performance<\/title>\n<meta name=\"description\" content=\"Learn about the image performance problems we face in everyday development work and the constraints with image optimization for website performance.\" \/>\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\/a_chaotic_good_guide_to_image_performance_part_1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Chaotic Good Guide to Image Performance, Part 1\" \/>\n<meta property=\"og:description\" content=\"Learn about the image performance problems we face in everyday development work and the constraints with image optimization for website performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-06T18:34:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-25T20:29:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_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\/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\/a_chaotic_good_guide_to_image_performance_part_1#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"A Chaotic Good Guide to Image Performance, Part 1\",\"datePublished\":\"2019-02-06T18:34:32+00:00\",\"dateModified\":\"2022-02-25T20:29:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1\",\"url\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1\",\"name\":\"A Guide to Image Optimization for Website Performance\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA\",\"datePublished\":\"2019-02-06T18:34:32+00:00\",\"dateModified\":\"2022-02-25T20:29:54+00:00\",\"description\":\"Learn about the image performance problems we face in everyday development work and the constraints with image optimization for website performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Chaotic Good Guide to Image Performance, Part 1\"}]},{\"@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":"A Guide to Image Optimization for Website Performance","description":"Learn about the image performance problems we face in everyday development work and the constraints with image optimization for website performance.","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\/a_chaotic_good_guide_to_image_performance_part_1","og_locale":"en_US","og_type":"article","og_title":"A Chaotic Good Guide to Image Performance, Part 1","og_description":"Learn about the image performance problems we face in everyday development work and the constraints with image optimization for website performance.","og_url":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1","og_site_name":"Cloudinary Blog","article_published_time":"2019-02-06T18:34:32+00:00","article_modified_time":"2022-02-25T20:29:54+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1"},"author":{"name":"","@id":""},"headline":"A Chaotic Good Guide to Image Performance, Part 1","datePublished":"2019-02-06T18:34:32+00:00","dateModified":"2022-02-25T20:29:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA","keywords":["Guest Post","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1","url":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1","name":"A Guide to Image Optimization for Website Performance","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA","datePublished":"2019-02-06T18:34:32+00:00","dateModified":"2022-02-25T20:29:54+00:00","description":"Learn about the image performance problems we face in everyday development work and the constraints with image optimization for website performance.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/a_chaotic_good_guide_to_image_performance_part_1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Chaotic Good Guide to Image Performance, Part 1"}]},{"@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\/v1649721517\/Web_Assets\/blog\/chaotic-2\/chaotic-2.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21840","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=21840"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21840\/revisions"}],"predecessor-version":[{"id":22875,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21840\/revisions\/22875"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21841"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}