{"id":160,"date":"2012-04-06T00:41:47","date_gmt":"2012-04-06T00:41:47","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=160"},"modified":"2012-04-06T07:20:08","modified_gmt":"2012-04-06T07:20:08","slug":"responsive-content-images-using-a-spacer-png-and-background-image","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/04\/06\/responsive-content-images-using-a-spacer-png-and-background-image\/","title":{"rendered":"Responsive Content Images using a spacer PNG and background-image"},"content":{"rendered":"<p>I&#8217;ve spoken to a few people on Twitter about this, but it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images.<\/p>\n<p>All it requires is a blank PNG or GIF the same size as the intended image, and then setting that image&#8217;s background to whatever image needs to be served along with background-size: contain.<\/p>\n<p>It works because the spacer PNG is transparent, which allows the image&#8217;s background image to be visible. Because the background is set with CSS, it can then be changed with media queries as required to serve different images to different viewport sizes or resolutions.<\/p>\n<p>And yes, it even works with serving &quot;retina images&quot; to the new iPad.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>All users, regardless of device width\/resolution\/whatever get the image that&#8217;s targeted for them with minimal overhead.<\/li>\n<li>Requires no additional markup &#8211; just the img tag<\/li>\n<li>Works with existing technologies and markup.<\/li>\n<li>No dependencies on JavaScript or other polyfills.<\/li>\n<li>Images will still retain any accessibility features from the alt text.<\/li>\n<li>Replacement images can easily be targeted with the [src] attribute selector if a consistent naming convention is used.<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>An extra HTTP request to first load the spacer PNG.<\/li>\n<li>A unique PNG is required for every different dimension of content image that needs to be made responsive.<\/li>\n<li>Replacement images defined in CSS, not in markup or on the image itself.<\/li>\n<li>Users cannot pin, share or save the image easily.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/mattstow.com\/experiment\/responsive-images\/responsive-images.html\" target=\"_blank\" rel=\"nofollow\">Check out the demo page to see it action<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve spoken to a few people on Twitter about this, but it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer &hellip; <a href=\"https:\/\/www.w3.org\/community\/respimg\/2012\/04\/06\/responsive-content-images-using-a-spacer-png-and-background-image\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1936,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[4],"tags":[],"class_list":["post-160","post","type-post","status-publish","format-standard","hentry","category-responsive-web-design"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/160","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\/1936"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":7,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/160\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}