{"id":133,"date":"2012-03-15T21:44:23","date_gmt":"2012-03-15T21:44:23","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=133"},"modified":"2012-03-15T21:44:23","modified_gmt":"2012-03-15T21:44:23","slug":"polyfilling-picture-without-the-overhead","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/03\/15\/polyfilling-picture-without-the-overhead\/","title":{"rendered":"Polyfilling picture without the overhead"},"content":{"rendered":"<p>In <a href=\"http:\/\/www.w3.org\/community\/respimg\/2012\/02\/21\/a-sample-picture-implementation\/\">an early post<\/a>, I offered up a sample picture element implementation in JavaScript (a polyfill) that we could use to play with and plan how the element should behave when\/if implemented. The script did &#8220;work&#8221; in that it used the proposed picture element markup to deliver the appropriate image asset based on source elements with media queries, but it came with the common drawback that the fallback image request could not be prevented, incurring unnecessary overhead in larger-screen environments. Not ideal for production use&#8230;<\/p>\n<p>However, with<a href=\"https:\/\/github.com\/scottjehl\/picturefill\/commit\/4837bb868ea91ac4b0f5c48690ee4cb82e65b1c6\" target=\"_blank\" rel=\"nofollow\"> a small addition to the boilerplate picture markup and a tweak to the JavaScript<\/a>, we can feasibly kiss that overhead issue goodbye without sacrificing accessibility in non-JS environments, giving us all the benefits of the picture element right now, provided we&#8217;re okay with the addition of a noscript wrapper (<em>*)<\/em>\u00a0around our fallback image. \u00a0Those new<em>\u00a0<\/em>iPad images already begin to sound a lot less scary&#8230;<\/p>\n<ul>\n<li>Demo URL (check the source):\u00a0<a href=\"http:\/\/scottjehl.com\/picturefill\/\" target=\"_blank\" rel=\"nofollow\">http:\/\/scottjehl.com\/picturefill\/<\/a><\/li>\n<li>Code on Github:\u00a0<a href=\"https:\/\/github.com\/scottjehl\/picturefill\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/scottjehl\/picturefill<\/a><\/li>\n<\/ul>\n<p>So, is it responsible to suggest that developers might use something like this today, given that it provides a workable solution to this very real problem, even if the markup is not yet standard or supported natively anywhere? I&#8217;m certainly attracted to the idea, given how hard it is to do this through other means. Perhaps it&#8217;d even encourage browser implementations more if the pattern gained traction like this, I&#8217;m not sure.<\/p>\n<p>A native implementation would still of course allow image sources to be fetched immediately when the document is parsed, but as a fallback polyfill for today, I think I&#8217;m comfortable with the advantages that this slightly ugly workaround brings.<\/p>\n<p>Feedback welcome!<\/p>\n<p>Thanks<\/p>\n<p>Scott Jehl<\/p>\n<p>*\u00a0<em>The noscript idea here isn&#8217;t entirely new&#8230; Head London cleverly\u00a0<a href=\"http:\/\/www.headlondon.com\/our-thoughts\/technology\/posts\/creating-responsive-images-using-the-noscript-tag\" target=\"_blank\" rel=\"nofollow\">proposed it<\/a>\u00a0a while back. For some reason, it feels a little more purposeful to me when the noscript is used as fallback content in a picture element.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In an early post, I offered up a sample picture element implementation in JavaScript (a polyfill) that we could use to play with and plan how the element should behave when\/if implemented. The script did &#8220;work&#8221; in that it used &hellip; <a href=\"https:\/\/www.w3.org\/community\/respimg\/2012\/03\/15\/polyfilling-picture-without-the-overhead\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1281,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-133","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/133","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\/1281"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":2,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/133\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}