CSC Computing with Images1 File formats for images on the web CSC 1040

CSC Computing with Images2 What’s a picture? We have seen that programs represent pictures as grids of picture elements or pixels Stephanos with his eraser collection

CSC Computing with Images3 Pixel encodings Bitmap 1 bit Grayscale 8 bits RGB Color 3 colors: red, green, blue 8 bits/color 24 bits

CSC Computing with Images4 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 Computing with Images5 8 bits = 1 byte General rule: In n bits, we can have 2 n patterns –In 8 bits, we can have 2 8 patterns, or 256 –If we make one pattern 0, then the highest value we can represent is , or 255

CSC Computing with Images6 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 Computing with Images7 Position: (12,9) x = 12 y = 9

CSC Computing with Images8 Color:(108,86,142) Position: (12,9) x = 12 y = 9 red=108green=86blue=142

CSC Computing with Images9 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 Computing with Images10 Is that enough? We’re representing color in 24 (3 * 8) bits. –That’s 16,777,216 (2 24 ) 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 Computing with Images11 Size of images 320 x 240 image 640 x 480 image 1024 x 768 monitor 24 bit color1,843,200 bytes 7,372,800 bytes 18,874,368 bytes 32 bit color2,457,600 bytes 9,830,400 bytes 25,165,824 bytes

CSC Computing with Images12 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 Computing with Images13 Bitmap vs. grayscale

CSC Computing with Images14 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 Computing with Images15 Do these colors look the same as...

CSC Computing with Images16... as these?

CSC Computing with Images17 Not quite

CSC Computing with Images Opportunity: Large regions of a single color are common Approach: Record # of consecutive pixels for each color An example of lossless encoding Uncompressed RLE Row 1, 21:0,13:1;13:0;22:1 LZW, etc. use algorithms in addition to RLE Run length encoding

CSC Computing with Images19 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 Computing with Images20 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 Computing with Images21 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 Computing with Images22 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 Computing with Images23 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: 1Blue75%75x1= 7575x2=150 01White20%20x2= 4020x2= Red 5% 5x3= 15 5x2=

CSC Computing with Images24 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 Computing with Images25 Photoshop Save for Web details for this option Tools settings

CSC Computing with Images26 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 Computing with Images27 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 Computing with Images28 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: printingweb

CSC Computing with Images29 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 Computing with Images30 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 Computing with Images31 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 Computing with Images32 Some of the slides in this presentation were adapted from: /PowerPoint presentations/Lec 7-File formats.ppt and