{"id":7691,"date":"2013-08-14T16:12:18","date_gmt":"2013-08-14T21:12:18","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=7691"},"modified":"2013-08-22T10:55:22","modified_gmt":"2013-08-22T15:55:22","slug":"webkits-srcset-image-attribute","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2013\/08\/14\/webkits-srcset-image-attribute\/","title":{"rendered":"WebKit&rsquo;s srcset Image Attribute"},"content":{"rendered":"<p><a href=\"https:\/\/www.webkit.org\/blog\/2910\/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute\/\">Dean Jackson<\/a>:<\/p>\n<blockquote cite=\"https:\/\/www.webkit.org\/blog\/2910\/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute\/\"><p>WebKit now supports the <code>srcset<\/code> attribute on image (<code>img<\/code>) elements (<a href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/srcset\/w3c-srcset\/\">official specification from the W3C<\/a>). This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don&rsquo;t. Importantly, it also provides a graceful fallback for browsers that don&rsquo;t yet support the feature.<\/p><\/blockquote>\n<p>I&rsquo;d like to see this (or the CSS equivalent <tt>-webkit-image-set<\/tt>) supported in <a href=\"http:\/\/www.cabel.name\/2008\/02\/fancyzoom-10.html\">FancyZoom<\/a>.<\/p>\n<p>Update (2013-08-22): There&rsquo;s an interesting discussion of this on <a href=\"https:\/\/news.ycombinator.com\/item?id=6253324\">Hacker News<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Dean Jackson: WebKit now supports the srcset attribute on image (img) elements (official specification from the W3C). This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don&rsquo;t. Importantly, it also provides a graceful fallback for browsers that don&rsquo;t yet support the feature. I&rsquo;d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[338,339,96,328],"class_list":["post-7691","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css","tag-html","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/7691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=7691"}],"version-history":[{"count":2,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/7691\/revisions"}],"predecessor-version":[{"id":7721,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/7691\/revisions\/7721"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=7691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=7691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=7691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}