html5-img
1 / 14

Web Graphics

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

vielka-diaz
Télécharger la présentation

Web Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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: <imgsrc=“download.gif” alt=“download .pdf form” />

  10. 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” />

  11. Placing images using CSS Align attribute is deprecated. • Use CSS float property instead: <imgsrc=“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"><imgsrc=“logo.gif" alt=“SCF logo" /></div>

  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. • Don’ts: “fill out the fields marked in red”

More Related