{"id":138,"date":"2012-03-23T09:31:41","date_gmt":"2012-03-23T09:31:41","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=138"},"modified":"2012-03-23T09:31:41","modified_gmt":"2012-03-23T09:31:41","slug":"yet-another-responsive-image-system","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/03\/23\/yet-another-responsive-image-system\/","title":{"rendered":"Yet another responsive image system"},"content":{"rendered":"<p>Hi all,<\/p>\n<p>I was surprised to see this method hadn&#8217;t been attempted before so I put together a demo (full explanatory post is <a title=\"DeltaImg - responsive images\" href=\"http:\/\/hacks.philingrey.com\/2012\/03\/deltaimg-resolution-and-bandwidth-responsive-images\/\" target=\"_blank\" rel=\"nofollow\">here<\/a>), here&#8217;s the <strong>tl;dr<\/strong> :<\/p>\n<p>A resolution and bandwidth responsive image system is shown. All img tags start pointing to the low res image versions, then javascript downloads (in the background) <strong>difference files<\/strong> to upgrade the low resolution images into a high resolution images, and as such doesn&#8217;t waste http requests or data&#8230; oh and there are some fun kitten <a title=\"Responsive Kittens!\" href=\"http:\/\/hacks.philingrey.com\/deltaimg\/test1.html\" target=\"_blank\" rel=\"nofollow\">demos<\/a> as well. All files can be found at <a title=\"DeltaImg Source\" href=\"http:\/\/github.com\/pci\/deltaimg\" target=\"_blank\" rel=\"nofollow\">github.com\/pci\/deltaimg<\/a>.<\/p>\n<p>I realise it probably only has niche usage, but it&#8217;d love some feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi all, I was surprised to see this method hadn&#8217;t been attempted before so I put together a demo (full explanatory post is here), here&#8217;s the tl;dr : A resolution and bandwidth responsive image system is shown. All img tags &hellip; <a href=\"https:\/\/www.w3.org\/community\/respimg\/2012\/03\/23\/yet-another-responsive-image-system\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1747,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-138","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/users\/1747"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":2,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/138\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}