Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web

Images in the Web pages Images – essential part of Web design Illustrate content Convey the message Company identity and branding Used as navigational elements Two types of graphic formats: Vector (resolution independent) – require plug-ins Raster (or bitmap) images resamble a series of pixels » GIF, PNG, TIFF, JPEG

Web Images Formats - JPEG Joint Photographic Experts Groups - JPG (.jpg) Contains up to 24-bits of color information -Supports 16.7 million colors) Typically used for photographs and complex graphics Lossy compression method The more an image is compressed the more its quality is reduced

Lossy Compression example (.JPG) Uncompressed image (left) – 43.6KB; high compression (right) KB

Web Image formats - GIF Graphics Interchange Format Supports 256 colors Best suited by line art, custom drawings, clip art, small images, such as bullets, buttons, icons. and etc. Supports transparency Supports interlacing Supports Animation Provides lossless compression – As the image is compressed, no information is lost

Lossless Compression – (.GIF) The checkered background represents transparency Lossless compression reduces the file size without degrading the visual quality.

Interlacing (GIF and PNG) The ability for an image to render gradually as it downloads. Interlaced images give the client something to look at rather than blank space GIF file format supports animation

Portable network graphics PNG Developed using open standards (PNG -8). Similar to GIF Supports 256 colors (PNG-8) Supports transparency Interlacing Lossless Compression PNG Transparency is not supported by earlier versions of browsers (IE6 and earlier)

Web Images and Accessibility Using the alt attribute with images Alt attribute specifies alternative text to appear while the graphic is loading Used in place of the graphic in non-graphical browsers Displays the alternative text if the image fails to load or images are disabled in the web browser Syntax:

Placing images Aligning images relative to text using deprecated align attribute:

Placing images using CSS Align attribute is deprecated. Use CSS float property instead: <img src=“pic.gif” alt=“ABC corp. logo” style=“float:left”/> CSS rule: img { float:right; } To center an image, enclose the image inside a element which can be aligned to the center:

Accessibility issues with images and colors W3C Web Content Accessibility Guidelines (WCAG) – provides a checklist for the accessibility guidelines Provide equivalent alternative to visual content (alt property) Do not rely on color alone

Accessibility issues with images and colors Section 508 of the Rehabilitation Act (U.S. Government Act) – electronic and IT accessibility standard Based on W3C WCAG All electronic and IT developed, procured, maintained or used by federal agencies should be comparably accessible to users with disabilities. Examples – All non-text elements must have a text-based equivalent – Information must be equally available in color and without color

Setting colors Provide a good contrast between text and background For no- and low-vision users who cannot see color, cues based on color alone are meaningless. Also, many people have various levels of color blindness; what may appear as red to some, appears as gray to others. Don’ts: “fill out the fields marked in red”