Introduction to Computer Graphics

Unit Study Guide - Part 2

Pixels, Resolution, Scanning and Files 

 
Photo by ICO226 Student - File Size only 24 KB

Most of this section of the study guide is also available as a Powerpoint presentation graphics.ppt. Watch it now, the same points are repeated below for reference

Simple Graphics Guide

This section is not really difficult but it is detailed and quite technical. Don't worry if you don't understand or remember it all on the first read through. Come back to it several times and practice a lot with the scanner.

An Introduction to Scanning and Storing Photographs and Graphics

Key Points

  • Pixels and pixel depth
  • Resolution
  • File types
  • File sizes
  • Compression of graphics files

Pixels

  • The computer stores and displays pixels, or picture elements.
  • A pixel is the smallest addressable part of the computer screen.
  • A pixel is stored as a binary code representing a colour.
  • The code for a pixel can have between 1 and 32 bits of binary code.

Pixels Example

  • Here is the Photoshop logo at normal size.
  • Here it is at 400% enlargement so that you can see the pixels.
  • When an image is enlarged like this, so that you can see the individual pixels, it is said to be Pixelated. TV stations sometimes do this to hide the face of a suspect.

Pixel Depth

  • Pixel Depth describes the number of bits used to store each pixel.
  • The greater the pixel depth, the more colours a pixel can have.
  • Colour graphics vary in realism depending on resolution and pixel depth.
  • The greater the pixel depth, the better the image, the bigger the file.

Examples of Pixel Depth

  • Monochrome graphics have one-bit pixel depth. (Pure black or pure white)
  • Gray-scale graphics have more bit-depth (No colours besides black, white and grey)
  • 8 bits per pixel provides 256 colour choices (Typical of the web)
  • 24 or 32 bits per pixel provides millions of colour choices. (Typical of graphics and games software and colour printing).
  • Note that 8 bit RGB means 24 bit colour because there are 8 bits each to store the Red, Green and Blue codes

Resolution

  • Resolution refers to the density of dots on the screen or printed image and directly affects quality
  • The higher the resolution, the less jagged the image.
  • Resolution is measured in DPI (Dots per Inch)
  • (The printing industry is largely unmetricated and still uses inches because traditional printing measures such as the Point (1/ 72nd of an inch) do not easily convert to metric units.)
  • The higher the resolution, the better the potential output.

Typical Resolutions

  • Screens generally operate at around 72-100 dpi
  • Printed images range from 150 to 2400 dpi
  • Resolution affects the file size of an image.
  • The higher the resolution, the bigger the file.
  • The visible resolution is limited to the maximum possible on the output device (screen or printer).
  • No matter how high the resolution of a photograph, it can only show at the resolution of your screen or printer and no more.

File Types

  • There are many kinds of graphics file formats and this is a specialised area and a bit complicated.
  • Examples : bmp GIF JPEG TIFF PICT Raw
  • For most applications involving photographic images, use the JPEG file format (Joint Photographic Experts Group)
  • For graphics or paint type files use GIFs (Graphical Interchange Format)
  • Draw type files or vector graphics cannot be used on web pages at this time. They must first be converted to a bit mapped format usually GIF. This is called rasterising.
  • JPEG and GIF are both examples of bit mapped formats.
  • Fireworks stores files as PNG (Portable Network Graphics) files which retains the properties of bit map and vector on separate layers. The file can then be flattened and exported in a range of formats for different purposes.

Photo by ICO226 Student
Stored as a JPEG 4 the File Size is 44 KB
Photo by ICO226 Student
Stored as a GIF File the File Size is 60 KB

JPEG is generally better for this type of image

JPEG

  • The JPEG format is able to be used by most applications and all browsers
  • It has very good compression algorithms making stored images 10 times or more smaller than their true size.
  • JPEG stores a good quality image in a remarkably small file with little or no loss of quality
  • JPEG offers quality levels ranging from 100% to 1% with correspondingly smaller files and greater losses in quality. This is referred to differently in programmes. Some call this Quality 10 to Quality 1 for example
  • Most photographs seem to be acceptable at quality level 2or 3 (Photoshop) or 60%-70% (most software) which gives a file size of about 35KB for a standard sized photo at 72dpi.
  • This is the best choice for most email and web photos but only experimentation will make you an expert.

