Types of graphic files

The primary focus of this lesson is how to add graphics to a web page using Dreamweaver. I do not want to try to make this a graphic class, but I did want to share a few points about graphic file formats on the web. The two most common graphic formats on the web are GIF and JPEG (or JPG). A third one is PNG.

GIF (Graphics Interchange Format) files can display images in black and white, gray scale, or color, but the files are limited to 256 (or fewer) colors. GIF files were the first web graphic format supported, and they are primarily used for images which have "flat areas" of colors, like in clip art or logos. GIF files are usually smaller and, therefore, load faster than JPEG.

JPEG or JPG (Joint Picture Experts Group) refers to a set of formats that support full-color images and stores them in a compressed form. This was a format created to allow better quality of photos on the web. Unlike GIF files which limit you to a maximum of 256 colors in an image, a JPEG file is produced by "throwing out" parts of the image. JPEG is used for photographs or if your image has lots subtle color changes.

Another format which is starting to appear is PNG (portable network graphics). This format is supported by Internet Explorer 4.0 or higher and Netscape Navigator 4.04 or higher. If you suspect some of your users will be using older browsers, don't use this format. For more details about this newer web format, see www.libpng.org/pub/png/.

These three formats are briefly described in the video clip Getting Started with Web Graphics.

Sources of graphics

Where can you get images? Basically these are some of the more common options:

• Create your own
  You can create your own image files using an imaging program (such as Adobe Photoshop, Corel Draw, Paintshop Pro, Fireworks, to name a few).
• Convert other images you already have
  If you have existing images, you will need to convert them to GIF, JPEG, or PNG format. Graphic programs like Corel Draw, Photoshop, PaintShop Pro, or Fireworks let you save images as GIF or JPG files.
• Use scanners to convert slides, photographs or art work
  The newer graphic scanning programs allow you to save directly as GIF or JPG format. Be sure that the items you scan were created by you or you have received permission to put this art work or photograph on the web, so you are not violating copyright.
• Use digital cameras
  Most newer digital cameras create "images" which are JPEG, but some save images in proprietary formats which would need to be converted.
• Buy from collections
  Even in the days before web, people have been using purchased collections of images and photographs. However, you need to check the licensing agreement that comes with the collection, to make sure you can use these on a web site. These are example companies that sell art and photos:
  • www.eyewire.com
  • www.photosphere.com
  • www.arttoday.com
• Take images from shareware/freeware websites
  You can find on the web collections of shareware images, icons and backgrounds; the site will label these either freeware (no charge) or shareware (honor system for you to send in a fee if you continue to use the image). Go to your favorite search engine and search for shareware graphic sites.

To get a copy of an image from a web site, once you see an image on a web page, put your mouse on the graphic, right-click your mouse, select Save Image As.. from the menu, and select a folder (or disk) to save it into. If you are using a Mac, drag a copy of the image to another folder or location on your local computer. Remember that images on the web are copyrighted, and are not part of public domain unless otherwise indicated on the website. For example, a site might be a resource site for teachers and images found on the site can be saved and used by other teachers.

A note of caution about using photos on the web:
Because the web is world-wide accessible, you need to be careful about using a person's photo on a website without permission. Check out Tip #14 for details and links to permission forms.

Be careful about graphic file sizes

A little later, I will cover how Dreamweaver tells you the size of graphics. However, for now I wanted to stress something about graphic image file size. File size is not determined by the size of the image of the screen. The amount of time it takes an image to download to the local computer strictly relates to the size (in kilobytes). This is an image of a castle that is 38 kilobytes.

	These images are different sizes on the screen, but they would take the same amount of time to download, because download time is determined by the kilobyte size of the image and the speed of the connection.

One of the most common mistakes done by people first starting web pages is getting an image from someone else or scanning a photo or drawing, and then using the web editor, like Dreamweaver, to "size" the image. You need to size the image with a graphic program to reduce the kilobytes used in the file.

Selecting an image for your web page

