Working with Raster Images: Part 2—Lots of Square ‘dots’
Two key things about raster images in that, at their source, they are made up of lots of dots and these dots exist on a rectangular canvas. This is not the case for vector images which are not made up of dots at their source (vector images exist as mathematical formulas) and do not exist on a canvas.
In the following notes, with the aid of a few examples, I hope to show how raster images are made up of lots of dots that we refer to as pixels. Technically we should always refer to the ‘dots’ in a raster image as pixels, because the term dots is used when referring to printing and a printer dot is not the same as a screen pixel. Typically, but not always (it depends on the resolution of the raster and the dot pitch of the printer), a printer dot is used to represent multiple screen pixels.
Show Me the Pixels
To do this I am going to use this picture of Emma Stone. This stunning picture of Emma is 460 pixels wide and 615 pixels high (including the border). The source image has a resolution of 72 pixels per inch which means that when shown at 100% of its size (as it is here) there are 72 pixels per inch on each pixel line.
As a ‘normal’ computer screen (as opposed to a mobile device screen) just also happens to have 72 pixels per inch on each pixel line this mean this image is displayed pixel perfect—so to speak. This means that each pixel in the source file maps exactly to one pixel on the screen.
But now I am going crop out Emma’s left eye and I am going to show it to you pixel perfect (meaning at 100% of its size) but I am also going to show it to you at 300% of its size. So in the image below the first crop of Emma’s eye (on the left) is pixel perfect and is exactly as shown in the image above. The second image has been enlarged by 300% using Adobe Photoshop Elements.
So now you can see what is starting to happen. With a 72 ppi starting point image that is enlarged by 300% you can start to see the pixels that make up the raster image.
If we further enlarge this so it is 500% or five times its original size then the pixels become very obvious.
In fact with this five times enlargement I have had to crop a little more off the sides of Emma’s eye in order for it to fit with the 650 pixel limit of my posting column; but now the square ‘dots’, errr, pixels, are very obvious.
ALL computer images that are raster images at their source are comprised of these square pixels. It just so happens that with the magic of how our eyes and brain work together in resolving what we see, if we are about an arm’s length away from the viewing surface, once the pixel density gets tighter than about 60 ppi we see it as a smooth solid picture.
In the last picture above the ppi is about 18 (or roughly 6 pixels per centimetre—if you put a ruler up to the screen you should be able to count about 6 pixels across in a centimetre*).
As a closing thought, if the resolution of the source image had been 360 ppi and not 72 ppi then by the time we had enlarged it 500% it would still have been a perfect picture and would not have turned into all pixels.
I will talk more about the three sizes of raster images—dimension, file size, and resolution—in my next posting on this subject.
* Assuming you are using a 16:10 computer screen. This may not work out right on a 16:9 TV screen being used as a computer screen.