PAGE: http://www.gridinstitute.com/bc/mt35101/
COURSE: MT 35101 Discovering Computer Graphics
RESOURCES: Course Resources
PROF: Walsh, Aaron (bio) <walshag AT bc.edu>

WARNING: ALL STUDENTS MUST SUBSCRIBE TO THE ONLINE TEXTBOOK BEFORE I CAN APPROVE SUBSCRIPTIONS (DUE TO PASSWORD BREACHES THE ENTIRE CLASS MUST SUBSCRIBE BEFORE PASSWORDS ARE CIRCULATED). SUBSCRIBE TODAY IF YOU HAVEN'T ALREADY.

NOTE: THIS COURSE REQUIRES THAT YOU UPLOAD TO THE WEB EACH MIDTERM AND FINAL EXERCISE TO YOUR BLOG, BUT ONLY BITMAP IMAGES CAN BE UPLOADED TO YOUR BLOG! ALL THE OTHERS (SUCH AS VECTOR AND 3D FILES) NEED TO BE UPLOADED TO A TRADITIONAL WEB SITE, NOT YOUR BLOG. IF YOU ARE NOT ALREADY COMFORTABLE CREATING WEB PAGES OR UPLOADING FILES TO THE WEB YOU CAN USE BC'S FILES AREA INSTEAD.

Bitmap Graphics, Part I (plus Yahoo Groups and Digital Textbook overview)

Jargon/Terminology

Bitmap
Compression (lossy vs. lossless)
Pixel
Pixels-per-inch (ppi)
Dots-per-inch (dpi)
Color model, color space
RGB and additive color
CMYK and subtractive color
Resolution
Bit-depth
True-color
Greyscale
Transparency
Antialias
Palette
Jaggies
Dither
Interlacing and progressive download
Raster, rasterize, rasterization
Canvas
Gamma correction

Basic Bitmap Image Editing Features:

Crop
Resize
Select (rectangle, oval, lasso, magic wand)
Fill
Delete
Move
Copy
Smudge
Adjust (brightness, contrast, hue, saturation)
Change mode
Apply filters
Text
Stroke
Background/Foreground colors
Layers
Clone
Pencil
Lines and arrows

Bitmap formats for the Web

JPEG and GIF boast widespread browser support
PNG supported by newer browsers (4.x and higher) or plug-in

JPEG ("Joint Photographic Experts Group")

Open standard developed by International Standards Organization (ISO) group: http://www.jpeg.org/
Designed for photographs and continuous tone images, but NOT good for text (type) and line art
Supports true-color images (24-bits/pixel, allowing up to 16.7 million) and 16-bit grayscale images
Most popular "baseline" mode features lossy compression
JPEG's "progressive" and "hierarchical" modes are both lossy (they allow incremental rendering of image as bitstream is transmitted)
Less popular "lossless" mode supports lossless compression
NO transparency
NO built-in animation
NO interlacing (although progressive JPEG gives similar result)
.jpg file extension (familyphoto.jpg)
"image/jpeg" MIME type

Note: JPEG2000 forthcoming (.jp2 file extension) features "region of interest" coding/compression, scalable downloads, higher quality images at same file size

Exercise: Convert "Ball.tif" and "Brooch.tif" test images (see Course Resources) from Tagged Image File Format (TIFF) to JPEG at various compression levels. Compare resulting file sizes and quality of image when viewed in your Web browser. At what point does the image quality degrade too much to make it worth doing?

TIP: CLICK HERE TO LEARN HOW TO SAVE IMAGES THAT YOU SEE IN A WEB BROWSER, SUCH AS THOSE REQUIRED FOR THESE EXERCISES, TO YOUR DESKTOP COMPUTER.

Exercise: Create a simple text logo using the text tool (type) and save as JPEG in various compression levels. Does any level of JPEG compression handle type well? Try the same with the "mantoid.gif" test image (see Course Resources). How does JPEG fair here?

GIF ("Graphics Interchange Format")

Closed (proprietary) format developed by CompuServe; GIF compression patent owned by Unisys. Use of GIF subject to license fees: see BurnAllGifs.org
Indexed (palette) mode only
Supports limited palette of 256 colors (indexed color mode limited to 8-bits per/pixel)
Best at flat colors (cartoon-like imagery, logos, etc.) and text; NOT good for photos or other continuous tone imagery
Lossless compression
Interlacing supported
gif89a variation of the GIF format supports simple transparency and animation
.gif file extension
"image/gif" MIME type

