My last blog talked about monitor resolution. Now I want to tallk about image resolution. There are two kinds of image graphics; vector and raster. Vector graphics are mathematically defined so when you modify the size, it mathematically rescales the image. Because they are scalable, they don’t have the resizing issues that raster graphics have. Your logo was most likely created as a vector graphic. And Adobe Illustrator is the industry standard software to create vector graphics.
Raster graphics are used for photographic images. Adobe Photoshop and other image editing software programs are raster based. I use Photoshop, so that’s what I will refer to. Raster images are made up of pixels. A pixel is the smallest, most basic unit of an image. Each pixel is assigned a specific color value and this allows for rich, full color images with a wide range of color values.
The quality and appearance of a raster image is determined by (1) its size and (2) its resolution. Going back to the grid example I used to explain monitor resolution, each square in the grid equals 1 pixel. This grid is a fixed size, when you change the resolution, you are changing the number of squares in the grid. The higher the resolution, or the more squares in your grid (pixels per inch), the sharper the image. If you don’t have enough squares in your grid, they get spread out over a large area, and the image can look pixelated or fuzzy. Images that are prepared for print have a resolution of 300 pixels per inch (ppi). But all the information contained in each little pixel adds to the size of the file. And file size is extremely important on the web.
Here you can see an image with a close up to see the individual pixels.
To prepare an image for the web, what we are essentially doing is reducing the file size. We want to make download time as short as possible. The best way to reduce file size is to reduce resolution. The traditional resolution of an image that will be used on the web is 72 ppi. And don’t worry, images that are 72 ppi will look great online.
Let’s do an example: I have an image (or a grid) that is 300x300 ppi (width by height). So the entire grid contains 300x300 or 90,000 pixels. The physical size of this image at 300 ppi is 1”x1” (wxh).
We can make the file size much smaller by reducing the resolution to 72 ppi or 72x72 = 5,184 pixels. Photoshop discards the extra 84,816 pixels and still has all of the information it needs to make the 1”x1” image look good at 72 ppi. Once Photoshop dumps this information, you cannot resize back to the original, so always do a Save As.
But this does not work the other way. If you have an image made up of 5,184 pixels, Photoshop has to guess what to create with 84,816 missing pixels. The image quality will definitely suffer. This is why you can’t take an image off of the web and expect it to print clearly.
Does size matter? You betcha! Let’s go back to the grid. We have an image that is 4”x5” (wxh) at 72 ppi. That is 288x360 pixels or 103,680 ppi. A 72 ppi image that is 8”x10” has 576x720 or 414,720. Photoshop again has to guess how to fill in those 311,040 pixels and the quality will suffer. That is why you can’t enlarge an image off the web.
But going from 8”x10” to 4”x5” just discards the extra pixels and has all of the information it needs. Again, once this information is dumped you cannot go back to the original.
And that’s it! Easy, right?...