1.
EASINGINTO WEBDEVELOPMENT8.8 DIGITAL MEDIA

2.
1 INTRODUCTION 2 HTML 3 TABLES 4 FORMS 5 HTTP 6 CSS 7 CSS FRAMEWORKS 8 DIGITAL MEDIA2 9 USABILITY

3.
Image Output3  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 o iginal pixels pi els halftone halftone

4.
Digital Representations4  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 , g g images:  bitmap (sometimes also called raster) images  vector images

5.
Bitmap Images5  uses a grid of small squares called pixels  each pixel has a specific color value  are resolution dependent — i e it contains resolution-dependent i.e., 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 magnified 700% 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.

6.
Painting Program (Photoshop)6

7.
Vector Images7  composed of lines and curves f defined by mathematically objects called vectors. bj t ll d t  when you move or resize a magnified 700% vector graphic, i edges hi its d remain crisp and smooth.  resolution-independent l d d  Adobe Flash and Adobe Illustrator are the most popular vector drawing programs.

8.
Drawing Program (Illustrator)8

9.
Can you differentiate raster from vector images? y g9

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

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

12.
RGB Color Model12  Allarge percentage of the visible spectrum can b represented by mixing red, green, and bl f h i ibl be db i i d d 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 white, colors. 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.

13.
CMYK Color Model13  The Th CMYK model is b d on the li h d l i based h light- absorbing quality of ink printed on paper. As white light strikes translucent inks, 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 d ll i h ld bi to absorb all color and produce black. For this reason these colors are called subtractive colors colors.  However, due to the imperfection of printing inks, black ink (K) is also needed. www.ne14design.co.uk/images/CMYKseparations.jpg

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

15.
Gamut15  The Th RGB gamut contains a t t i 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, Therefore some colors that can be displayed on a monitor (RGB), cannot be printed (CMYK). (CMYK)  Highly saturated colors in particular cannot be printed using CMYK www.astockphotos.com/images/rgb‐cmyk.jpg

16.
HSB16  HSB model is based on human perception.  Color is described in terms of three characteristics:  Hue is what we usually refer to as color. S t Saturation ti describes intensity or strength of a color. Th d ib i t it t th f l The more gray in a color, the less the saturation.  Brightness describes the relative lightness or darkness of a color.

17.
Hue ation Satura S Brightness17

18.
Color Depth18  Color depth refers to the maximum number of possible colors that an image can contain.  Itis determined by the number of bits used to represent the color or tone information for each pixel in the image.

19.
Color Depth19  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 bi U i 7 bits per pixel would allow only 128 colors. i l ld ll l l  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 (224 = 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  48 bits per pixel  16 bit per red, green, and blue (not supported in browsers) bits d d bl ( t t di b w )

20.
Pixel Depth (color)20 8-bit red 8-bit green 8-bit blue 01101110 11010001 10001110 24-bit color 01101110 8-bit color

21.
Monitor Color Depth21  Image color depth is not the same as the number of f colors that can be displayed on a monitor.  The number of colors displayable on a monitor is determined by:  Display resolution  1024 x 768 is currently the most popular minimum resolution  amount of video memory (VRAM) f d 1 MB => 640 x 480 allows 24 bit  2 MB => 800 x 600 allows 24 bit  4 MB => 1600 x 1200 allows 24 bit Ancient History – don’t worry about this

22.
Screen Resolution 22 iPad = 1024 x 768 iPhone = 960 x 640 i hhttp://www.w3schools.com/browsers/browsers_display.asp

23.
Monitor Color Depth23  Some monitors can not display 24 bit color regardless of memory.  Old(pre 2002), low-end monitors  PDAs and phones p  e.g., Android 2.1 and Blackberry Storm are 16 bit displays (65000+ colors)  Most business-class LCD monitors (and iphone 3GS and iPad 1)  arein fact 18 bit displays (262000+ colors)  expensive “true color” LCD panels are true 24 bit monitors

24.
Setting Monitor Color Depth24 Accessed by 1) right-clicking on desktop, and selecting properties; or 2) choosing Display from Control Panel Ancient History – don’t worry about this

25.
Dithering25  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.

26.
Dithering26 True Color (24-bit) True Color Dither (24-bit) (8 bit) Dither (16 bit)

