DIGITAL MEDIA An Introduction to Web Color and to Digital Media for the Web

Image Output An image on the screen is made up of a matrix or grid of colored squares called pixels . A printed image, however, is made up of dots called halftones . original pixels halftone halftone

An image on the screen is made up of a matrix or grid of colored squares called pixels .

A printed image, however, is made up of dots called halftones .

Digital Representations While an image is output as pixels or halftones, it can be represented/stored digitally in one of two different ways. Thus, there are two basic categories of digital images: bitmap (sometimes also called raster ) images vector images

While an image is output as pixels or halftones, it can be represented/stored digitally in one of two different ways.

Thus, there are two basic categories of digital images:

bitmap (sometimes also called raster ) images

vector images

Bitmap Images uses a grid of small squares called pixels each pixel has a specific color value are resolution-dependent — i.e., it contains fixed number of pixels. Thus, they can lose detail and appear jagged if magnified or printed at too low a resolution painting programs allow you to directly manipulate those pixels. Examples include: Adobe Photoshop, PaintShop Pro, Adobe Elements, Microsoft Expression Design The three main file formats used on the web (GIF, JPG,PNG) are bitmap. magnified 700%

uses a grid of small squares called pixels

each pixel has a specific color value

are resolution-dependent — i.e., it contains fixed number of pixels.

Thus, they can lose detail and appear jagged if magnified or printed at too low a resolution

painting programs allow you to directly manipulate those pixels.

Examples include: Adobe Photoshop, PaintShop Pro, Adobe Elements, Microsoft Expression Design

The three main file formats used on the web (GIF, JPG,PNG) are bitmap.

Painting Program (Photoshop)

Vector Images composed of lines and curves defined by mathematically objects called vectors. when you move or resize a vector graphic, its edges remain crisp and smooth. resolution-independent Adobe Flash and Adobe Illustrator are the most popular vector drawing programs. magnified 700%

composed of lines and curves defined by mathematically objects called vectors.

when you move or resize a vector graphic, its edges remain crisp and smooth.

resolution-independent

Adobe Flash and Adobe Illustrator are the most popular vector drawing programs.

Drawing Program (Illustrator)

Can you differentiate raster from vector images?

What is Color? The human eye perceives color according to wavelength of light that reaches it. Light that contains full spectrum of color appears as pure white light. The absence of light, the eye perceives as black.

The human eye perceives color according to wavelength of light that reaches it.

Light that contains full spectrum of color appears as pure white light.

The absence of light, the eye perceives as black.

Color Models Color can be numerically defined using one of several color models. The most common models are: RGB CMYK HSB (Hue, Saturation, Brightness)

Color can be numerically defined using one of several color models. The most common models are:

RGB

CMYK

HSB (Hue, Saturation, Brightness)

