Image size and image resolution and the curious case of vectors and rasters

There are two challenges many beginning academic visual communicators face in large format printing: image resolution and differences between raster graphics and vector graphics.

Image size and image resolution

There are two fundamental aspects to image quality that are of interest to academic visual communicators: image size and image resolution. Image size is quite intuitive, it simply means how wide and tall the image is. Image resolution is a little bit harder to grasp, it basically means how much information otherwise know as dots, pixels, or points the image includes. Most of the images you will find on the web have a resolution of 72dpi to 96dpi that means that for every inch of image there will be 72 to 96 pixels (dots) therefore the measurement unit dots per inch (dpi).

Screen resolution vs. print resolution

What looks good on your screen might not look half as good when printed on your poster. Screens generally have lower effective resolution that paper and that is where the difference lays. Consider an image that you find on the web, let say it is a Texas Tech's Double T logo. This image that you found on a webpage has a width of 200 pixels, height of 100 pixels, and a standard resolution of 72 dots per inch. That means that 200px divided by 72dpi gives us an effective width of 2.778 inches on a computer screen, not to shabby since most computer screens will have a width of 15 to 22 inches. 

However, on large paper prints we would like to see a minimum resolution of 100dpi, preferrably closer to 150dpi. Then 200px divided by 100dpi gives us 2 inches of width. This means that if you were to insert this image into your research poster it should not be wider than the shorter dimension of your cellphone. Provided that most research posters are roughly 36 inches wide that is tiny.

Copyright issues set aside, that is precisely why it is not a good practice to grab small images off the web and use them in your poster. If you would like to use any images in your poster make sure that they are large. JPEG is of the most common formats you will find on the web and as a rule of a thumb, avoid using JPEG images that are smaller than 1 megabyte (1024kb).

So what happens if you decide to use such image and size it up so that it is big enough for your audience to see it from 5 feet away? Below I will discuss differences between raster images and vectors and illustrate what happens when you enlarge a raster image and what happens if you enlarge a vector.

Raster images and vectors

Raster images represent most of the images that you currently find on the web and this term incorporates number of graphic formats you miay be familliar with such as jpeg/jpg, png, gif, tiff, bmp, and many others. On the other hand vectors tend to be used less frequently on the web and mainly include svg files but you might also encounter some eps or pdf files that are vectors.

The only thing you need to remember about the difference between raster images and vectors is that vector graphics can be indefinetely scaled up without any loss of quality. In contrast scaling up bitmap graphics will always result in loss of quality. This makes vectors particularly useful for large format printing such as posters. Since most images you find on the web are relatively small in size they do do well when inserted on posters, they are tiny. Most begining communicators will intuitively decide to stretch them so they are bigger on your design and thet is where the trouble with using bitmap images might begin.

Below is a real life example of scaling a vector and scaling a bitmap. The image on the left is an actual vector image (svg) whereas the image on the right is a ratser image (png). The original dimensions of both images are exactly the same and they were both scaled up rougly 400% to 411 pixel width.

You may notice a loss of quality, the fuzziness of the right image. This is what you would expect in many cases when printing an image grabbed form the web. The more you stretch a raster the worst it looks. Below is an example of how Double T looks when enlarged 20 times.

Summary

• Use vector graphic whenever possible
• You can enlarge or reduce any vector graphic at will
• If you decide to use raster images look for large images
• Quick and dirty rule of a thumb is to use images that have file sizes of 1MB or more
• You should not enlarge raster images but you can always make them smaller