web graphics image file formats image optimization accessibility issues using images and colors on...

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”