RGB Color Model A large percentage of the visible spectrum can be represented by mixing red , green , and blue (RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan, magenta, and yellow. Because the RGB colors combine to create white, they are also called additive colors. Adding all colors together creates white—that is, all light is reflected back to the eye. Additive colors are used for lighting, video, and monitors. Your monitor, for example, creates color by emitting light through red, green, and blue phosphors.

A large percentage of the visible spectrum can be represented by mixing red , green , and blue (RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan, magenta, and yellow.

Because the RGB colors combine to create white, they are also called additive colors. Adding all colors together creates white—that is, all light is reflected back to the eye.

Additive colors are used for lighting, video, and monitors. Your monitor, for example, creates color by emitting light through red, green, and blue phosphors.

CMYK Color Model The CMYK model is based on the light-absorbing quality of ink printed on paper. As white light strikes translucent inks, part of the spectrum is absorbed and part is reflected back to your eyes. In theory, pure cyan (C), magenta (M), and yellow (Y) pigments should combine to absorb all color and produce black. For this reason these colors are called subtractive colors. However, due to the imperfection of printing inks, black ink (K) is also needed. www.ne14design.co.uk/images/CMYKseparations.jpg

The CMYK model is based on the light-absorbing quality of ink printed on paper. As white light strikes translucent inks, part of the spectrum is absorbed and part is reflected back to your eyes.

In theory, pure cyan (C), magenta (M), and yellow (Y) pigments should combine to absorb all color and produce black. For this reason these colors are called subtractive colors.

However, due to the imperfection of printing inks, black ink (K) is also needed.

Gamut A gamut is the range of colors that a color system can display or print. The spectrum of colors seen by the human eye is wider than the gamut available in any color model. http://unix.temple.edu/~susanj/design/color/gamut.jpg

A gamut is the range of colors that a color system can display or print. The spectrum of colors seen by the human eye is wider than the gamut available in any color model.

Gamut The RGB gamut contains a subset of visible colors Therefore, some colors, such as pure cyan or pure yellow, can’t be displayed accurately on a monitor. The CMYK gamut is generally a subset of RGB Therefore, some colors that can be displayed on a monitor (RGB), cannot be printed (CMYK). Highly saturated colors in particular cannot be printed using CMYK www.astockphotos.com/images/rgb-cmyk.jpg

The RGB gamut contains a subset of visible colors

Therefore, some colors, such as pure cyan or pure yellow, can’t be displayed accurately on a monitor.

The CMYK gamut is generally a subset of RGB

Therefore, some colors that can be displayed on a monitor (RGB), cannot be printed (CMYK).

Highly saturated colors in particular cannot be printed using CMYK

HSB HSB model is based on human perception. Color is described in terms of three characteristics: Hue is what we usually refer to as color. Saturation describes intensity or strength of a color. The more gray in a color, the less the saturation. Brightness describes the relative lightness or darkness of a color.

HSB model is based on human perception.

Color is described in terms of three characteristics:

Hue is what we usually refer to as color.

Saturation describes intensity or strength of a color. The more gray in a color, the less the saturation.

Brightness describes the relative lightness or darkness of a color.

Saturation Hue Brightness

Color Depth Color depth refers to the maximum number of possible colors that an image can contain. It is determined by the number of bits used to represent the color or tone information for each pixel in the image.

Color depth refers to the maximum number of possible colors that an image can contain.

It is determined by the number of bits used to represent the color or tone information for each pixel in the image.

Color Depth A color image will have a pixel depth of either: 8 bits or less per pixel. No more than 256 colors will be displayable (28=256). Using 7 bits per pixel would allow only 128 colors. 6 bits per pixel would allow only 64 colors, 5 bits = 32 colors, 4 bits=16 colors, 3 bits = 8 colors, 2 bits = 4 colors, 1 bits = 2 colors. 24 bits per pixel. 16.8 displayable million (2 24 = 16,777,216) This is also called true color 8 bits of information are used for Red, Green, and Blue 32 bits per pixel 24 bits for color 8 bits for transparency

A color image will have a pixel depth of either:

8 bits or less per pixel.

No more than 256 colors will be displayable (28=256).

Using 7 bits per pixel would allow only 128 colors.

6 bits per pixel would allow only 64 colors, 5 bits = 32 colors, 4 bits=16 colors, 3 bits = 8 colors, 2 bits = 4 colors, 1 bits = 2 colors.

24 bits per pixel.

16.8 displayable million (2 24 = 16,777,216)

This is also called true color

8 bits of information are used for Red, Green, and Blue

32 bits per pixel

24 bits for color

8 bits for transparency

Pixel Depth (color) 0 1 1 0 1 1 1 0 01101110 11010001 10001110 8-bit color 24-bit color 8-bit red 8-bit green 8-bit blue

Monitor Color Depth Image color depth is not the same as the number of colors that can be displayed on a monitor. The number of colors displayable on a monitor is determined by: displayresolution 1024 x 768 is currently the most popular resolution amount of video memory (VRAM) 1 MB => 640 x 480 allows 24 bit 2 MB => 800 x 600 allows 24 bit 4 MB => 1600 x 1200 allows 24 bit

Image color depth is not the same as the number of colors that can be displayed on a monitor.

The number of colors displayable on a monitor is determined by:

displayresolution

1024 x 768 is currently the most popular resolution

amount of video memory (VRAM)

1 MB => 640 x 480 allows 24 bit

2 MB => 800 x 600 allows 24 bit

4 MB => 1600 x 1200 allows 24 bit

Monitor Color Depth Some monitors can not display 24 bit color regardless of memory. Old (pre 2002), low-end monitors PDAs and phones e.g., iPhone and Blackberry Storm are 16 bit displays (65000+ colors) Most business-class LCD monitors are in fact 18 bit displays (26200+ colors) expensive “true color” LCD panels are true 24 bit monitors

Some monitors can not display 24 bit color regardless of memory.

Old (pre 2002), low-end monitors

PDAs and phones

e.g., iPhone and Blackberry Storm are 16 bit displays (65000+ colors)

Most business-class LCD monitors

are in fact 18 bit displays (26200+ colors)

expensive “true color” LCD panels are true 24 bit monitors

Setting Monitor Color Depth Accessed by 1) right-clicking on desktop, and selecting properties; or 2) choosing Display from Control Panel