Now that you understand the basics of types of graphics, you are ready to begin putting some graphic images on your pages. It is certainly possible to have pages without graphics. But graphics are very common. Increasingly I have a hard time finding plain text documents to use as examples in classes. Often images are part of a site's identity, and those images are repeated throughout a site.

Even if you are starting with a blank page, be sure that the document is saved under whatever name you will be using, before you place images.

When you place images on a web page, you are using inline images, because the image is placed on the line where your cursor is "sitting". (The other option for placing images is to put images inside table cells, which we will discuss in Lesson 5.) Place your cursor where you want the image (on the line) and then use Insert, Image from the menu bar, or click on the Insert image icon on the Common Insert grouping (shown below).

A dialog box appears for selecting an image.

I strongly encourage you to be sure that your images are in the correct folder on your hard drive already, reflecting their location for your website. That is, in the same folder with your other HTML files, or in an images folder, or in some other folder within your site. In the above example, the computer image I have selected is in a subfolder labeled images. If you select an image that is in a different folder from your current website, Dreamweaver asks if you want to copy the image to your current (Dreamweaver) website folder. You want to copy your images from other folders to your "website" folder area, so your images are in the same place as your HTML files.

Even though you have lots of graphic images in your folder, Dreamweaver defaults to only show files which are GIF, JPEG, JPG, or PNG files. As you highlight each image in the Select Image dialog box, you will see it displayed to the right, as is shown above. This helps to make sure you pick the correct image.

A very useful feature in Dreamweaver, in the Image Preview section, is the information shown about the highlighted image. In this case 190 X 120 JPEG 8K 2 sec.

• The first item on the left is the size of the image in pixels, that is, how big will it appear on the screen. 190x120
• The type of web image is next. JPEG
• The size of the image file is next 8 kilobytes
• The time it would take for a user with a 28.8 modem to download this image is last 2 sec. The larger the image file is in kilobytes, the longer it will take to download the image (and the page the image is on).

I will talk later about how you can change the "modem" speed in your copy of Dreamweaver. Unless your site is an internal site for a unit and everyone is on high-speed datalines, you have to consider audiences using modems.

When you work with images, just like other filenames, keep the filenames for your images as single words. Dreamweaver won't stop you from placing images which have spaces in the filename, but down the road you may have problems deleting those files or changing ownership of files if you have spaces in the filename.

Using the Properties panel for images

If the Properties panel is showing (at the bottom of your Document area) and you have an image selected, you will see the properties options for the image. Dreamweaver lets you create web documents and place images. It will not let you create new images (other than flash buttons, which will be discussed in a tip). With the 2004 release you can make some limited changes in the image.

The source section of the Properties panel should accurately reflect the address of your image. In this example, the image computer.jpg is in the subfolder images, so the source is reading images/computer.jpg.

Normally avoid referencing an image in a server folder that is not part of your website, because the site owner could remove the image, resulting in a missing image display on your site.

With your image selected, you will see three handles around the image. You can drag these handles to change the size of the display of the image. You can also use the size option (shown below) and type in a different width or a different height. If you "size" the image on the screen to make it smaller, it does not make the kilobyte size any smaller, as stated above.

Another item controlled in the Properties panel for images is border. Whether or not you have an image border depends on the image and your document. Sometimes images which do not have "white" around the edges and have text close to the image show up more clearly when a border is used. If this window is left empty, then a border of 0 is used. But you can type in the 0 or use 1, 2, 3, etc. The larger the number, the wider the border.

There are three alignment buttons to control the placement of the image on the "line." The choices are at the left margin, centered, or at the right margin. This is shown in the video Adding Basic Graphics in Dreamweaver. So placement of images on the web is more limited than with a word processor. These three choices in alignment can be used if the image is on a line with text or on a "blank line." If you see any other placement of an image on a page, the page creator is using tables with lines turned off.

Another option found in the Properties panel is a drop-down list for alignment options. This instructs the browser about how to place the image in relation to text on the same line as the image "code." This means that if you have a paragraph in which you are "inserting" an image, the only text affected is the text on the same line as the image. This type of placement is very different from word processors as well. See a related document that shows the various alignment options and how they would treat adjacent text.

