• View
• Edit
• History
• Print

Web Graphics

A Web Design Lecture by Steven Choy

Overview: Functions of web gaphics - Choosing image for your site - Ways to get images for your site - Using thumbnails - Using illustrations and icons - Web graphics formats - Optimizing your website images - Writing useful ALT text - Background images

Functions of web graphics

• Contextual images (as part of content):

     <img src="example.jpg" alt="A brief description of the image"
      width="300" height="300" />

• Functional images:

• Decorative images: images are used as part of layout and interface design. It is coded in CSS

     #content h3 { background: url(http://www.example.com/sample.gif) no-repeat;}

Choosing images for your site

• What is the point of having images on your site?

Ways to get images for your site

• Scanning photos from printed materials
• Digital photos from digital camera
• Hire a photographer
• Use stock photography
• Free photos from the Web

Using thumbnails

• The larger a photo is, the longer it takes to load in your web browser.
• Thumbnail images are small versions of larger images, which are quick to download.
• They allow visitors to look through a series of photos quickly, before deciding which to view in more detail.
• How to make thumbnails
  • Use your graphics software
  • Use a specialized program to make thumbnails of a large bacth of images

Using illustrations and icons

• You can draw illustration by hand and then scan them.
• You can use a software tool to create illustrations from scratch (e.g. Adobe Illustrator).
• You can find an illustrator to create the artwork for you.
• You can buy illustration from a stock library.
  • Examples: Getty Images, Stockart.com, Illustrationworks.com
  
  (Source: http://stockart.com/)
• Icons can provide valuable visual clues to the meaning of text and links within a website.
• You can create your icons set from scratch or buy from other sources.

• There are many free icon sets in the world for web developers.

Graphic file formats

JPEG

• JPEG stands for Joint Photographic Experts Group.
• JPEGs are a lossy format; not all of the information in the original image is preserved.

• Good for: Photographs, Game screenshots, Movie stills
• Bad for: Line art and text, Comic strips, Anywhere where fine lines or sharp color contrast is needed, Windows application screenshots

PNG

• PNG stands for Portable Network Graphics
• PNG is lossless; it won't distort or alter the original image.

• PNG is the image format to use for line art, text, screenshots of Windows, general web graphics and "comic strip" style art.
• Good for:
  Text, line art, comic-style drawings, general web graphics
  Windows application screenshots
  When accurate reproduction (lossless) is required (24 bit PNG)
  When alpha channel (transparency) support is required
  As a general replacement for anything that is a non-animated GIF
• Bad for:
  Photos, in-game screenshots (only when quality is not important and you're looking for small files)
  Disappointing browser support for 32 bit PNGs from Microsoft and others

GIF

• GIF stands for Graphic Interchange Format.
  Originally developed by CompuServe in the '80's, this format offers a maximum of 256 colors, is still used for simple animations, and is lossless -- does not introduce pixel noise into images. Web art books recommend this format to keep clean edges around illustrations & text -- though PNG offers the same advantage.
• GIF is obsolete and should not be used.
• Where you have a GIF file, a PNG would do just the same and be noticably smaller due to superior compression algorithms.
• Good for: Where animations are required, Widespread browser support
• Bad for: Large file sizes compared to PNG for the same quality, Often limited to 256 colors (8 bit)

Transparency

• the GIF and PNG formats support transparency.
• This allows a graphic designer to designate the background of the image transparent.

Conclusions

• GIF, or PNG-8 work best to retain crisp detail in simple illustrations (less than 256 colors), and for web graphics containing text (so the text edges remain sharp)
• JPEG is still great for photographs displaying millions of colors at a very small file size
• GIF is still the format of choice for simple animations (PNGs are not yet compatible for animations), though JPEGS are used in some FLASH animation work.
• PNG-24, though larger in file size, is a good choice if you don't wish to lose any quality (reduce details, and introduce pixels and noise not in the original photo) in photographs

References:

• When and how to use internet image formats
• GIF vs. JPG--Which Is Best?

Optimizing your website images

• One of the easiest ways to reduce page response times is by optimizing your website images to reduce their file sizes as much as possible.
• Optimizing images not only makes your web pages load faster, but also reduces your bandwidth consumption.
• Class discussion: the benefits of optimizing your website images.
• Resources: 8 Excellent Tools for Optimizing Your Images
• Some good software tools
  • smush.it!
  • Radical Image Optimization Tool
  • PNGOUT
  • The Online Image Optimizer from Dynamic Drive
  • SuperGIF

Writing useful alternative text for images

• Alternative text provides a textual alternative to non-text content in web pages.
• The principles can be applied to images, media, applets, or other non-text web content.
• Functions of alternative text

• Accessibility is the practice of making websites as easy to use as possible for people with disabilities.
• HTML standards: every image must have an ALT attribute.
• Appropriate alternative text depends heavily on the image's context.
• Alternative text should presents the content and function of the image, and be succinct.
• Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
• Decorative images (if not put into background for some reason) still need an alt attribute, but it should be null (alt="").
• Alternative text should not use the phrases "image of…" or "graphic of…".
• Reading: Appropriate Use of Alternative Text
• Reading: Guidelines on alt texts in img elements

Background images

• A background image is an image that goes in the background of a web page, or part of a web page.
• Background images can be applied to the whole page or to individual elements on the page, using CSS.
• Background images are useful to create accessible sites using web standards techniques.
• When should you use background images?
  • You should code any image which is purely decorative as a background image, using CSS.
  • Only images which are an essential part of the content of the page should be coded into the HTML as foreground image (using the <img ... /> tag.)
  • Study that example: http://www.blacksofsopwell.com/
  Example: HTML code

     <a href="xyz" title="view all Content by Conran range">
        <img src="../abc.jpg" alt="Content by Conran Beatrix Armchair" width="295" height="295" />
     </a>

Example: CSS code

      body {
        font: normal 14px/21px Arial, Helvetica, sans-serif;
        color: #686561;
        text-align: center;
        background: #FFFFFF url(../_img/wallpaper_back_4.jpg) repeat-y center top; 
      }

Case Studies for class discussion:

• Case #1: http://ssp.chsc.hk/secondary/tc/index.htm
• Case #2: http://www.ineasysteps.com/books/details/?9781840783643
• Case #3: http://www.hkis.edu.hk

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.