Dithering Monitors limited to less than true color create the illusion of more colors by dithering the available colors in a diffuse pattern of pixels. Image editors also use dithering to convert 24-bit color images to 8-bit color images.

Monitors limited to less than true color create the illusion of more colors by dithering the available colors in a diffuse pattern of pixels.

Image editors also use dithering to convert 24-bit color images to 8-bit color images.

Dithering True Color (24-bit) Dither (8 bit)

Web Safe Color Unfortunately, the standard 256 colors are different on Macs and PCs. There are 216 colors that are the same on both platforms. These 216 colors are called the web-safe or browser palette. These web-safe colors will not dither. If a sizable minority of your target market will be using 256 color systems you should use web-safe colors for background and text colors.

Unfortunately, the standard 256 colors are different on Macs and PCs.

There are 216 colors that are the same on both platforms.

These 216 colors are called the web-safe or browser palette.

These web-safe colors will not dither.

If a sizable minority of your target market will be using 256 color systems you should use web-safe colors for background and text colors.

Using web-safe colors viewed on 256 color system. Not using web-safe colors viewed on 256 color system.

Using browser-safe colors and viewed on 256-color system Same file as above viewed on 256-color system. Not using browser-safe colors and viewing on 16 million color system.

Web Safe Colors Web-safe colors have the following numbers:

Web-safe colors have the following numbers:

Platform Differences One problem with the RGB color model is that it measures color relative to the hardware being used at the time. The relation between RGB values and actual displayed color, called gamma, varies from monitor to monitor, and computer to computer. Images optimized for PCs tend to look paler on Macintoshes. Images optimized for Macs tend to look darker on PCs. Also, Mac monitor resolution is 72 pixels per inch, while PC monitor resolution is about 96 ppi. Thus images created on PC will appear larger on Mac

One problem with the RGB color model is that it measures color relative to the hardware being used at the time.

The relation between RGB values and actual displayed color, called gamma, varies from monitor to monitor, and computer to computer.

Images optimized for PCs tend to look paler on Macintoshes. Images optimized for Macs tend to look darker on PCs.

Also, Mac monitor resolution is 72 pixels per inch, while PC monitor resolution is about 96 ppi.

Thus images created on PC will appear larger on Mac

Platform Differences Mac PC Mac PC

Image Size Every image contains a fixed number of pixels, measured in pixel height and pixel width. The size of an image on-screen is determined by the pixel dimensions of the image, the monitor size and the computer’s display resolution.

Every image contains a fixed number of pixels, measured in pixel height and pixel width.

The size of an image on-screen is determined by the pixel dimensions of the image, the monitor size and the computer’s display resolution.

Display Resolution Different computer systems can have different display resolutions. Common values: 800x600 1024x768 1280x1024 1600x1200 1920x1200

Different computer systems can have different display resolutions.

Common values:

800x600

1024x768

1280x1024

1600x1200

1920x1200

