Retina Web

1. Retina web? Monday, 10 September, 12
2. Monday, 10 September, 12
3. HTML <img src="example@2x.png" width="200" height="300" /> Monday, 10 September, 12
4. JS $(window).load(function() { var images = $('img'); images.each(function(i) { $(this).width($(this).width() / 2); }); }); Monday, 10 September, 12
5. CSS .image { background-image: url(example@2x.png); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; } Monday, 10 September, 12
6. HTML AND CSS SIZING: PROS • Easy to implement • Cross-browser compatible HTML AND CSS SIZING: CONS • Non-Retina devices have to download larger assets. • Downsampled images might lose some of their sharpness on standard- density screens, depending on the algorithm used. • The background-size property is not supported in IE 7 or 8. Monday, 10 September, 12
7. CSS media queries .icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url(example@2x.png); } } Monday, 10 September, 12
8. CSS QUERYING: PROS • Devices download only those assets that target them. • Cross-browser compatible • Pixel-precise control CSS QUERYING: CONS • Tedious to implement, especially on large websites. • Displaying content images as backgrounds of other HTML elements is semantically incorrect. Monday, 10 September, 12
9. JS media queries $(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } }); Monday, 10 September, 12
10. JAVASCRIPT QUERYING: PROS • Easy to implement • Non-Retina devices do not download large assets. • Pixel-precise control JAVASCRIPT QUERYING: CONS • Retina devices have to download both standard- and high-resolution images. • The image-swapping effect is visible on Retina devices. • Does not work on some popular browsers (such as IE and Firefox). Monday, 10 September, 12
11. SVG <img src="example.svg" width="200" height="300" /> Monday, 10 September, 12
12. SVG /* Using background-image */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /* Using content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ } Monday, 10 September, 12
13. SVG: PROS • One universal asset for all devices • Easy to maintain • Future-proof: infinitely scalable vector graphics SVG: CONS • No pixel precision due to anti-aliasing • Unsuitable for complex graphics due to large file sizes • No native support in IE 7 and 8 or early Android versions Monday, 10 September, 12
14. Standard...? Monday, 10 September, 12
15. Proposed by Apple... .image { background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x); background-size: 200px 300px; } Monday, 10 September, 12
16. W3C proposal Monday, 10 September, 12
17. A single image source is unlikely to be appropriate for a wide range of displays, in terms of composition. Take, for example, the following photograph of President Obama speaking at a Chrysler Plant: Monday, 10 September, 12
18. The background adds additional context at larger sizes. When the image is resized for smaller displays, the original subject matter is nearly lost: Monday, 10 September, 12
19. Ideally, rather than simply resizing the image, an alternate crop of the same subject could be introduced on smaller displays to better convey the focus of the image: Monday, 10 September, 12
20. A container for disparate source elements, all of which represent the same subject matter. A consistent and predictable pattern for delivering alternate media sources based on client context based on media queries, within attributes on source elements. The ability to optionally specify resolution-appropriate sources on each source element, using the srcset attribute in place of src. A proven, reliable fallback pattern for non-supporting browsers. Proposed solution Monday, 10 September, 12
21. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"> </picture> Proposed solution Monday, 10 September, 12
22. 1.If the picture element is unsupported, the img contained therein is shown as fallback markup. 2.Uses media attributes to determine which source element best suits the user’s viewport. 3.Once an appropriate source element has been selected, the srcset attribute determines which image source is best suited to the user’s context in terms of pixel density. Theoretically, this can be overridden based on settings within the UA — bandwidth detection, or a user preference. If only a single resolution is necessary, the src attribute will function as expected. Proposed solution Monday, 10 September, 12
23. Demo http://wil.to/picturefill/ Monday, 10 September, 12
24. Refer to the prev presentation content resizing? Monday, 10 September, 12