Picture Formats | Pictures & Properties | Alternative Text | Thumbnails | Transparency

Pictures

Pictures can add flavor to your website, but if they are too large their download time will discourage people from using your site – remember your download time should be 8 seconds or less. Try to save your pictures as small as possible without distorting their quality.  The resolution for any picture on the web should be 72 pixels per inch.  Photographs should be saved as JPEGs and line drawings, graphics, and logos as GIFs.  All pictures on the web must include alternative text to comply with web accessibility standards (Section 508).  Acceptable picture formats for use on the web are: gif, jpg, png, and bmp - Do not use .tif files, they are used for printing.

Bitmap Format (BMP)

Bitmap pictures are made from a series of small dots, much like a piece of graph paper with specific squares filled in to form an image. Bitmaps are created with and edited in paint programs, such as Microsoft Paint. All scanned graphics and photographs are bitmaps. When they are resized, they lose definition, and the individual dots that make up the picture become visible. You can change the way colors look in a bitmap picture by adjusting the brightness and contrast, converting color to black and white or grayscale, or creating transparent areas. To change specific colors in a bitmap, you need to use a photo editing program.

Graphics Interchange Format (GIF)

GIF is one of the most popular formats on the Web.  It allows for compression and animation, but also supports transparency and interlacing. 

GIF files support a maximum of 256 colors which makes it practical for almost all graphics except for photographs.  You can reduce the size of a GIF by reducing its colors on the palette.  GIF uses the LZW compression scheme internally to make images as small as possible without losing data.  LZW compression is the compression of a file into a smaller file using a table-based lookup algorithm.

Transparency allows a designer to designate the background of the image transparent or invisible. This gives the illusion that the image is irregularly shaped rather than rectangular. It also allows for the designer to determine the background color of the image.

Interlacing allows your web page to download quickly while your image downloads in stages. The image appears in the browser in several steps.  First it will appear fuzzy and blurry, but as more information is downloaded, it becomes more defined until the entire image is downloaded.  Interlaced images usually tend to be a bit larger than non-interlaced ones, so use it only when it makes sense.

Animation allows you to create images with animated sequences.  You can select an animated graphic from the Web, a file, or create your own by using special imaging software.

Remember: GIF files are used for graphics, logos, line drawings, and icons.  Do not use them for photographs.

Joint Photographic Experts Group Format (JPEG)

The JPEG format is intended for photographic images.  It can support 16.7 million colors.  The JPEG format can also be used on images which do not look as good with only 256 colors.

 

The internal compression of a JPEG actually throws out information unlike the GIF format.  Once you lower the quality of the image and save it, the extra data is lost and cannot be regained, so be sure to save an original copy of the photograph first. 

 

Portable Network Graphics Format (PNG)
 

This is the newest format used on the Web and it was developed to surpass the limitations of GIFs.  PNG was designed to offer the main features of the GIF format with a greater depth of color, but it does not support animation.  It is widely used with Fireworks and Dreamweaver.

 

Inserting a Picture and Setting Picture Properties

To insert a picture, click Insert, Picture, and select either from Clip Art or From File. If you are inserting a picture from a file, a dialog box will appear –browse for the location of your graphic and click on Insert.

To set the picture’s properties and add alternate text, right-click on the picture and click Picture Properties -- a dialog box will appear.  On the Appearance tab, if you want the picture to line up with text, select 8 for the Horizontal Spacing.  Horizontal spacing is the amount of blank space that appears between the text and the picture.  Otherwise, leave the horizontal spacing at 0. You can also set the Vertical spacing if more blank space is needed vertically. You can put a border around the picture, select the border's thickness, and/or increase or decrease the size of the picture.

  

Adding Alternative Text

To add Alternate Text to a picture, select the General tab, and under the Alternative Representations – Text type in a brief description, ten words or less, describing the picture. Try to keep your description brief or you will be required to provide a long description statement for the text.  When a visitor moves his/her mouse over the picture, alternate text will appear, as in the example below.  Although you want to keep your description brief, you want the visitor to fully understand the meaning of the picture and how it enhances the document.

Long Description
One way to describe a complex chart or graphic in more detail is to use a description link, normally called a D-link. Rather than spell out “description link,” the convention is to use a single letter of D near the chart, which (when selected) takes the user to another document describing the chart/graphic. The D can be very small, such as 2 or 4 point or may be the same color as the background. In this coding, a sighted person would see the D next to the chart, and a screen reader would speak the letter D.

<IMG SRC="blossom.gif" ALT="Apple Blossom"><A HREF=longdesc.htm">D</A>

You can also make the D invisible, still placed next to the image, but having an ALT text of D. The invisible D might be a transparent gif with D as the ALT text, or the letter D colored the same color as the web document background.

<IMG SRC="blossom.gif" ALT="Apple Blossom"><A HREF=longdesc.htm"><IMG SRC="transparent.gif" ALT="D"></A>

Make the D into a hyperlink to a file named “longdesc.htm” or “longdesc.html.”  In this long description file, you can write a full description of the graphic. If you have more than one photo being described in the long description file, use a bookmark to take users directly to the description of the photograph.

 Thumbnails

Thumbnails are another way of displaying pictures and reducing download time.  They create a smaller version of the picture, allowing for quicker download time, but allow the viewer to click on the picture for a full-size view.

 Click on the picture for full-size view.

To create a Thumbnail, select Tools, Page Options and the AutoThumbnail tab.  Select the Width or Height of your picture and select or deselect the Border and/or Beveling feature.  Once your selections are made, select OK to save them.  Click on the picture to select it and then click the Thumbnail Button to reduce the size of the picture.  If the picture appears larger or smaller than you want, select the Undo button and try setting the properties again.