Image Size + Display Resolution The physical size of pixels and their physical spacing will change with higher resolutions. Thus, any given web page (and its parts) will appear smaller on a high resolution system (and larger on a low resolution system).

The physical size of pixels and their physical spacing will change with higher resolutions.

Thus, any given web page (and its parts) will appear smaller on a high resolution system (and larger on a low resolution system).

Effect of Display Resolution 800 x 600 Monitor 1600 x 1200 Monitor How many extra pixels in the 1600 x 1200 monitor? - twice as many, or - four times as many?

Effect of Monitor Size 22” Monitor 15” Monitor (identical resolution) Notice, that because resolution is the same, the content fills the same percentage of space

Resizing Images Whenever you resize an image, Photoshop (or any program) must interpolate (also called resampling ). Resizing an image always reduces its quality. The image usually becomes pixelated. Making an image larger degrades image much more than making it smaller. Increasing the size just a small percentage (say 10% - 20%) will not be that much of a problem.

Whenever you resize an image, Photoshop (or any program) must interpolate (also called resampling ).

Resizing an image always reduces its quality.

The image usually becomes pixelated.

Making an image larger degrades image much more than making it smaller.

Increasing the size just a small percentage (say 10% - 20%) will not be that much of a problem.

Resizing an Image

Resizing Images If you need to resize an image: use browser, Word, etc to enlarge use Photoshop to enlarge enlarge using scanner enlarge photographic original, rescan, and lower resolution/size or take digital photo at high resolution (i.e., greater than 200pixels/per inch or larger size) , and lower resolution/size . In both of these cases, there will be a high number of pixels in the image so the loss of quality will not be as noticeable. Worst Best

If you need to resize an image:

use browser, Word, etc to enlarge

use Photoshop to enlarge

enlarge using scanner

enlarge photographic original, rescan, and lower resolution/size

or

take digital photo at high resolution (i.e., greater than 200pixels/per inch or larger size) , and lower resolution/size .

In both of these cases, there will be a high number of pixels in the image so the loss of quality will not be as noticeable.

Interpolation Methods Different programs have different interpolation methods for resizing. The browser (and most other programs) uses nearest neighbour interpolation Dedicated image editing programs have more sophisticated interpolation algorithms

Different programs have different interpolation methods for resizing.

The browser (and most other programs) uses nearest neighbour interpolation

Dedicated image editing programs have more sophisticated interpolation algorithms

Nearest Neighbour Interpolation Bicubic Interpolation

File Formats Browsers prior to IE 5.5 can only read two different file formats: GIF and JPG . IE 5.5 and 6 can partially display PNG files (but not transparency). Firefox, Safari, and Opera can display all three. IE 7 can almost fully display PNG files. Image editing programs such as Photoshop can read and write a much wider variety of graphic file formats. source: Feb 2007, Feb 2009, http://www.upsdell.com/BrowserNews Source 1 and 2 most reliable

Browsers prior to IE 5.5 can only read two different file formats: GIF and JPG .

IE 5.5 and 6 can partially display PNG files (but not transparency).

Firefox, Safari, and Opera can display all three.

IE 7 can almost fully display PNG files.

Image editing programs such as Photoshop can read and write a much wider variety of graphic file formats.

JPEG (JPG) JPEG images are full-color images (24 bit). Thus on a system that can only display 8-bit color, JPGs will be dithered. JPEG uses a "lossy" compression scheme. i.e., reduces file sizes by throwing away pixel information. Each time you save a JPG, quality gets worse, so keep a non-JPG version (TIF or PSD) as well. file sizes are dramatically reduced.

JPEG images are full-color images (24 bit).

Thus on a system that can only display 8-bit color, JPGs will be dithered.

JPEG uses a "lossy" compression scheme.

i.e., reduces file sizes by throwing away pixel information.

Each time you save a JPG, quality gets worse, so keep a non-JPG version (TIF or PSD) as well.

file sizes are dramatically reduced.

