File formats for images on the web
-
Upload
fiona-mcleod -
Category
Documents
-
view
41 -
download
2
description
Transcript of File formats for images on the web
CSC 1040 - Computing with Images 1
File formats for images on the web
CSC 1040
CSC 1040 - Computing with Images 2
What’s a picture?
• We have seen that programs represent pictures as grids of picture elements or pixels
Stephanos with his eraser collection
CSC 1040 - Computing with Images 3
Pixel encodings
Bitmap
1 bit
Grayscale
8 bits
RGB Color 3 colors: red, green, blue
8 bits/color
24 bits
CSC 1040 - Computing with Images 4
How much can we encode in 8 bits?
• Let’s 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
CSC 1040 - Computing with Images 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
CSC 1040 - Computing with Images 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
CSC 1040 - Computing with Images 7
Position: (12,9)
x = 12
y = 9
CSC 1040 - Computing with Images 8
Color:(108,86,142) Position: (12,9)
x = 12
y = 9 red=108 green=86 blue=142
CSC 1040 - Computing with Images 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
CSC 1040 - Computing with Images 10
Is that enough?
• We’re representing color in 24 (3 * 8) bits.– That’s 16,777,216 (224) possible colors– Our eye can discern millions of colors, so it’s 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
CSC 1040 - Computing with Images 11
Size of images
320 x 240image
640 x 480image
1024 x 768monitor
24 bit color 1,843,200
bytes
7,372,800 bytes
18,874,368
bytes
32 bit color 2,457,600
bytes
9,830,400 bytes
25,165,824 bytes
CSC 1040 - Computing with 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: can’t reconstruct, but looks the same
CSC 1040 - Computing with Images 13
Bitmap vs. grayscale
http://www.nga.gov/exhibitions/2007/snapshot/snapshotinfo_fs.shtm
CSC 1040 - Computing with Images 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
CSC 1040 - Computing with Images 15
Do these colors look the same as ...
CSC 1040 - Computing with Images 16
... as these?
CSC 1040 - Computing with Images 17
Not quite
CSC 1040 - Computing with Images 18
12345678910111213141516171819202122232425262728293031
Opportunity:• Large regions of a single color are common
Approach:•Record # of consecutive pixels for each color
An example of lossless encoding
Uncompressed000000000000000000000111111111111100000000000001111111111111111111111
RLERow 1, 21:0,13:1;13:0;22:1
LZW, etc. use algorithms in addition to RLE
01010101010101010101
Run length encoding
CSC 1040 - Computing with Images 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
CSC 1040 - Computing with Images 20
JPEGJoint 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 20:1
CSC 1040 - Computing with Images 21
JPEGJoint 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.
CSC 1040 - Computing with Images 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.
CSC 1040 - Computing with Images 23
GIFGraphics Interchange Format
Palette selection, then lossless compressionOpportunity:
• Common colors are sent more oftenApproach:
• Use fewer bits to represent common colors. Example:1 Blue 75% 75x1= 75 75x2=15001 White 20% 20x2= 40 20x2= 40001 Red 5% 5x3= 15 5x2= 10 130 200
CSC 1040 - Computing with Images 24
GIFGraphics 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.
CSC 1040 - Computing with Images 25
Photoshop Save for Web
details for this option
Toolssettings
CSC 1040 - Computing with Images 26
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 don’t 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.
CSC 1040 - Computing with Images 27
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
CSC 1040 - Computing with Images 28
http://en.wikipedia.org/wiki/Graphics_file_format_summary
Adobe PhotoshopPhotoshop 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 Graphicetc., etc.
A summary of Graphics file formats and uses can be found in:
printing
web
CSC 1040 - Computing with Images 29
EPSEncapsulated 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.
CSC 1040 - Computing with Images 30
TIFFTagged 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.
CSC 1040 - Computing with Images 31
PDFPortable Document Format
• Developed to transfer and read documents without having to print them—the “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.
CSC 1040 - Computing with Images 32
Some of the slides in this presentation were adapted from:
http://www.entomology.umn.edu/museum/links/coursefiles/ENT 5051/PowerPoint presentations/Lec 7-File formats.ppt
and
http://www.umiacs.umd.edu/~jimmylin/LBSC690-2004-Fall/Week10.ppt