{"id":190,"date":"2012-04-26T14:42:28","date_gmt":"2012-04-26T14:42:28","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=190"},"modified":"2012-05-11T19:08:02","modified_gmt":"2012-05-11T19:08:02","slug":"syntax-issue-with-displaying-high-resolution-images-in-the-picture-element-how-a-mole-hill-could-turn-into-a-mountain","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/04\/26\/syntax-issue-with-displaying-high-resolution-images-in-the-picture-element-how-a-mole-hill-could-turn-into-a-mountain\/","title":{"rendered":"Syntax issue with displaying high-resolution images in the picture element"},"content":{"rendered":"

EDIT: We can all agree that the picture element can become very verbose<\/a>. Especially if you are thinking about supporting a wide range of devices with multiple screen sizes\/resoltions.<\/strong><\/p>\n

<\/strong>I’ve put together an example of some markup that would help allievate this issue based on image-set() CSS and URI Temapltes.<\/p>\n

View Example Mark-Up –\u00a0https:\/\/gist.github.com\/2572749<\/a><\/strong><\/p>\n

<\/strong>Big thanks to Adam Bradley for his feedback on this and helping me understand why this makes so much sense as an\u00a0alternative\u00a0way to author picture elements which makes them easier to maintain and keeps our markup DRY.<\/p>\n

<\/strong>Also, Philip Ingrey reminded me that these can all be in one media query and that each vendor prefixed device pixel ratio doesn’t need to be in an individual media query. I must have had a mind blank when I originally wrote this. I’ve updated the markup to show his example which I think is a perfect solution to the “issue” I was describing. I’ve also moved some of the code examples to github.<\/p>\n

 <picture alt=\"Alt tag describing the image\u00a0represented\">\r\n     <source src=\"photo.jpg\"\/>\r\n     <source src=\"photo@2x.jpg\" media=\"-webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2\/1,min-device-pixel-ratio:2\"\/>\r\n     <img src=\"photo.jpg\" \/>\r\n <\/picture><\/pre>\n
As\u00a0more<\/a>\u00a0and\u00a0more<\/a>\u00a0high-resolution devices come out, from smart phones, to\u00a0tablets<\/a>, to\u00a0laptops and desktops<\/a>, I think we will start to need 2 images for each breakpoint. \u00a0Where originally the picture element might have been used like so:\u00a0https:\/\/gist.github.com\/2509519<\/a><\/p>\n
I feel like a more realistic example of the picture element being used in the future will be:\u00a0https:\/\/gist.github.com\/2509534<\/a><\/p>\n
I’m glad Philip reminded me of my mistake, because the markup I had imagined to handle all the vendor prefixes to do this was crazy.<\/p>\n
On a side note, I’d love to see the user be able to choose if they want high-resolution graphics in their browser, just like they can choose their default font-size. Maybe an option where you can pick SD graphics and HD graphics. If they choose SD, it would say their device had a pixel ratio of 1 rather than 2 even if they were on a retina device.<\/p>\n","protected":false},"excerpt":{"rendered":"
EDIT: We can all agree that the picture element can become very verbose. Especially if you are thinking about supporting a wide range of devices with multiple screen sizes\/resoltions. I’ve put together an example of some markup that would help … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1382,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-190","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/190","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\/1382"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":5,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/190\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}