File formats for images on the web

1
File formats for images on the web

• CSC 1040

2
Whats a picture?

• We have seen that programs represent pictures as
  grids of picture elements or pixels

Stephanos with his eraser collection
3
Pixel encodings
RGB Color 3 colors red, green, blue 8
bits/color 24 bits
Bitmap 1 bit
Grayscale 8 bits
4
How much can we encode in 8 bits?

• Lets walk it through.
• If we have one bit, we can represent two
  patterns 0 and 1.
• If we have two bits, we can represent four
  patterns 00, 01, 10, and 11.
• If we have three bits, we can represent eight
  patterns 000, 001, 010, 011, 100, 101, 110, 111

5
In n bits, we can have 2n patterns

• In 8 bits, we can have 28 patterns, or 256
• Values can be encoded as numbers from 0..255

6
Bitmap vs. grayscale
http//www.nga.gov/exhibitions/2007/snapshot/snaps
hotinfo_fs.shtm
7
RGB

• In RGB, each color has three component colors
• Amount of redness
• Amount of greenness
• Amount of blueness
• In most computer-based models of RGB, a single
  byte (8 bits) is used for each
• So a complete RGB color is 24 bits, 8 bits of each

8
y 9
Position (12,9)
x 12
9
red108
green86
blue142
y 9
Color(108,86,142) Position (12,9)
x 12
10
Encoding RGB

• Each component color (red, green, and blue) is
  encoded as a single byte
• Colors go from (0,0,0) to (255,255,255)
• If all three components are the same, the color
  is in greyscale
• (50,50,50) at (2,2)
• (0,0,0) (at position (1,2) in example) is black
• (255,255,255) is white

11
Is that enough?

• Were representing color in 24 (3 8) bits.
• Thats 16,777,216 (224) possible colors
• Our eye can discern millions of colors - so
  probably pretty close
• Some graphics systems support 32 bits per pixel
• Maybe more pixels for color, or an additional 8
  bits to represent 256 levels of translucence
• Remember
• An image that uses 24 bit color is 24 times the
  size of a bitmap image of the same resolution

12
File Size

• File size is usually measured in bits, bytes,
  etc
• Byte 8 bits
• Kilobyte 1024 bytes ( 210 bytes)
• Megabyte 1024 KB ( 210 KB or 220 bytes )
• Gigabyte 1024 MB ( 210 MB or 230 bytes)
• Terabyte 1024 GB ( 210 GB or 240 bytes)

13
Size of images
14
Image Compression

• Goal reduce redundancy
• Encode the same information using fewer bits
• Originally developed for fax transmission
• Send high quality documents in short calls
• Image compression can lose information by
  approximating colors
• Lossy cant reconstruct original image, but
  looks the same
• Lossless image can reconstructed exactly

15
Human Vision

• Human eye tends to blend nearby colors
• Visual acuity varies markedly across features
• Discontinuities easily seen, absolutes less
  crucial
• High frame rates produce apparent motion
• Smooth motion requires about 24 frames/sec

16
Do these colors look the same as ...
17
... as these?
18
Not quite
19
Two main techniques

• Run-length encoding
• Group areas of similar pixels together and encode
  their color only once
• Reduces size as if image had fewer pixels
• Palette selection
• Encode only the colors actually used in the
  picture (may be much fewer than total number of
  possible colors)
• Reduces size by using fewer bits per pixel

20
Run length encoding

• Opportunity
• Large regions of a single color are common
• Approach
• Record of consecutive pixels for each color
• An example of lossless encoding

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30 31
Uncompressed 0000000000000000000001111111111111000
00000000001111111111111111111111
RLE Row 1, 210,131130221
LZW, etc. use algorithms in addition to
RLE 01010101010101010101
21
JPEG

• Joint Photographic Experts Group
• Opportunity
• Eye sees sharp lines better than subtle shading
• Approach
• Retain detail only for the most important parts
• Accomplished with Discrete Cosine Transform
• Allows user-selectable fidelity
• Results Typical compression 201

22
JPEG

• Joint Photographic Experts Group
• Preferred format for scanned photographic images
  for use over the internet or Web. Not meant for
  printing.
