Proper Image Sizes and Resolutions

Often you will see on websites and print images that are blurry and pixilated. The usual problem starts with trying to get an image that is one size to fill a space that is much larger than the original image. Just because an image looks sharp with a size of 100×100 pixels doesn’t mean that it’s going to look sharp once you try to blow it up to something like 200×200 pixels. Of course we are speaking of raster images, not vector. Raster graphics cannot scale to a higher resolution without loss of apparent quality. A good example of a raster image not scaling to a higher resolution (larger size) can be seen when you try to take you digital photos from your camera and try to make a poster with them. There are "tricks" around this though, and that will be covered in a later post.

Here is an image that was made with 72 ppi ((Pixels per Inch) at a size of 200×200 pixels.

Here is an image that was made with 72 ppi ((Pixels per Inch) at a size of 100×100 piles, and scaled up to 200×200 pixels.

Many people don’t seem to see a difference between the two images if they are both not side by side. But look at that 2nd image. It’s blurry and all around rather poor looking. I think the reason that many people don’t acknowledge the poor image is because they don’t know better, or maybe they just don’t know how to overcome the problem. Odd… But, since you are reading this, you are starting to grasp what the problem is and what you need to do about it.

If you where planning on making an image to fit a certain size then make sure that you start off with proper resolution and size first. A good rule of thumb is to have your web graphics be at least 72 ppi and your graphics that will be printed be at least 300 ppi. You can go lower than 300 ppi, but I feel that 300 ppi is best and is an easy number to remember.