GIF

You should choose a GIF format instead of JPEG when:

  • You have a graphic with a fixed number of colours such as a logo or icon
  • You want to create an image with some transparent parts for a web page. A GIF can have ONE colour specified to become transparent. This allows the Background to show through on a web page. You can't do that with a JPEG.
  • You want the smallest possible file size with totally lossless compression (Lossless compression means that the quality of the image is not affected by the compression)
  • You want to combine a few images together to create an animation
  • You want to save text as a graphic.

Mug Clip Art
Stored as a JPEG, the File Size is 24 KB
Mug Clip Art
Stored as a GIF, the File Size is 8KB

GIF is generally better for this type of image because it creates much smaller files

File Sizes

A little knowledge is a dangerous thing!

  • With a little knowledge, you can create files that are so large they are almost unusable
  • With a bit more knowledge you can store the same image in a file that is a fraction of the size with little or no loss of quality
  • You MUST understand this if you are going to use graphics effectively.

Emailing Photographs

  • A photo can have a file size anywhere between 20 KB and 90 MB (yes MB) depending on the way you save it.
  • This is an extreme example but it is possible.
  • That's the difference between 4 seconds and 5 hours download time on the Internet from a web page or as an email attachment
  • In both cases the photo would look exactly the same on the screen !
Example of JPEG compression

JPEG Quality 10 File Size 100K

JPEG Quality 1 File Size 32 KB

Can you see the difference. Not much loss even at the greatest compression.
Quality ONE refers to Photoshop this equates to a 70% option in most software.

Example (without compression)

A standard postcard is 6in by 4in. If it is in 8 bit colour - (256 colours), each pixel is stored as 8 bits of binary code (1 byte per pixel). The following file sizes will apply prior to applying any compression:

  • At a resolution of 100 dpi the image is 600 by 400 dots - 240,000 pixels
  • A file size of 240,000 bytes (240 KB)
  • At a resolution of 300 dpi it becomes 1800 by 1200 dots - 2,160,000 pixels
  • A file size of 2,160,000 bits (2 MB) That means it is now 9 times as big!
  • At a resolution of 600 dpi it becomes 3600 by 2400 dots - 8,640,000 pixels
  • A file size of 8,640,000,000 bits (8 MB) - Now 36 times as big!
  • And on screen you can't see any difference!

Note - for 32 bit colour (millions of colours) the file sizes are 4 times bigger again because each of RGB and black are stored as one byte each!

Compression

  • The previous example is for uncompressed files and ignores the fact that some file formats compress the data using very clever algorithms.
  • With a good compression system, file sizes can be significantly reduced with little or no loss of quality.
  • JPEG has compression built in at 10 quality levels but is a "lossy" algorithm. (Some data is gone forever when you compress)
  • GIF compresses files with a "lossless" algorithm and so no quality is lost.
  • When a file has a large number of colours, a GIF will generally create a larger file than a JPEG 

A Simple Rule of Thumb

  • For use in any screen based application such as PowerPoint or the Internet, a 72 to 100 dpi medium quality JPEG 4 will usually suffice

UNLESS

  • You plan to crop a part of the image (see later), enlarge it and then use it at the larger size.

Then

  • You would increase the original scanning resolution accordingly

Over Compression

If you choose too high a compression, the photo will start to display rectangles of solid colour rather than gradients of changing colour tone. These are called compression artefacts and you can see extreme examples in these photographs. To get this bad, you need to go down to 30% quality or less. Photoshop won't let you go below 70% so you can't make things look this bad.

Bad Compression Photo Kal Gold bad compression

Printing

  • Even for images that will eventually be printed, there is little point scanning beyond 150 dpi unless you are producing a very high quality glossy colour magazine (in which case you would use 300 dpi.)
  • If you want to enlarge an image then you would scan at correspondingly higher resolution.
  • If necessary, a low resolution image can be reduced in print size to effectively give a higher resolution image on paper
  • e.g. if you halve the print size of a 150 dpi image you have a 300 dpi image.
  • Laser printers rated as 600 dpi may only use 100 dpi in a graphic as far as I can work out but it seems shrouded in mystery.

