MMDE5012

1. MMDE5012 1 • Interactive Media Practice Seminar 2 • Week 2

2. Class Website / blog 2 • http://www.saimaali.com/teaching/MMDE5012

3. Retina Graphics 3

4. 4 What is Retina? • “High DPI” and “Retina” displays are currently changing the nature of the web. • Before telling you how to develop images for these new devices, it makes sense to understand the basics of the technology: what is high DPI, and why is it significant? • Very simply, “high DPI” and “Retina” mean the same thing: a device with a high pixel density. • “Pixel density” is the number of pixels a display can fit into a fixed distance. • This is different from “resolution”, which is a simple count of the number of pixels across the entire width and height of a device.

5. 5 What is Retina? • We have Retina capable iPhones, iPods, iPads and MacBooks. • The iPhone 3GS (non-Retina) features a display resolution of 153,600 pixels. • The iPhone 4 features a display resolution of 614,400 pixels.

6. 6 Pixel Density • For example, the resolution of an iPhone 4 to an old VGA desktop monitor, the monitor will have a similar resolution, but a much larger physical size, and thus a significantly lower pixel density. • If we divide the physical width of the display (in inchs) by the number of pixels displayed horizontally, the result is the number of pixels per inch (ppi, also commonly referred to asdpi). • Most current desktop monitors display around 96 to 110 DPI, with laptops coming in slightly higher. • “High DPI” is generally acknowledged to be any device with a display density of 200 pixels per inch or greater.

7. 7 DPI • Traditional development practices have optimized web-ready graphics at the common denominator of 72 DPI. • A “high DPI” device displaying such an image must double or even quadruple the number of pixels in the graphic to provide the impression that it is roughly the same size on a Retina display. • Due to this interpolation – a fancy name for guesswork – the image quality suffers. • Once you understand the concept pixel density, the issue is how to optimize your images for the new displays.

8. 8 Resolution Independence (RI) • Another concept to understand is Resolution Independence. • Interfaces that can scale are said to have Resolution Independence. • It means having resources that will look great at different sizes.

9. 9 The Retina Concept • What it is not: • Images saved at a higher resolution (PPI / DPI). • iOS ignores the PPI (pixels per inch) information stored inside images. • What it is: • Images saved at twice the size (2x). • E.g. a 100x100 px image would become 200x200 px. • The supersized (2x) images are then displayed in the original image size dimensions. • This creates a smooth and crisp appearance on high pixel density (Retina) screens.

10. 10 What is Retina? • iOS resolutions • 640 x 960 (iPhone and iPod Touch) • 1536 x 2048 / 2048 x 1536 (iPad) • App icons • iPhone: 57 x 57 • Retina iPhone: 114 x 114 • iPad: 72 x 72 • Retina iPad: 144 x 144

11. 11

12. 12

13. 13 Designing Retina Graphics • Bitmaps are your enemy. • If you do need to work with bitmap images (eg jpegs etc), the most important point in this new web development process is – always retain the very highest resolution version of your images. • The Best way to design graphics / icons / logos for different scales is in an EPS or AI format.

14. 14 Vectors • These formats use vector graphics. • Vector graphics use of geometricalfeatures such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions. • This makes them ‘scalable’ without any loss of quality. • You can also use Photoshop’s vector features eg the Shape tool. • Complex vector objects can be drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a Shape layer.

15. 15 Designing Retina Graphics • What if you already have a website and you want to add Retina support? • You have to go back and rebuild every image! • Scaling up an image would result in a fuzzy appearance with lots of anti-aliased lines. • Use Photoshop’s Image Size option called Nearest Neighbor. • Not as good as rebuilding the element.

16. 16

17. 17

18. 18 Designing Retina Graphics • What about designing at 200% (2x) and scaling down? • Scaling down an image in Photoshop would result in a fuzzy appearance, especially when it comes to icons. • This is why everything should be built as vector objects with layer styles and other generated effects.

19. 19 Coding Retina Graphics • Save everything in the same ‘images’ folder. • Filename will have an additional @2x at the end. • E.g. chart.jpg will become chart@2x.jpg • Two methods: • HTML/CSS way • Retina.JS

20. 20 Coding Retina Graphics • HTML/CSS way • Generate two versions of each image. • Background images specified in your CSS can be swapped out using media queries. • @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) • { • header h1 a • { • background-image: • url(images/blogspoon-logo@2x.png); • background-size: 164px 148px; • } • }

21. 21 Coding Retina Graphics • HTML/CSS way • For inline images, you will need to modify the <img> tag • <img src="images/snarf@2x.jpg" width="300px" height="150px" />You can use JavaScript: • if (window.devicePixelRatio == 2) { //Replace your img src with the new retina image }

22. 22 Coding Retina Graphics • Retina.JS • Add<script src=”js/retina.js”></script>to the head section of your HTML file. • Checks for @2x images in your images directory and automatically swaps them out for you.

23. 23 Further Reading • http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html • http://mobile.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/ • http://bjango.com/articles/designingforretina/ • http://bjango.com/articles/designingforretina2/

24. 24 Retina Exercises • Exercise 1: • Use media queries to swap in high density graphics when the display has a pixel ratio higher than 2. • Exercise 2: • Use the retina.js script to automatically check for retina images (@2x) and swap them.