Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Display Resolution and Images4:06 with Shon Dempsey
In this video, we will run through an example image and see it in application in typical and high PPI screens.
- Downsampling- Condensing the size of an image with a higher resolution than the display to fit the resolution of the display.
Here we have a 300-pixel by 300-pixel graphic we’ve created, and 0:00 here’s how it displays on our test monitors. 0:05 On the old-school CRT display, 0:07 it looks like it takes up a significant promotion of a display. 0:09 While if we take the same image and display it on our higher 0:13 resolution 55-inch HDTV, it takes up quite a bit less of the display. 0:17 But, if we were to measure it in inches on the screen itself, 0:22 it's larger than the CRT. 0:26 Even though the TV is much larger and what's considered HD, 0:29 the small graphic appears physically larger. 0:32 As I mentioned in the last video, 0:36 only the size of the physical pixel in the display has changed. 0:38 Each display shows the same number of pixels for 0:43 our graphic because our graphic is 300 pixels by 300 pixels. 0:45 A pixel is a pixel no matter the size of the pixel itself. 0:50 So let's take a look at our 300 pixel square image on an iPhone 0:55 running at nearly same resolution as our 55 inch HDTV. 0:59 Physically smaller but taking up about the same proportions as our HD TV. 1:05 One last thing I'd like to mention as it pertains to misconceptions about 1:10 digital images and resolution, the fancy enhanced magic we see on TV. 1:15 You know, where we see the baddie in a crowd and 1:21 we can't quite make out his face because it's so small? 1:23 Then through some fancy technology and 1:27 voice control, enhance magically reveals the villain and the case is closed. 1:29 Let's take a look at what this looks like in real life. 1:34 I'm jumping into Photoshop real quick here for illustrative purposes. 1:38 Don't worry too much about the specifics as I work through this example. 1:42 So here's an image of a quality similar to one found on a security system. 1:46 Typically an HD resolution of 1920 by 1080. 1:50 Remember from our square example that no matter the display, 1:54 one pixel is going to display as one pixel in each device. 1:58 So we have 1920 pixels in each line and 1080 pixels in each column. 2:02 If we zoom in, it doesn't automatically create new pixels in the image, 2:07 it simply enlarges the size of a pixel on our screen. 2:11 Thus making the resolution of the zoomed in area effectively less. 2:14 Let's zoom in as far as we can on this. 2:19 Now we're at 3200% zoom. 2:23 Each pixel here is clearly defined and is a single color. 2:26 There is simply no more information to be had in that pixel. 2:30 It's defined as the color and there isn't anything hidden closer in. 2:33 If we were to see a binary number in the code for this image, ones and 2:38 zeros, we wouldn't magically find any hidden ones and zeros. 2:42 If this pixel area here represented, 2:47 say a bad guy's face, that's all the detail we're going to get. 2:49 The only effective way to get a clearer image 2:53 would be to start with a higher resolution image, meaning a better camera. 2:56 So for instance our phone cameras. 3:00 We know the resolution of our phone is close to an HDTV, 3:03 however our cameras are gonna be able to take much larger photos. 3:06 For example, this image is 4032x3024, 3:10 that's why to some degree, we're able to pinch to zoom on our phone and 3:13 see detailed closer up without losing fidelity. 3:19 But once we zoom in and what would be more than 100% of the original image size, 3:22 we'll start to lose some of that fidelity. 3:27 Whew, that was a lot. 3:30 Lets do a recap. 3:32 Images or graphics have both pixel dimensions as well as pixel density 3:34 that make up the resolution of an image. 3:39 Display resolution is represented by the rows and columns of pixels. 3:42 We also want to consider the size of the display and the viewing distance for 3:47 our final imagery. 3:51 Displays show us those images based on the pixel dimensions 3:52 while ignoring the pixel density because a pixel is a pixel. 3:56 In the next video, we'll dive into image resolution as it relates to print. 4:01
You need to sign up for Treehouse in order to download course files.Sign up