JPEG (JPG) You can choose the degree of compression you wish to apply to an image in JPEG format. But this changes the image quality. The more you squeeze a picture with JPEG compression, the more you degrade its image quality. Photoshop 5.5 Save for Web Photoshop Save A Copy

You can choose the degree of compression you wish to apply to an image in JPEG format.

But this changes the image quality.

The more you squeeze a picture with JPEG compression, the more you degrade its image quality.

JPEG (JPG) The lower the quality (i.e., the higher the compression), the more artifacts or noise appear in the image. Quality: 10 21 K Uncompressed 427 K Quality: 60 63 K Quality: 30 34 K

The lower the quality (i.e., the higher the compression), the more artifacts or noise appear in the image.

JPG Qualities Quality 1 = 32 K Quality 5 = 36 K Quality 10 = 81 K Uncompressed Original = 140 K

JPEG (JPG) Noise JPGs are ideal for photographs and other continuous-tone images such as paintings and grayscale images. JPEG poor for artwork or diagrams or any image with a large area of a single color. When compressed with JPEG, diagrammatic images show a "noise" pattern of compression garbage around the transition areas Original Saved as jpg jpg zoomed to show noise / artifacts

JPGs are ideal for photographs and other continuous-tone images such as paintings and grayscale images.

JPEG poor for artwork or diagrams or any image with a large area of a single color.

When compressed with JPEG, diagrammatic images show a "noise" pattern of compression garbage around the transition areas

Creating JPG for Web Aim for the smallest file possible (the lowest quality setting) that still looks okay. Images without large areas of similar color can get by with very low quality (10-20) Images with large areas of similar color will need higher quality (40-70). In example here, mountains and stream areas could get by with quality of 10, but the sky has ugly artifacts even at quality 60 (I had to use quality of 80, which resulted in file size of 41K)

GIF89a (.GIF) 8-bit or less color (limited to 256 colors colors). Colors in GIF image are stored in its palette. Different GIF images can have different palettes . Uses run-length compression. Changes along horizontal axis increases file size 6.7K 11.5K 56K

8-bit or less color (limited to 256 colors colors).

Colors in GIF image are stored in its palette.

Different GIF images can have different palettes .

Uses run-length compression.

Changes along horizontal axis increases file size

8-bit (256) color Which 256 colors??? Eight-bit image files dedicate eight bits to each color pixel in the image. In eight-bit images the 256 colors that make up the image are referenced to a palette It is possible for the palette to contain less than 256 colors. 00001100 = 12 Position 12 in palette color definition = 00000001 00000111 11111010 256 color palette = 8 bits per pixel file size = (10000 pixels x 8 ) / 8 = 1K) 64 color palette = 6 bits per pixel file size = (10000 pixels x 6 ) / 8 = 0.75K) 001001= 9 Position 9 in palette color definition = 00000001 00000111 11111010

Which 256 colors???

Eight-bit image files dedicate eight bits to each color pixel in the image.

In eight-bit images the 256 colors that make up the image are referenced to a palette

It is possible for the palette to contain less than 256 colors.

GIF89a (.GIF) Ideal for images with flat-bands of color, or with limited number of colors. Not very good for photographic images. Use JPG instead. GIF = 2K JPG = 4K JPG = 32K GIF = 53K

Ideal for images with flat-bands of color, or with limited number of colors.

Not very good for photographic images. Use JPG instead.

Interlaced GIFs allows web browsers to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is still downloading. gives the reader a quick preview of the full area of the picture. not faster-loading than non-interlaced graphics;they just look as if they download faster because the rough preview comes up faster.

allows web browsers to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is still downloading.

gives the reader a quick preview of the full area of the picture.

not faster-loading than non-interlaced graphics;they just look as if they download faster because the rough preview comes up faster.

Transparent GIFs The GIF89a file format allows you to pick one color from the color lookup table (i.e., palette) of the GIF to be transparent. Light blue background of web page (set via BODY tag) Home Home Plain GIF graphic Select white to be transparent color How it looks in browser

The GIF89a file format allows you to pick one color from the color lookup table (i.e., palette) of the GIF to be transparent.