Scanning Steps

  • Make sure the scanner glass is clean
  • Put your photo or graphic on the scanner bed.
  • Open Photoshop (or some other bit mapped graphics programme)
  • Choose File / Import/ Twain / Acquire (or something similar)
  • Ask for a prescan or if it is automatic, wait for the prescan to finish
  • Crop the area that you want to scan properly
  • Check the settings - use 100 dpi for most purposes
  • Press SCAN
  • Save the image as JPEG then choose medium quality
  • Experiment with the same scan at different resolutions and file types if you want to understand this better

Use the Scanner

Experiment with using the scanner and read all the settings on the scanner control screen.

Most scanners offer "consumer" settings and "expert" settings. It is not that hard to use the expert settings and you will have a much better idea what is happening but the consumer settings will do the job most of the time.

Make a few practice scans and look at the sizes of the files after you have saved them.

Scanners don't just do photos and flat things, you can also scan 3D objects such as fruit and vegetables with very good results.Try chillies or coffee beans. Bunches of keys are very effective. Material such as batik can be scanned to provide background textures.

If necessary throw a black cloth or coat over the scanner to cover the gap around the lid. You can usually remove scanner lids if you want to scan something really big.

Baked beans look great if you wash off the tomato sauce first (just joking! don't try this at home).

Keep the results in your folio.

After a bit of practice, your photos can look as good as this

Photo by ICO226 Student - File Size 44 KB
Photo by ICO226 Student - File Size 40 KB
Some references for more detail.

Part 3 - Scanning and Saving Images

Scan 2 photos or objects at 300 dpi and then save the file in various formats as described below, noting the file size each time. You can work in groups for this to avoid wasting time on the scanner.

Start with the original file each time and use SAVE AS to create the other versions.

Then scan the photo again at 72dpi or resample it at 72dpi in your graphics programme and start from there.

Present the results in a table like the one below.

Print out copies of the FOUR versions of one of the photos shown in BOLD and label them in your Folio.

The file size of a photograph is much larger when it is open because it is then decompressed into RAM. The size you need to know is the size when it is closed and stored on the disk.

You need to know the file sizes when the files are closed, look in the operating system to find this out.

You don't need to keep these files once you are sure that you have not made errors. They will take up a lot of disk space. The quality levels will depend on the software you are using.

Name of File

Resolution File Type File Size

PhotoA300.psd

300 Original scan ?

PhotoA300j10.jpg

300 JPEG Quality 10 (100%) ?

PhotoA300j5.jpg

300 JPEG Quality 5 (80%) ?

PhotoA300j3.jpg

300 JPEG Quality 3 (70%) ?

PhotoA300j1.jpg

300 JPEG Quality 1 (25%) ?

PhotoA72.psd

72 Original scan (or resample)

PhotoA72j10.jpg

72 JPEG Quality 10 (100%)

PhotoA72j5.jpg

72 JPEG Quality 5 (80%)

PhotoA72j3.jpg

72 JPEG Quality 3 (70%)

PhotoA72j1.jpg

72 JPEG Quality 1 (25%)

PhotoB300.psd

...

etc.

Part 4- Better Drawing and Painting

Use any combination of drawing and painting tools to produce a project. Work at 300 DPI on a canvas large enough for the task. Make sure your canvas is exactly the right size for the project.

You can choose any of the following or discuss an alternative with the tutor:

A home page for a website (graphical version, it doesn't have to work)

A CD cover

The introduction screen of a DVD

The opening screen of a CD ROM or Computer Game

You must use a range of tools and techniques including text.

Part 5 - Comparing Your Drawings and Paintings

Write a two page article (500 words) comparing the drawings and paintings that you have done and say which tools you thought were best suited to each task.

Give specific reasons to support your answer referring to the specific drawing and painting tools and techniques that you have learned.

Top of Page / Back to Study Guide Index / Welcome Page