Ryan Griffis +
rgriffis[at]uiuc[dot]edu
office: 131, Art & Design
office hours: T + R: 4-6:30pm
Courses: Spring 2007
ARTS341: Image Practice
syllabus
projects
schedule
class blog ![]()
deadlines
web resources
student blogs
Crystal Ahn, Daniel Bennett, Helen Cho, Ryan Cwiklinski, Daniel Davis, Melanie Faetz, Dane Gaydos, Chris Hampson, Connie Hsieh, Claire Keating, Jeffrey Kolar, Daniel Korte, Ashley Kukulski, Maia Lewis, Nathan Maisel, Grace Niu, Elihu O'Hara, Anna Peters, Isaac Eo, Giselle Vaca, Maria Verdos-Petrou
It's 11:30 Mon, 23 Nov 2009
ARTS440 :: Image Studio:: Image File Info
* Information about digital image files
For more information on Photoshop from Adobe
About Resolution
The pixel dimensions (image size or height and width) of a bitmap image is a measure of the number of pixels along an image's width and height. Resolution is the fineness of detail in a bitmap image and is measured in pixels per inch (ppi). The more pixels per inch, the greater the resolution. Generally, an image with a higher resolution produces a better printed image quality.
File Types
PICT: ICT format is used in Mac OS graphics and page-layout applications as an intermediary file format for transferring images between applications. PICT format supports RGB images with a single alpha channel and Indexed Color, Grayscale, and Bitmap mode images without alpha channels. PICT format is especially effective for compressing images with large areas of solid color. This compression can be substantial for alpha channels with their large areas of white and black.
When saving an RGB image in PICT format, you can choose either a 16-bit or 32-bit pixel resolution. For bitmap and grayscale images, you can choose from 2, 4, or 8 bits per pixel. In Mac OS with QuickTime installed, four JPEG compression options are available.
TIFF: Tagged-Image File Format (TIFF, TIF) is used to exchange files between applications and computer platforms. TIFF is a flexible bitmap image format supported by virtually all paint, image-editing, and page-layout applications. Also, virtually all desktop scanners can produce TIFF images. TIFF documents have a maximum file size of 4 GB. Photoshop CS and later supports large documents saved in TIFF format. However, most other applications and older versions of Photoshop do not support documents with file sizes greater than 2 GB.
TIFF format supports CMYK, RGB, Lab, Indexed Color, and Grayscale images with alpha channels and Bitmap mode images without alpha channels. Photoshop can save layers in a TIFF file; however, if you open the file in another application, only the flattened image is visible. Photoshop can also save annotations, transparency, and multiresolution pyramid data in TIFF format.
In Photoshop, TIFF image files have a bit depth of 8, 16, or 32 bits per channel. You can save high dynamic range images as 32-bits-per-channel TIFF files.
PSD: Photoshop format (PSD) is the default file format and the only format, besides the Large Document Format (PSB), that supports most Photoshop features. Because of the tight integration between Adobe products, other Adobe applications, such as Adobe Illustrator, Adobe InDesign, Adobe Premiere, Adobe After Effects, and Adobe GoLive, can directly import PSD files and preserve many Photoshop features. For more information, see Help for the specific Adobe applications.
When saving a PSD, you can set a preference to maximize file compatibility. This saves a composite version of a layered image in the file so it can be read by other applications, including previous versions of Photoshop. It also maintains the appearance of blended layers in the future.
16-bits-per-channel and high dynamic range 32-bits-per-channel images can be saved as PSD files.
About Compression
Graphics file formats differ in the way they represent image data (as pixels
or vectors), in compression techniques, and which Photoshop features they support.
With a few exceptions (for instance Large Document Format (PSB), Photoshop
Raw, and TIFF), most file formats cannot support documents larger than 2 GB.
Note: If a supported file format does not appear in the appropriate dialog
box or submenu, you may need to install the format’s plug-in module.
About file compression
Many file formats use compression to reduce the file size of bitmap images. Lossless techniques compress the file without removing image detail or color information; lossy techniques remove detail. The following are commonly used compression techniques:
RLE (Run Length Encoding)
Lossless compression; supported by some common Windows file formats.
LZW (Lemple-Zif-Welch)
Lossless compression; supported by TIFF, PDF, GIF, and PostScript language
file formats. Most useful for images with large areas of single color.
JPEG (Joint Photographic Experts Group)
Lossy compression; supported by JPEG, TIFF, PDF, and PostScript language file
formats. Recommended for continuous-tone images, such as photographs. JPEG
uses lossy compression. To specify image quality, choose an option from the
Quality menu, drag the Quality pop-up slider, or enter a value between 0
and 12 in the Quality text box. For the best printed results, choose maximum-quality
compression. JPEG files can be printed only on Level 2 (or later) PostScript
printers and may not separate into individual plates.
CCITT
A family of lossless compression techniques for black-and-white images, supported
by the PDF and PostScript language file formats. (CCITT is an abbreviation
for the French spelling of International Telegraph and Telekeyed Consultive
Committee.)
ZIP
Lossless compression; supported by PDF and TIFF file formats. Like LZW, ZIP
compression is most effective for images that contain large areas of single
color.
Digital Color
Bit depth specifies how much color information is available for each pixel in an image. The more bits of information per pixel, the more available colors and more accurate color representation. For example, an image with a bit depth of 1 has pixels with two possible values: black and white. An image with a bit depth of 8 has 28, or 256, possible values. Grayscale mode images with a bit depth of 8 have 256 possible gray values.
RGB images are made of three color channels. An 8-bit per pixel RGB image has 256 possible values for each channel which means it has over 16 million possible color values. RGB images with 8-bits per channel (bpc) are sometimes called 24-bit images (8 bits x 3 channels = 24 bits of data for each pixel).
In addition to 8-bpc images, Photoshop can also work with images that contain 16-bpc or 32-bpc. Images with 32-bpc are also known as high dynamic range (HDR) images.
*image basics for the web
1. file types usable for the web:
JPG (JPEG):a 24 bit compression format (millions of colors) best for photo-like images. lossy compression and requires decompression. can be saved at different qualities (and as progressive jpg) to manipulate file size and speed of download. cannot save browser safe colors.