Transparent GIFs Unfortunately, if you make a color transparent, then every pixel in the graphic that shares that same color will become invisible. Home Home Plain GIF graphic Select white to be transparent color How it looks in browser Select white to be transparent color

Unfortunately, if you make a color transparent, then every pixel in the graphic that shares that same color will become invisible.

Transparent GIFs Transparent GIF can also be disappointing when the graphic contains anti-aliased edges with pixels of multiple colors. Anti-aliasing visually "smooths" the shapes in graphics by inserting pixels of intermediate colors along boundary edges.

Transparent GIF can also be disappointing when the graphic contains anti-aliased edges with pixels of multiple colors.

Anti-aliasing visually "smooths" the shapes in graphics by inserting pixels of intermediate colors along boundary edges.

Transparent GIFs These anti-aliased edges often result in a "halo" of color when you set a transparent color in a GIF Image as seen in browser (black background color defined in BODY tag) without and with white defined as transparent. Anti-aliased edges

These anti-aliased edges often result in a "halo" of color when you set a transparent color in a GIF

Transparent GIFs Green background of web page (set via BODY tag) Original GIF graphic How it looks in browser with white set to transparent How it looks in browser with background green set to transparent Solution : make background layer in Photoshop same color as background color in BODY tag.

Animated GIFs GIFs can also be animated. Animations are created by having multiple frames. Each frame is like a separate GIF image. You can specify how long to pause between frames and how many times to loop through the animation. Requires a GIF animation program to construct the animated GIF out of individual GIF images. Yes, it is 1995 again with these classic animated GIFs

GIFs can also be animated.

Animations are created by having multiple frames.

Each frame is like a separate GIF image.

You can specify how long to pause between frames and how many times to loop through the animation.

Requires a GIF animation program to construct the animated GIF out of individual GIF images.

Creating GIF for Web Need to specify which: palette to use the amount of dithering

Need to specify which:

palette to use

the amount of dithering

GIF Palette Will use the best 256 (or less) colors Will use only web-safe colors (216 colors or less) Will use only system colors (256 colors defined for Windows/Mac) Use Web palette for clip-art, logos. Use Selective for images that combine photos and clip-art/text, and for photos with very large areas of similar color. Use Perceptual/Adaptive/Selective for logos or clip-art in which color fidelity is important.

Adaptive/Exact Palettes Original 24 bit Web Palette (8 bit) Adaptive Palette (8 bit) Best 256 colors 216 Web Colors 36 Exact Colors

Dithering and Palettes Since original didn't use web-safe colors, the resulting GIF has diffusion dithering. By changing to No Dither, the resulting GIF's non-web-safe colors have been switched to web safe. 3.3 K 2.3 K Generally, clip-art/logos should have as little dithering as possible.

Dithering and Palettes 7 K The resulting GIF looks as good as the original But this is what it looks like on 256-color system 2 K With the web palette, everyone sees the dither ! Photos need dithering, otherwise it’s a real ugly mess 1 K Visually, the Selective seems the best choice; but the file size is too large.

Bits/Pixel or Color Depth 7 K The Selective Palette gave us good results, but file size was too large. 5.7 K Reducing the number of colors to 128 (7 bits per pixel), reduces file size without noticeable loss of quality. 4.5 K Reducing the number of colors to 64 (6 bits per pixel) still give us good results.

Bits/Pixel or Color Depth 3.6 K Reducing the number of colors to 32 (5 bits per pixel) still give us good results. 2.6 K Some dithering in photo noticeable now at 16 colors (4 bits/pixel) but still okay. 2 K Dithering even more noticeable at 8 colors (3 bits/pixel). Going below this gives horrid results.

Bits/Pixel or Color Depth 256 Colors -- 12 K 128 Colors -- 9.7 K 64 Colors -- 7.6 K 32 Colors -- 6 K Looks okay but too large Still looks okay Some dithering noticeable Dithering more noticeable; just acceptable 16 Colors -- 4.3 K Dithering quite noticeable; perhaps unacceptable 8 Colors -- 3.3 K Dithering very noticeable; loss of colors (carrots and lemon have turned green). 4 Colors -- 2 K Now image looks like a duotone; client might notice be rather unhappy with this result.