• Not good for images with a lot of solid color,
  vector drawings, type, or line art or images with
  Web-safe colors.
• JPEG compression is lossy! Save and archive the
  original before converting to JPEG.

23
In Photoshop, when you Save as a JPEG file, you
can choose the level of compression and,
therefore, the size and quality of the file.
24
Palette selection

• Opportunity
• No picture uses all 16 million colors
• Human eye does not see small differences
• Approach
• Select a palette of 256 colors
• Indicate which palette entry to use for each
  pixel
• Look up each color in the palette

25
Size of images
26
GIF

• Graphics Interchange Format
• Palette selection, then lossless compression
• Opportunity
• Common colors are sent more often
• Approach
• Use fewer bits to represent common colors.
  Example
• 1 Blue 75 75x1 75 75x2150
• 01 White 20 20x2 40 20x2 40
• 001 Red 5 5x3 15 5x2 10
• 130
  200

27
GIF

• Graphics Interchange Format
• Industry standard graphic format for on-screen
  viewing through the Internet and Web.
• Not meant to be used for printing.
• The best format for all images except scanned
  photographic images (use JPEG for these).
• GIF supports lossless LZW compression.

28

• Lossy compression types
• JPEG
• Genuine Fractals
• Mr. SID

91 averaging
Original
Compressed
29
Photoshop Save for Web
settings
30

• JPEG cautions
• Images with hard edges, high contrasts, angular
  areas, and text suffer from JPEG compression.
• Scanned natural photographs do not lose much,
  especially at High or Maximum quality.
• Only save finished images as JPEGs, every time
  you open and save again, even if you dont edit,
  you lose quality.
• Always keep the original non-JPEG version (the
  native .psd format).
• So why use JPEG?
• It is the best format for photographic images on
  the Web.
• Its compression ability is very great.

31

• GIF cautions
• Restricted number of colors not suitable for
  photographs
• Very good compression for line drawings (uniform
  color areas)
• Only save finished images as GIFs
• Always keep the original non-GIF version (the
  native .psd format).
• So why use GIF?
• It is a good format for images that have few
  colors and is widely available
• Can do lossless compression
• Its compression ability is great, especially for
  images with few colors
• Can also be used for animation

32
Adobe Photoshop
Photoshop can save files in many file
formats .psd Photoshop Document (native
format) .pdf Photoshop Portable Document
Format .eps Photoshop Encapsulated PostScript
.tiff Tagged Image File Format .gif
Compuserve Graphic Interchange Format .jpg
JPEG, Joint Photographic Experts Group .bmp
Windows Bitmap .png Portable Network
Graphic etc., etc. A summary of Graphics file
formats and uses can be found in
http//en.wikipedia.org/wiki/Graphics_file_format_
summary
33
EPS

• Encapsulated PostScript
• Preferred file format for importing into page
  layout programs such as QuarkXPress, PageMaker,
  InDesign, XPress, etc. for subsequent printing.
• An object-oriented format.
• Will only print to a postscript printer.
• Uses lossy JPEG compression.
• Only save your file as EPS if you need to import
  it into a page layout program.

34
TIFF

• Tagged Image File Format
• Widely used cross platform file format also
  designed for printing.
• A bitmap image format.
• TIFF supports lossless LZW compression which also
  makes it a good archive format for Photoshop
  documents.

35
PDF

• Portable Document Format
• Developed to transfer and read documents without
  having to print themthe paperless office.
• Cross platform format that can be read with the
  free download Adobe Acrobat Reader.
• Can represent both vector and bitmap graphics.
• Can also contain electronic document search and
  navigation features as well as hypertext links.
• Can be created from almost any application, but
  the user cannot edit or modify the file except
  with Adobe Acrobat (or other software).
• Document formatting, fonts, colors, etc. are
  maintained and appear identical across platforms.
• Excellent in the prepress process can be sent
  to the printer, but can also be placed in other
  documents.

36
Some of the slides in this presentation were
adapted from http//www.entomology.umn.edu/museu
m/links/coursefiles/ENT 5051/PowerPoint
presentations/Lec 7-File formats.ppt and http//
www.umiacs.umd.edu/jimmylin/LBSC690-2004-Fall/Wee
k10.ppt