jpg at 70% quality (30K)

JPG at 20% (10K)
GIF: (graphic interchange format) lossless compression, can be interlaced
and transparent, as well as animated. GIFs can only contain a max of 256
colors (8 bit) and works on an "indexed" color system - it saves
specific color information numerically, making them best for solid areas
of color and clean graphics. browser safe colors can be saved.
this file type uses a compression form called LZW (Lempel-Ziv & Welch),
and is owned (copyright) by Unysis, who charges developers for licensing
and royalties.

GIF 128 colors (39k)

GIF 16 colors (13K)

GIF animation (26K)
PNG (portable network graphics): lossless compression, 8, 24 or 32 bit depths possible. can also save layer info. just now getting wider browser support. can save alpha-channel transparency: 256 levels of partial transparency.

PNG 8 color (47K)
2. Bitmap Vs. vector graphics: images for the web (GIF, PNG, JPG) are bitmap or raster graphics. the image is created by manipulating individual pixels. a bitmap file contains information about each pixel that makes up the image - which means that increasing the scale of an image decreases its resolution and increases the amount of memory used. Vector graphics are created through mathematical formulas that determine line size, radius of arcs and color. Vectors can be reduced and enlarged without resolution degradation or proportion changes. flash uses vectors on the web.
3. optimizing for the web:
working for dial-up connections means making compromises between image quality
and file size.
steps for optimizing:
- determine the file type best suited to the type of image you're working with
- try different bit depths (GIF/PNG) and different quality settings (JPG) for best compromise
- to dither or not to dither (GIF) banding and posterization, file size changes
- baseline optimize JPGs
- anti-aliased/aliased: smooth vs. jaggy edges. anit-aliasing increases color palette and file size.
4. web is an RGB environment, low resolution (72 ppi) - monitors
5. always size image as closely as possible to the size it will be used for the web to provide best quality and less work for the browser.
6. always save original image in lossless format (TIFF, PNG, PSD) at original resolution, and make other files for different uses on the web: thumbnails, details, etc... This way, you'll always have the original to duplicate and rework when needed. NEVER upload high res images to the web unless they are to be downloaded or otherwise accessible to users (they will eat up server space). You can avoid the chance of accidentally uploading files by placing them in folders outside of your defined site home folder or cloaking them in Dreamweaver.
7. always give images an ALT tag in your XHTML documents