GIF Transparency If working with Photoshop image with layers, then transparency option will be unavailable if background layer visible. If you turn off visibility of background layer, then transparency option will be available.

GIF Transparency If working with non-Photoshop image with no layers, then transparency option will be unavailable. To enable transparency, must follow the following steps: 1. Use Image | Mode | RGB menu. 2. Select the Magic Eraser Tool, available from Eraser fly-out menu 3. Click on background color with tool. 4. Now do File | Save for Web menu, and turn on Transparency.

Anti-Aliasing and Transparency Default settings . Notice how this gives halo around image when viewed in web page with a background color set in BODY tag. Saved GIF as seen in browser Zoomed in on browser view. Matte: None . This removes halo, but gives image jagged edges because anti-aliasing pixels have been removed. Saved GIF as seen in browser Zoomed in on browser view. Matte: Color . Here the Matte color has been set to the same color as the background color in BODY tag. Zoomed in on browser view.

PNG P ortable N etwork G raphics, or possibly P NG N ot G if Created to replace GIF due to its limitations and to copyright issues Features: bitmap format that uses a lossless compression Supports 1-bit, 2-bit, 4-bit, 8-bit, 24-bit, and 48-bit per pixel. Supports 1-bit, 8-bit, and 16-bits of transparency information per pixel. Supports gamma correction and color space management (not supported by IE 7)

P ortable N etwork G raphics, or possibly

P NG N ot G if

Created to replace GIF due to its limitations and to copyright issues

Features:

bitmap format that uses a lossless compression

Supports 1-bit, 2-bit, 4-bit, 8-bit, 24-bit, and 48-bit per pixel.

Supports 1-bit, 8-bit, and 16-bits of transparency information per pixel.

Supports gamma correction and color space management (not supported by IE 7)

PNG For normal photographs, JPG is a better choice because the file size will be smaller. If image has large areas of similar color, then PNG will be better. PNG usually a better choice than GIF for artwork or if non-single color transparency is required. However, not supported on older browsers

For normal photographs, JPG is a better choice because the file size will be smaller.

If image has large areas of similar color, then PNG will be better.

PNG usually a better choice than GIF for artwork or if non-single color transparency is required.

However, not supported on older browsers

PNG Transparency Because you can specify 8-bits for transparency, you do not have to worry about anti-aliasing halos (like you did with GIFs). Same PNG file displayed on two different backgrounds. Source: http://en.wikipedia.org/wiki/PNG

Because you can specify 8-bits for transparency, you do not have to worry about anti-aliasing halos (like you did with GIFs).

TIFF (.tif) Multi-platform format Lossless compression Supports resolutions, layers, etc Not displayable in browser Useful as an inter-operable image format that won’t lose information each time it is saved

Multi-platform format

Lossless compression

Supports resolutions, layers, etc

Not displayable in browser

Useful as an inter-operable image format that won’t lose information each time it is saved

Photoshop (.PSD) Photoshop's native file format. If you wish to preserve your layers, you must use Photoshop format. Binary compatible between Mac and PC. In general, Photoshop is the only program that can read these files.

Photoshop's native file format.

If you wish to preserve your layers, you must use Photoshop format.

Binary compatible between Mac and PC.

In general, Photoshop is the only program that can read these files.

Adobe Flash Since its introduction in 1996, Flash has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to: create animations and advertisements and games create various web page components such as menus and galleries integrate video into web pages

Since its introduction in 1996, Flash has become a popular method for adding animation and interactivity to web pages.

Flash is commonly used to:

create animations and advertisements and games

create various web page components such as menus and galleries

integrate video into web pages

Flash Examples

Adobe Flash Can manipulate vector and raster graphics. Supports streaming of audio and video. Contains a scripting language called ActionScript.

Can manipulate vector and raster graphics.

