Upload
sara-mitchell
View
225
Download
1
Tags:
Embed Size (px)
Citation preview
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”