320 likes | 415 Views
File formats for images on the web. CSC 1040. What’s a picture?. We have seen that programs represent pictures as grids of picture elements or pixels. Stephanos with his eraser collection. Pixel encodings. RGB Color 3 colors: red, green, blue 8 bits/color 24 bits. Bitmap 1 bit.
E N D
File formats for images on the web CSC 1040 CSC 1040 - Computing with Images
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
Pixel encodings • RGB Color • 3 colors: red, green, blue • 8 bits/color • 24 bits • Bitmap • 1 bit • Grayscale • 8 bits CSC 1040 - Computing with Images
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
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
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
y = 9 Position: (12,9) x = 12 CSC 1040 - Computing with Images
red=108 green=86 blue=142 y = 9 Color:(108,86,142) Position: (12,9) x = 12 CSC 1040 - Computing with Images
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
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
Size of images CSC 1040 - Computing with Images
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
Bitmap vs. grayscale http://www.nga.gov/exhibitions/2007/snapshot/snapshotinfo_fs.shtm CSC 1040 - Computing with Images
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
Do these colors look the same as ... CSC 1040 - Computing with Images
... as these? CSC 1040 - Computing with Images
Not quite CSC 1040 - Computing with Images
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 000000000000000000000111111111111100000000000001111111111111111111111 RLE Row 1, 21:0,13:1;13:0;22:1 LZW, etc. use algorithms in addition to RLE 01010101010101010101 CSC 1040 - Computing with Images
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
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 20:1 CSC 1040 - Computing with Images
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. CSC 1040 - Computing with Images
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
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 75x2=150 • 01 White 20% 20x2= 40 20x2= 40 • 001 Red 5% 5x3= 15 5x2= 10 • 130 200 CSC 1040 - Computing with Images
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. CSC 1040 - Computing with Images
Tools details for this option Photoshop Save for Web settings CSC 1040 - Computing with Images
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
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
printing web 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 CSC 1040 - Computing with Images
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. CSC 1040 - Computing with Images
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. CSC 1040 - Computing with Images
PDF • Portable 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
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 CSC 1040 - Computing with Images