The importance of the ALT attribute

Besides the source window and the size windows in the Property inspector, which are automatically filled in when an image is selected in Dreamweaver, a very important window is the ALT text box, which stands for alternative text.

The basic rule for good website page creation is to always fill in a textual description of your image. Why is this tag important? The vast majority of the world is still connecting to the web via rather slow connections, and some users turn off the display of graphics to speed up the loading of a web page on the local computer. If you have provided an alternative text for your image, the user can then see if it might be worthwhile to turn on graphics. In some cases, graphics are essential for an understanding of a page, and in some cases they are "eye candy."

But more importantly, if you have given an alternative text for your image(s), people with visual disabilities using screen readers or other adaptive devices can still work with the website.

Where possible, consider using an alternative text that conveys some meaning. Let's say you have a logo on your web page. If you give a alternative name of logo, that is not very useful to a person with a screen reader. Similarly, if you have a photo of a demonstration garden, which description would be better?

• Demonstation garden
• Master Gardener volunteers answer questions at the demonstration garden.

Options in editing images

The 2004 release of Dreamweaver has several icons in the Properties panel for making selected changes in a graphic.

From left to right as shown above, the icons open up Fireworks (if installed on your computer), optimize the image, crop the image, resample, change the brightness, or sharpen the image. The resample option only is activated if you have resized the image using either the width or height property. Selecting any of these options on an image placed in your document will change the image permanently, so be sure you have a copy of the original in another folder, if you are going to go need the original version. Feel free to explore these icons with images you place in a practice document.

I have a copy of Fireworks installed on my computer, so I don't know how these icons work if you do not have Fireworks on your computer. A couple people from the class indicated, however, that some of the icons, like brightness and sharpness, were still possible on a machine with just Dreamweaver 2004.

Images as links

One of the choices in the Properties panel, when an image is selected, is to use the image as a link. That is, clicking on the image takes a user to another page or web site. Buttons are an obvious example of images as links, but sometimes other images like a logo or photograph can be used as a link to another part of the site.

What you put in the link box is the same as other textual links. It can be a reference to another website, like the University of Arizona main site in the screen capture above, or to another document on your site or a related site. Be sure that the border is 0 or your image will display with a blue border around it. This is a common mistake seen on web pages created by new web authors.

Imagemaps

While we are addressing using images as links, I want to talk about imagemaps. What is an imagemap? An imagemap is a single graphic, but parts of the image have been defined as a hot spot. Most imagemaps are used for navigation, such as moving to another website or page on your own site, but they can also be used to trigger advanced HTML and Javascript events.

In some cases the imagemap is just part of the page as it displays or there are multiple imagemaps on the same page. An example of an imagemap is www.ext.nodak.edu/extnews/pyramid.htm

Imagemaps have become very common on the web because they add a visual sophistication to your page. However, there are some negative aspects of using imagemaps you need to be aware of:

