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
8 bits 1 byte

• General rule In n bits, we can have 2n patterns
• In 8 bits, we can have 28 patterns, or 256
• If we make one pattern 0, then the highest value
  we can represent is 28-1, or 255

6
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

7
y 9
Position (12,9)
x 12
8
red108
green86
blue142
y 9
Color(108,86,142) Position (12,9)
x 12
9
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

10
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 its
  probably pretty close
• Some graphics systems support 32 bits per pixel
• May be more pixels for color, or an additional 8
  bits to represent 256 levels of translucence

11
Size of images
12
Compression to lose or not to lose?

• Goal reduce redundancy
• Send the same information using fewer bits
• Originally developed for fax transmission
• Send high quality documents in short calls
• Two basic strategies
• Lossless can reconstruct exactly
• Lossy cant reconstruct, but looks the same

13
Bitmap vs. grayscale
http//www.nga.gov/exhibitions/2007/snapshot/snaps
hotinfo_fs.shtm
14
Human Vision

• Closely spaced dots appear solid
• But irregularities in diagonal lines can stand
  out
• High frame rates produce apparent motion
• Smooth motion requires about 24 frames/sec
• Visual acuity varies markedly across features
• Discontinuities easily seen, absolutes less
  crucial

15
Do these colors look the same as ...
16
... as these?
17
Not quite
18
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
19
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

20
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

21
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.

22
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.
23
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

24
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.

25

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

91 averaging
Original
Compressed
26
Photoshop Save for Web
settings
27

• 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.

28

• 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

29
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
30
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.

31
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.

32
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.

33
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