27.
Web Safe Color27  Unfortunately, the standard 256 colors are f 2 6 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 y y your target market will be g using 256 color systems you should use web-safe colors for background and text colors. Ancient History – don’t worry about this

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

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

30.
Web Safe Colors30  Web-safe colors have the following numbers: Decimal Hexadecimal 0 00 51 33 102 66 153 99 Ancient History – 204 CC don’t worry about this 255 FF

31.
Platform Differences31  One O problem with the RGB color model is that it bl h h G l d l h measures color relative to the hardware being used at the time time.  The relation between RGB values and actual displayed color, called g , 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. df M d l kd k C  Also, Mac monitor resolution is 72 pixels per inch, while PC monitor resolution is about 96 ppi. it l ti i b t i  Thus images created on PC will appear larger on Mac

32.
Platform Differences32 Mac PC Mac PC

33.
Image Size33  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 p pixel dimensions of the image, the monitor size and g , the computer’s display resolution.

34.
Display Resolution34  Different computer systems can have different display resolutions.  Common values:  800x600  1024x768  1280x1024  1600x1200  1920 1200 1920x1200

35.
Image Size + Display Resolution35  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).

36.
Effect of Display Resolution36 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?

37.
Effect of Monitor Size37 15” Monitor (800 x 600 resolution) 22” Monitor (800 x 600 resolution) Notice, that because resolution is the same, the content fills the same percentage of space iPhone (800 x 600 resolution)

38.
Resizing Images38  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 smaller.  Increasingthe size just a small percentage (say 10% - 20%) will not b th t much of a problem. ill t be that h f bl

39.
Resizing R i i an I Image39

40.
Resizing an Image40 Notice that the loss f N ti th t th l of quality is not nearly as lit i t l noticeable when reducing the size of an image.

41.
Resizing an Artwork Image – Wrong Way41 Original (400 x 100) Enlarged (800 x 200) Reduced (200 x 50) Reducing or enlarging art work or text is particularly problematic.

42.
Resizing an Artwork Image – Right Way42 Original (400 x 100) Enlarged (800 x 200) Reduced (200 x 50) By changing it in the Photoshop original (say, by increasing/decreasing the font size, etc), the quality is ideal.

43.
Resizing Text43 Original Pixels (jpg/gif/png) resized (in Browser, PowerPoint, etc) Objects Resized (in Photoshop, Illustrator, etc)

44.
Resizing Images44  If you need to resize an image: Worst  use browser, Word, etc to enlarge  use Photoshop to enlarge  enlarge using scanner l  enlarge photographic original, rescan, and lower resolution/size l l / or Best  take digital photo at high resolution (i.e., greater than 200pixels/per inch or larger size), h 200 l/ h l ) and lower resolution/size. or  Recreate with bigger size (for logos, ads, etc) R hb (f l d ) In both of these cases, there will be a high number of pixels i the i b f i l in h image so the l of h loss f quality will not be as noticeable.

45.
Interpolation Methods45  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

46.
46 Bicubic Interpolation Nearest Neighbour Interpolation

47.
File Formats47  Browsers prior t IE 5 5 can only read two different file formats: GIF B i to 5.5 l d t diff t fil f t 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 I diti h Ph t h d d w it much wider variety of graphic file formats. http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm

48.
JPEG (JPG)48  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. y p  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.

49.
JPEG (JPG)49  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, y q p p , the more you degrade its image quality. Photoshop 5.5 Save for Web Photoshop Ph h Save A Copy

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

51.
JPG Qualities51 Quality 1 = 32 K Quality 5 = 36 K Quality 10 = 81 K Uncompressed Original = 140 K

52.
JPEG (JPG) Noise52  JPGs are ideal for G d lf photographs and other continuous-tone images such as paintings and grayscale i ti d l images.  JPEG poor for artwork or Original Saved as jpg diagrams or any image with a di i ih large area of a single color.  When compressed with JPEG, diagrammatic i di ti images show a h "noise" pattern of compression garbage around the transition areas jpg zoomed to show noise / artifacts

53.
Creating JPG for Web53 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). (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 h dt lit f 80 hi h resulted in file size of 41K)

54.
GIF89a (.GIF)54  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. U g p  Changes along horizontal axis increases file size 6.7K 11.5K 56K

