Web Graphics

1
Web Graphics

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

2
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

3
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

4
Lossy Compression example (.JPG)
Uncompressed image (left) 43.6KB high
compression (right) - 5.01 KB
5
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

6
Lossless Compression (.GIF)
The checkered background represents transparency
Lossless compression reduces the file size
without degrading the visual quality.
7
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

8
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)

9
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
• ltimg srcdownload.gif altdownload .pdf form
  /gt

10
Placing images

• Aligning images relative to text
• using deprecated align attribute
• ltimg src pic.gif alttwitter alignleft /gt
• ltimg src pic.gif alttwitter alignright
  /gt

11
Placing images using CSS

• Align attribute is deprecated.
• Use CSS float property instead
• ltimg srcpic.gif altABC corp. logo
• stylefloatleft/gt
• CSS rule
• img
• floatright
• To center an image, enclose the image inside a
  ltdivgt element which can be aligned to the center
• ltdiv styletext-aligncenter"gtltimg
  srclogo.gif" altSCF logo" /gtlt/divgt

12
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

13
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

14
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.
• Donts fill out the fields marked in red