Understanding the need for HiDPI graphics

- In this movie we're gonna be breaking down the term Retina Graphics. You've probably heard that term, Retina Screen, many times. And you may have also heard the term HiDPI or H-I-D-P-I at a time or two as well. What you may not know is that these terms are essentially interchangeable. Retina is a marketing term coined by Apple to describe their high resolution devices whereas HiDPI is the term used by almost all other manufacturers to describe their high resolution screens. In order for any screen to be considered a "Retina" or HiDPI display, it must not show any discernible pixelation when a device is held at or viewed from a normal distance from the viewer's eyes. The problem however is that because the distance at which a screen becomes retina is different for each device and screen size, the term retina is very arbitrary and by no means absolute. Take a look at this breakdown of Apple's Retina-caliber screens. Each one has different number of pixels per inch. That's because you hold an iPhone much closer to your face than you do an iPad or a desktop computer. So therefore devices that are meant to be viewed or held at a further distance from the subject will have less dots per inch, because the point at which those screens become "retina" is much lower than that of a device that you hold closer to your face. In general we look at the mobile phone as something you would hold between 8-10" away from your face. A tablet is something you hold generally between 15-16" away and a desktop or laptop computer is generally placed about 16-18" away from you. Therefore all of those viewing distances, as they increase, in turn decreases the pixel density that is needed to make those screens a "retina-caliber" screen. So exactly how does a retina screen work in terms of displaying graphics? Well the first thing you need to understand is that resolution has absolutely nothing to do with how your graphics are displayed on a high resolution screen. I can't tell you how many times I've talked to people who have tried to save their graphics for these high resolution screens and they come up to me and they say "I've saved it out at 72, "I've saved it out at 200, "I've saved it out at 300, "and they all look the same." That's because the resolution of the screen is not necessarily changing. It's the pixel density of the display that is changing and that's why pixel density is really the only thing that matters when you're talking about retina graphics. So basically what we're talking about here is, let's say we have a graphic on a screen like this. That graphic is set to take up x amount of space, in this case let's just say it takes up 150 pixels by 150 pixels, top and sides. So on a regular 72 pixels per inch screen, this is how much space that would take up. Take that same graphic at the same size and display it on a retina screen. By scale it's going to look much smaller than it should because a 150 pixels on a retina screen is a significantly smaller amount of space than it is on a regular desktop monitor. Therefore your graphics need to be scaled up two, three or even four times their original size in order to take up the same amount of space on a retina screen as they would on a standard screen. And so that's why we only worry about something that I like to call the "X" factor. So the "X" factor for your graphics is determined by the screen that you're viewing on and that could be something like 2X, 3X, 4X, it could go on and on. So as these devices become more prevalent and the resolution of devices continues to increase, pixel density and the operating system are going to be the determining factors for how you scale your images. So you don't need to worry about resolution, you only need to worry about the physical size, how much space this object takes up on screen and then based on that, how far up on the "X" scale you need to move those images in order for them to display correctly on these new high resolution displays.