File Formats

COM 366Web Design & Layout

• Native file format– Format native to software program– .psd > PhotoShop default

• Preserves layers

– Use “Save for Web” in PhotoShop to export as jpeg file

Graphic files

• Raster or bitmap graphics– Use pixels– PhotoShop

• Vector graphics– Use mathematical formulas– Combine lines, points, curves

• Fill with colors

– Flash

GIF format (.gif)

• Graphic interchange format• GIF images use indexed color

– Maximum of 256 colors

• Compressed– Reduce file size– “lossless” means image doesn’t lose any

quality by being compressed

• Biggest advantage is that one color can be transparent– Allow background on Web page to show thru

• Can be interlaced– Download in layers with each layer adding

more detail

Interlaced file displaying every 8th row; this is how the file first loads.

Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.

• Best used for text or illustrations or cartoons

JPEG file (.jpeg)

• or .jpg• Joint Photographic Experts Group• Best used for photos

• Uses “lossy” compression scheme– Some detail is lost – Reduces file size

• Progressive JPEG– Similar to interlacing for GIF file– Downloads in waves or layers

• Big advantage of jpeg is that it can contain millions of colors

• Can choose from various compression levels– Low = more degradation– Higher the quality level, greater file size

Quality = 10, 4.7 kB

Quality = 100, 83.2 kB

Quality = 50, 15.1 kB

• Best used for photos

File sizes

• File sizes measured in bytes• Bit smallest unit of measurement on

computer– On / off, 1 or 0

• 8 bits = 1 byte• One byte equals about one letter “A”

• A 1,000 bytes = kilobyte (kB)• A million bytes = megabyte (MB)• A trillion bytes = gigabyte (GB)

• Lowercase b would mean bits– Mb

Other formats

• PNG (.png)– Portable network graphics– Developed as replacement for GIF– Not patented– Lossless compression– Transparent background

– Can have more colors than gif (PNG-24)

• PNG-8 uses 8-bit color– 256 colors– Comparable to gif

• PNG-24– Supports millions of colors– Comparable to jpeg

• Larger file size than jpeg• But uses lossless compression

What a cat image looks like saved as a PNG-24 and placed against a patterned background on the HTML page:

.html

• Hypertext markup language• All web pages have to be in this format• Only format Web browsers (Safari, Firefox) can

read