File formats for images on the web - PowerPoint PPT Presentation

1 / 33
About This Presentation
Title:

File formats for images on the web

Description:

Preferred format for scanned photographic images for use over the internet or Web. ... and read documents without having to print them the 'paperless office. ... – PowerPoint PPT presentation

Number of Views:28
Avg rating:3.0/5.0
Slides: 34
Provided by: RalphHol8
Category:
Tags: file | formats | images | web

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com