About Web Graphics

This page contains a brief overview of graphics on the web.

In the HTML tutorial and CSS tutorial, I explain how to embed a graphic image into a web page. In HTML you use the img tag, combined with the path to the image. In CSS you can specify a background image to appear on an element's background. To do this in CSS you can use the background-image property (or any of the related background properties) or the border-image property.

In any case, both HTML and CSS assume that you already have an image located on the web somewhere. This tutorial will show you how to create the actual image.

Examples of Web Graphics

Before we start creating our own graphic, lets look at some examples of web graphics.

Logo Example of a logo. Logos are one of the most common uses of web graphics. Most websites have a logo on every page. Logos are usually created using illustration software, such as Adobe Illustrator, then exported to PNG or GIF format.
Photo Photo of Milford Sound, New Zealand Photos are becoming increasingly popular too, especially with so many digital cameras and camera phones available these days. Photos are usually either scanned into the computer, or imported directly from a digital camera. Once the photo is saved on the computer, you can make adjustments, re-size it, and then save it in PNG or JPEG format.
Icons Shopping cart icon Icons can help a website look more professional, as well as help users quickly identify the purpose of a link. Icons are usually created using illustration software, such as Adobe Illustrator, then exported to PNG or GIF format.
Decorative Image Decorative image Decorative images are often used to do the bits that HTML and CSS can't do. Decorative images are also commonly used for repeating backgrounds on web pages.

Depending on the image, a decorative graphic can be created using illustration software such as Adobe Illustrator, or image editing software such as Photoshop or GIMP. It is then exported to PNG or GIF format.

Web Graphics - Properties

Most browsers provide you with an easy way to view the properties of any graphic on the web. Here's an example:

  1. Load a web page with a graphic
  2. Right click on the graphic, and select "Properties":
    Getting the properties of an image
  3. You should now see the properties of the image:
    Properties of an image
  4. Sometimes the image path is too long to fit in the window. In this case, depending on your browser, you may be able to click and drag the window to make it wider.

Update

Newer browsers no longer use Properties for viewing image properties.

If you don't have the Properties option, look for View Image Info or Inspect Element, or similar.

Displaying Web Graphics

Once an image has been created, it needs to be uploaded to a web server so that you can display it in your web pages. These are the steps you need to take in order to get a graphic to display on your website:

  1. Create the graphic
  2. Save it in a web format
  3. Upload it to a web server
  4. Embed the graphic into your web page (using HTML or CSS)