55.
55 8-bit 8 bit (256) color 00001100 = 12  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 h i f d l tt  It is possible for the palette to contain less than 256 colors. Position 12 in palette color definition = 00000001 00000111 11111010 Position 9 in palette p color definition = 00000001 00000111 11111010 64 color palette = 6 bits per pixel file size = (10000 pixels x 6) / 8 = 0.75K)001001= 9 256 color palette = 8 bits per pixel file size = (10000 pixels x 8) / 8 = 1K)

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

57.
Interlaced GIFs57  allows web browsers to begin tog 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. p  not faster-loading than non- interlaced graphics; they just look as if they download faster because the rough preview comes up faster. Ancient History – don’t worry about this

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

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

60.
Transparent GIFs60  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.

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

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

63.
Animated GIFs63  GIFs can also be animated.  Animations are created by having multiple y g p 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 images. Ancient History – Yes, it is 1995 again with these classic animated GIFs don’t worry about this

64.
Creating GIF for Web64  Need to specify which:  palette to use  the amount of dithering

65.
GIF Palette65 Will use the best 256 (or less) colors Will use only web-safe colors (216 colors or less) y ( ) 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- g p p 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.

66.
Adaptive/Exact Palettes /66 Original 24 bit Web Palette (8 bit) Adaptive Palette (8 bit) 216 Web Colors W bC l Best 256 colors 36 Exact Colors

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

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

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

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

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

72.
GIF Transparency72 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.

73.
GIF Transparency73 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. 3 Click on background color with tool tool. 4. Now do File | Save for Web menu, and turn on Transparency.

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

75.
PNG75  Portable N P bl Network G hi or possibly k Graphics, ibl  PNG Not Gif  Created to replace GIF due to its limitations and to copyright issues  Features: ea u es:  bitmap format that uses a lossless compression  Supports 1-bit, 2-bit, 4-bit, 8-bit, 24-bit, and 48-bit per pixel. i l  Supports 1-bit, 8-bit, and 16-bits of transparency information per pixel. p p  Supports gamma correction and color space management (not supported by IE 7)

76.
PNG76  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 non-single required.  However, not supported on older browsers

77.
PNG Transparency77  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 Source: http://en wikipedia org/wiki/PNG

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

79.
Photoshop (.PSD)79  Photoshops native file format.  If you wish to p y preserve your layers, y must use y y , you Photoshop format.  Binary compatible between Mac and PC PC.  In general, Photoshop is the only program that can read th d these files. fil

80.
Raw files80  Contain the output from the original red, green, and blue sensors in a camera.  Some cameras can save these files (instead of/addition to the usual jpg version).  Very large files  Sensible choice if not sure you have optimal exposure and white balance.  Provide the highest quality.  Different formats  Proprietary (Different one for each manufacturer)  Open Source (.dng)

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

82.
Flash Examples82

83.
Adobe Flash83  Can manipulate vector and raster graphics.  Supports streaming of audio and video. pp g  Contains a scripting language called ActionScript.

84.
Adobe Flash84  Source files (.fla) created and edited by Flash  Browser can display Shockwave Flash Files (.swf) p y ( ) created by Flash and some other programs.  Other media players can display Flash video files (.flv)  Most browsers have Flash plugin pre-installed M tb h Fl h l i i t ll d  Conflicts with Apple and W3C may mean decline in use of Flash over time.

85.
Video and the Web85  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 y can p y video once a certain amount of the file has play been downloaded (buffering)  Most players employ fake streaming

86.
Video Formats86  Real ( rm) (.rm)  Multi-platform but low installed base for player  Small files  Qu c QuickTime (.mov) e (. ov)  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 ( M li l f (can b played by QuickTime and Wi d be l d b Q i kTi d Windows Media players) M di l )  Large files  Flash Video (.flv)  Multi platform Multi-platform and highest installed base (98%)  Small files  Used by YouTube and Google video  Currently the best choice for web video

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

88.
Codecs88  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

89.
Common codecs89  MPEG-1 MPEG 1  used in Video CDs  MPEG-2  Used on DVDs  H.263  Used in videoconferencing g  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

90.
Container Video Formats90  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 (Ad f (Advanced Streaming Format) dS ) .avi (Audio Video Interleaved)