Supports streaming of audio and video.

Contains a scripting language called ActionScript.

Adobe Flash Source files (.fla) created and edited by Flash Browser can display Shockwave Flash Files (.swf) created by Flash and some other programs. Other media players can display Flash video files (.flv) Most browsers have Flash plugin pre-installed

Source files (.fla) created and edited by Flash

Browser can display Shockwave Flash Files (.swf) created by Flash and some other programs.

Other media players can display Flash video files (.flv)

Most browsers have Flash plugin pre-installed

Video and the Web Approaches: Streaming Video can be played simultaneously as it is received Requires special streaming software on web server Non-streaming Entire video must download first Fake Streaming Player can play video once a certain amount of the file has been downloaded (buffering) Most players employ fake streaming

Approaches:

Streaming

Video can be played simultaneously as it is received

Requires special streaming software on web server

Non-streaming

Entire video must download first

Fake Streaming

Player can play video once a certain amount of the file has been downloaded (buffering)

Most players employ fake streaming

Video Formats Real (.rm) Multi-platform but low installed base for player Small files QuickTime (.mov) Only minority (albeit large) of Windows users have the player Small files Windows Media (.wmv) Only Windows users (and not even all windows users have it ~85%) have it Small files MPEG version 1 (.mpg) Multi-platform (can be played by QuickTime and Windows Media players) Large files Flash Video (.flv) Multi-platform and highest installed base (98%) Small files Used by YouTube and Google video Currently the best choice for web video

Real (.rm)

Multi-platform but low installed base for player

Small files

QuickTime (.mov)

Only minority (albeit large) of Windows users have the player

Small files

Windows Media (.wmv)

Only Windows users (and not even all windows users have it ~85%) have it

Small files

MPEG version 1 (.mpg)

Multi-platform (can be played by QuickTime and Windows Media players)

Large files

Flash Video (.flv)

Multi-platform and highest installed base (98%)

Small files

Used by YouTube and Google video

Currently the best choice for web video

Codecs Video is compressed with something called a codec . A video codec is a device or software that enables video compression and/or decompression.

Video is compressed with something called a codec .

A video codec is a device or software that enables video compression and/or decompression.

Codecs Codecs differ in terms of: video quality, the quantity of the data needed to represent it, also known as the bit rate, the complexity of the encoding and decoding algorithms, robustness to data losses and errors, ease of editing, whether random access is allowed

Codecs differ in terms of:

video quality,

the quantity of the data needed to represent it, also known as the bit rate,

the complexity of the encoding and decoding algorithms,

robustness to data losses and errors,

ease of editing,

whether random access is allowed

Common codecs MPEG-1 used in Video CDs MPEG-2 Used on DVDs H.263 Used in videoconferencing MPEG-4 Part 2 MPEG standard that can be used for internet, broadcast, and on storage media. Divx, FFMPEG, and Xvid are two implementations of this codex MPEG-4 Part 10 (also known as H.264) The current state of the art adopted by Blue-Ray, Mac OS, XBOX 360, iPhones, etc WMV (Windows Media Video) RealVideo

MPEG-1

used in Video CDs

MPEG-2

Used on DVDs

H.263

Used in videoconferencing

MPEG-4 Part 2

MPEG standard that can be used for internet, broadcast, and on storage media.

Divx, FFMPEG, and Xvid are two implementations of this codex

MPEG-4 Part 10 (also known as H.264)

The current state of the art adopted by Blue-Ray, Mac OS, XBOX 360, iPhones, etc

WMV (Windows Media Video)

RealVideo

Container Video Formats Some video formats are container formats. can contain video compressed with a variety of different codecs. E.g., .mp4 (MPEG version 4) .mov (QuickTime) .asf (Advanced Streaming Format) .avi (Audio Video Interleaved)

Some video formats are container formats.

can contain video compressed with a variety of different codecs.

E.g.,

.mp4 (MPEG version 4) .mov (QuickTime) .asf (Advanced Streaming Format) .avi (Audio Video Interleaved)