Web Graphics

Image File FormatsImage optimizationAccessibility 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

Lossy Compression example (.JPG)

Uncompressed image (left) – 43.6KB; high compression (right) - 5.01 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:<img src=“download.gif” alt=“download .pdf form” />

Placing imagesAligning images relative to text

using deprecated align attribute:<img src =“pic.gif” alt=“twitter” align=“left” />

<img src =“pic.gif” alt=“twitter” align=“right” />

Placing images using CSSAlign 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 <div> element which can be aligned to the center:

<div style=“text-align:center"><img src=“logo.gif" alt=“SCF logo" />

</div>

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”