Transcript Working with images

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) - 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)
Lossless compression reduces
the file size without
degrading the visual quality.
The checkered background
represents transparency
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 images
Aligning 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 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 <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”