Exercise: Convert "Ball.tif" and "Brooch.tif" test images (see Course Resources) to GIF format. Compare resulting file sizes and quality of image to JPEG.

Exercise: Convert various JPEG test images (see Course Resources) to GIF format. Compare resulting file sizes and quality of image to originals.

Exercise: Create a simple text logo using the text tool (type) and save as GIF. How does GIF fair here?

PNG ("Portable Network Graphics")

Open standard promoted by the World Wide Web Consortium (aka "W3" or "W3C"). Home: http://www.w3.org/Graphics/PNG/
Combines (and improves upon) the best qualities of GIF and JPEG
Specifically designed as an IP-free replacement for GIF; can also replace JPEG, TIFF and many other bitmap formats
Supports true-color (48-bit), grayscale (16-bit), and 8-bit indexed (palette) modes
Sophisticated transparency "alpha channel" (8-bits) allows for smooth transparency ramps
Gamma correction support enables accurate color representation (image brightness) across multiple devices
Lossless compression (better than GIF, same or worse than JPEG)
Interlacing supported
NO built-in animation (emerging "Multiple-image Network Graphics", or MNG, does)
.png file extension
"image/png" MIME type

PNG supports three main image types: truecolor, grayscale and palette-based (``8-bit''). JPEG only supports the first two; GIF only the third (although it can fake grayscale by using a gray palette). The impact on compression comes from the ability to mix up image types in PNG. Specifically, forcing an application to save an 8-bit palette image as a 24-bit truecolor (or ``RGB'') image is not going to result in a small file. This may be unavoidable if the original has been modified to include more than 256 colors (for example, if a continuous gradient background has been added), but many images intended for the Web have 256 or fewer colors...read more about PNG...

Note: GIF supports simple binary ("on" or "off") transparency that allows any given pixel can be either fully transparent or fully opaque (solid). PNG allows up to 254 levels of partial transparency in between for typical PNG images, and up to 65,534 transparency levels for the special PNG formats. Note that most Web browsers don't support advanced PNG transparency.

Exercise: Convert "Ball.tif" and "Brooch.tif" test images (see Course Resources) to PNG format. Compare resulting file sizes and quality of image to JPEG and GIF versions.

Exercise: Create a simple text logo using the text tool (type) and save as GIF. How does GIF fair here?

Exercise: Convert "mantoid.gif" test image (see Course Resources) to PNG. Is there any noticeable difference in image quality between GIF and PNG?

For Next Class:

Readings from our online textbook:

Book: Discovering Bitmap Graphics (click icon at left to open this book)
Sections to read:
1.0.0 INTRODUCING BITMAP GRAPHICS (read all chapters in this section)
2.0.0 BITMAP GRAPHICS FOR THE WEB (read all chapters EXCEPT 2.0.5)
Want Photoshop? Download a FREE TRIAL ("try out" version). See Appendix B for details.
Note that we use GIMPshop in class, not Photoshop, but you can try Photoshop if you'd like.

NOTE: THIS COURSE REQUIRES THAT YOU UPLOAD TO THE WEB EACH MIDTERM AND FINAL EXERCISE TO YOUR BLOG, BUT ONLY BITMAP IMAGES CAN BE UPLOADED TO YOUR BLOG! ALL THE OTHERS (SUCH AS VECTOR AND 3D FILES) NEED TO BE UPLOADED TO A TRADITIONAL WEB SITE, NOT YOUR BLOG. IF YOU ARE NOT ALREADY COMFORTABLE CREATING WEB PAGES OR UPLOADING FILES TO THE WEB YOU CAN ALSO USE BC'S FILES AREA.

TIP: CLICK HERE TO LEARN HOW TO REMOVE SOFTWARE THAT YOU'VE PREVIOUSLY INSTALLED ON YOUR WINDOWS COMPUTER. This is particularly important to do after you've discovered that you really don't like a new software program that you have install, or when you need to un-install trial or demos when they expire. You'll install a lot of different graphics programs in this course, so you should be very comfortable removing them as well!

RELATED CLASSES:

MT35801 Video Games and Virtual Reality