1. Just as you add load time to your document with every image you put in your web document, an imagemap adds to the time it takes your web document to load (to appear on the user's computer that is connecting to your site). So a web page with lots of graphics will take longer to load than a page with fewer graphics or no graphics. If an important part of your audience is connecting via modems with slow connections, you need to weigh this issue in your mind. There are not fixed answers on this.
2. If you use any type of imagemap on your site, but especially an image which takes up the entire "page", it is not easy to add another link to your main page. If you created the image, you could recreate the image. But if you hire someone to create the graphic, you need to go back to them to modify the graphic. Take a look at the page at cals.arizona.edu/gardening. Adding another major link to these pages would require remaking the graphic (or graphics) used on the page.
3. The last issue to think about is web accessibility. One of the check items that will be required (to be designated as accessible) is having an alt area defined for each hot spot and providing redundant text links for your imagemap (or a link to a text-only version which is updated whenever the main page is updated). Redundant text links display elsewhere on the same page and provide alternative ways to navigate your site for people with visual impairments, people who have turned off the display of graphics because of slow connections, or people who are not able to use a mouse or have difficulty using a mouse.

Sometimes it is hard when you look at a page to tell if imagemaps are being used or if a larger image was sliced into separate images. One way to tell is that the graphic used for an imagemap is a single graphic. If the display of graphics is turned off in your browser, and you look at a web page, the imagemap area will have a single ALT tag and you can see it is a single graphic. If the graphic has been sliced into separate images, as at cals.arizona.edu/gardening, then each separate graphic area will be displayed as a separate rectangle when graphics are turned off in the browser. For a user who is not using a screen reader and can see the page, it may not matter much if the page is a single graphic (thus an imagemap) or if it has been sliced into separate images that are next to each other.

Dreamweaver will let you take a single graphic and define hot spots on it, thus making an imagemap. Dreamweaver will not let you take a large graphic and slice it into parts, assigning different alt tags and links to each part. This is something that has to be done with a graphic program.

To create an imagemap in Dreamweaver, place the image as you would place any other image and give the image as a whole an alt attribute. Within the Properties panel for the image, there are drawing tools (indicated below) that you use to draw the shape around the hot spot.

After drawing the shape around the appropriate part of the image, another window pops up for you to give the URL for that "hot spot" and to give that hot spot its own ALT attribute.

Creating hot spots on a graphic and associating code for each hot spot is shown in the video Coding Imagemaps with Dreamweaver.

Rollover images

A rollover image is one whose appearance changes when you put your mouse on (or over) the image. Most often the rollover images have similar content, but are different colors.

However, before you create a rollover image in Dreamweaver, you need to have the two parts. Some graphic programs also let you create the different parts for the rollover images, but we are not covering that in the class, since this is not a graphic class. On a previous version of the College's homepage, we used rollover images which had different content for each part. Thus there were two images such as shown below. The image on the left was the image which appeared on the front page and the image on the right appeared when the mouse was placed over the graphic.

There is a separate procedure for placing rollover images, that is different from placing regular images. Select from the main menu bar, Insert, then Image Objects, then Rollover Image. A dialog box appears for defining the rollover image. There are two windows--one for the "original" image and one for the image which appears when the mouse is put over the image.

The two parts for the rollover image normally are the same size or you have to account for the sizes in your layout design. When you define a rollover image in Dreamweaver, the coding to make this feature work is really a javascript application. The coding is placed in the HEAD area of your web document, and the user must have a browser capable of reading javascript for this feature to work.

Background images

The mechanics of placing a background image are pretty straightforward. Under Modify, Page Properties, and then the category of Appearance, there is a window for naming a background image. You can browse your hard drive for a background image. Just like with other images, this image should be located within your website.

Whether or not backgrounds are "good" is a debated point among website creators and managers. Theoretically any image may be used as a background. Unless the image is carefully designed with an image on the left and a lot of white space on the right, the image will be tiled behind the text and other images on the page. Most of the backgrounds are small tiles of a pattern, and the tile duplicates to fill up the screen. Unless you are using a special code supported by cascading style sheets, which is not uniformly supported, there is no way in HTML 3.2 to have it NOT duplicate. (There is a code supported in Cascading Style Sheets that can stop tiling, but that is outside the scope of this class.) Tiling of a background can produce strange results in a page, because people do not have the same sized monitors. You have probably seen pages with a logo repeating in the background of a document.

Although theoretically any image can be used in as a background, background images normally need to be light enough to not interfere with the main page's information. These are some sample backgrounds. Not all are "light."

This image above was too wide to display here, so I sized it down. I have put a border on the image, so you can see the white part of the image.

There are some negative sides to backgrounds, as is stated in the Yale Style Manual web site:

Background patterns and background images are the most controversial graphic elements on web pages. Both features add graphic complexity to pages without increasing their legibility. Poor choice of background graphics has generated some of the ugliest pages on the web. However, in the hands of experienced and knowledgeable graphic designers the use of these background features can result in web pages as stunning in graphic impact as anything seen in multimedia CD-ROMs.

Horizontal lines

One of the earliest codes introduced by the World Wide Web Consortium when they created the standards for web coding was the code for a horizontal rule or horizontal line. In the early days, there was not much supported to break up text monotony. To insert a horizontal line, you can pick from the menu bar Insert, then HTML, then Horizontal Rule.

The horizontal rule is used to divide the screen display on web pages. There is not as much use of this web feature as a couple years ago, but there are still situations where it is used. Most commonly it is used to divide the top "main part of the page" from "supplemental information".

The horizontal rule has its own Properties panel. If you have placed a horizontal line and then click on that line, this panel appears.

If you do not make any changes in the Properties panel, the rule goes from the left margin to the right. In most cases this is a bit severe, especially since newer monitors are so wide.

• The box labeled H is for giving a pixel height for the line or rule, starting with 1.
• The box labeled W gives you a drop down choice of % or pixels. We will discuss this option more with tables in Lesson 5, but entering a percentage keeps the line's length relative to the screen. If you put 50%, then no matter what the monitor size, the line covers half of the screen's width. If you pick pixels, then you have to decide what monitor width you can assume for your audience.
• Once you pick any width which is not the full screen, then you can select the alignment on the screen for the line. Options are flush to the left margin, centered, and flush to the right margin.
• If you leave the box for Shading checked, the thicker the line, then the more it has an "embossed" look.
• As you can see, there is no option for giving a color to the horizontal rule; if you see a page with a colored horizontal line, that is really a graphic.

There is no HTML code and therefore no option in Dreamweaver for creating a vertical rule. This is partially because there is no standard "height" to a web document. A web document can just have a couple of lines, or it can run for several screens. If you see what looks like a vertical rule on a web document/page, the line is being created by one of these methods: the vertical rul is a graphic image; it has a (graphical) background which has a "vertical line" in it; or it is a very narrow column in a table layout which has been colored. An example of the latter is cals.arizona.edu/staff.

Whether or not you use horizontal rules is really a matter of taste and part of your web site "look."

Testing your pages for load time

As you start to add graphics to your web page, recognize that each graphic adds additional kilobytes to the amount of time needed for the page to appear or download on the local user's screen. Since so many people use graphics, and often a LOT of graphics on a single page, download times really start to add up.

Dreamweaver provides a handy visual reminder about the size of the document you are creating. This is shown on the right side, under your document area.

The kilobytes reflect the HTML document you are creating, plus any associated (or dependent) images needed for that page to display okay. This does not reflect linked documents, which each load separately. As you add images to your pages, look at this download indicator to see the kilobytes and the amount of time needed for the download. In this particular display, I have set my "connection" to be a 28.8K modem, because I know that some of my audience will be using this lower connectivity.

To change the type of connection you are "testing" against, go to Edit, then Preferences, and highlight on the left of the resulting dialog box Status bar. One of the settings here is for Connection speed. Various options are found in the drop-down list.

Even though YOU may have a high speed data connection, unless you are creating a site for a very small audience with high speed datalines, you need to pick a connectivity option for your audience using a modem.

This download indicator only shows your sites on your computer, through Dreamweaver.

When posting images through Dreamweaver

Once graphic files are referenced in a web document, they become a dependent file to the web document. In Lesson 1, I discussed how to define your site for posting through Dreamweaver.

If you create documents that reference images, and you select the document to Put it on the server, you will see this message box pop up. What Dreamweaver wants to do is to also tranfer dependent files, which are most of the time graphics referenced in your web document. I cannot think of any good reason to NOT also transfer the dependent files, unless they are already on the server from an earlier posting and have not been changed.

If you use another method to post files, such as WS_FTP or Fetch, you are not prompted if you forget to copy a dependent file.

This document is part of a series of lessons on Dreamweaver Basics for the 2004 release, given by Linda Ffolliott, College of Agriculture and Life Sciences at the University of Arizona.