The Computer Revolution/Computer Graphics/Using Pictures

Using Pictures in computer graphics

Pictures in printed material and websites help to relate concepts and ideas to real life concepts. For example, if an investment company’s corporate brochure talks about financial life success from investing in RRSP’s or Mutual funds then a picture of a couple on a beach relaxing or a person professionally dressed throwing his briefcase in the air with happiness creates a more powerful impact of the concept the company wants to portray. One has to be careful though of the use of pictures. Although pictures have to generically formatted and cleaned up properly there are some things graphic designers get away with and some things they don’t. I will clearly list all the properties of the image that has to be surely understood.

  1. The size of the picture or bitmap or image should be at its required size be 72 DPI ONLY on the web. Because if the picture looks good on the screen it will work for the customer and designer. However, with reference to printing, the picture size provided to the graphic designer should be the original size with the original DPI. For example a picture which was shot at 640 x 800 pixels with the DPI at 300 or 600. Which means whatever originally it was shot at. This is because for graphic designers some times making signage or posters or using the picture as backgrounds the quality has to be its best. For If I am making the image from 300 DPI at 5” x”5” to 1.5”x 1.5” then because of resizing the image the DPI becomes for example 600 within 1.5” x 1.5”. I can change the DPI of this shrunk image from 600 back to 150DPI if I want but the control of the image quality ideal for printing or publishing is in the graphic designers hand.
  2. What image quality is ideal for printing? Depending on the size of the image I recommend at least 150 DPI. It is sometimes okay to get away with 72 DPI but those instances are rare. It only happens when the picture was originally very large and then reduced. There is no difference of images when they are printed between 600 or 300. A very slight difference but printing images at 600 DPI mean increasing Rasterizing and Image processing power by double.
  3. Also crop images well. Do not crop images to a grey background accidentally if the background to be printed on is white. The grey will show.
  4. Ensure the image is CMYK not RGB. Printing process will not do it RGB but CMYK and hence don’t be surprised if you beautiful deep RGB pictures turns out different when it is printed.

It’s important to know what formats are available when using images before choosing your image for print material or web page. Such as GIF which stands for Graphics Interchange Format, this formant more commonly use with non- photographical images such as logos.

  1. A GIF are always rectangular images, however using GIF allows you to make the background transparent. This is ideal for when you want images to show the background color. For example if your logo is A & F, with a GIF the A&F would be one color and you could have the background should through instead of having a white box around the logo.
  2. PGN is another format that can be used; it stands for Portable Network Graphics. PGN are also best used for non- photographical images. Both of these formats are limited to 256 colors. PGN have the ability to compress better than GIF this means you get a slightly smaller file size with PGN than you could get with GIF.
  3. JPEG format which stands for Joint Photographical Group this is used for photographs and non-photographical images that use more than 256 colors. It is important to know what the best format is for the type of web-page you are designing.


Portable Network Graphics (PNG) format was created in 1996. PNG uses loss-less compression, similar to GIF, but it can compress more efficiently than the GIF format. The result is slightly smaller file sizes. This format was usually created for use on web pages. PNGs can be displayed in all web browser without special plug-in (Understanding Computers 13th Edition).

  • The main goal is to select the one that gives you the smallest file size and the best quality at that size


When a series of images described above create movement, it is called animation. In order to ensure that images are grouped together and display in the correct order, a program called Java applet is used. The most common type of image used is a GIF image. When the images show movement, they are called Animated GIF's.

Another type of animation uses JavaScript and is known as Flash. These moving images are more complex than animated GIF's. Many internet games use Flash, as well as ribbons on web sites or navigation bars.

Example of Animation