Dallas College, Richland Campus Multimedia Learning Center

Web Design 1
Home eHandouts and Assignments Syllabus Resources Student Sites Other Classes RLC Multimedia
Images   Design Points   The <img> Tag   Width and Height   Alt and Title   Float   Background Image
Updated 9/20/2021

Images

References

Introduction

The three most common image types that you will use in your Web pages are JPG (or JPEG), GIF , and PNG images. These three types of files were designed as different ways to reduce file size while at the same time preserving a lot of the detail of the image. All of these types of files use a (different) compression scheme that makes the files useful for downloading across the Internet.

And recently, another image type has become more popular, especially since Responsive Web Design (RWD) is such an important consideration for a 21st-century Web site. Scalable Vector Graphics (SVG) images can be displayed at any size (meaning at any screen resolution) without loss of sharpness. (We will look at SVG images and an SVG image editor in a future class, and we will look at RWD in several other future classes.)

JPG Images

JPG (or JPEG) images were developed by the Joint Photographic Experts Group, hence the name "JPEG". JPG files use what is called a "lossy" compression scheme. This means that some of the detail is lost in order to reduce the file size. JPG compression works best on photographs of real-world scenes. JPG files can control the display of 16 million colors.

GIF Images

GIF stands for Graphics Interchange Format. GIF images use a different compression scheme, and do not lose detail in the compression process. GIF compression works best on line art, cartoons, lettering, and other images where there are sharp edges and large areas of continuous (the same) color. GIF images are limited to 256 colors. But you can set one color in the image to be transparent. And you can bundle several images together into one GIF file, making it an animated image.

PNG Images

PNG stands for "Portable Network Graphics".

The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF format.

For the Web, PNG has three main advantages over GIF:

  1. alpha channels (variable transparency)
  2. gamma correction (cross-platform control of image brightness)
  3. two-dimensional interlacing (a method of progressive display).

PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25%, not a large enough factor to encourage folks to switch on that basis alone. But PNG *is* a lossless compression scheme, so no detail is lost.

One GIF feature that PNG does *not* try to reproduce is multiple-image support, especially animations; PNG was and is intended to be a single-image format only.

PNG images can be saved in "true color" mode, which handles 16 million colors; or in "indexed" (also known as "palette-based") mode, which handles only 256 colors and is similar to GIF in size.

SVG Images

SVG stands for "Scalable Vector Graphics".

An SVG image is stored as XML text. XML is very similar to HTML, but it is used mainly for storing data in text format. This storage type means that:

  1. You can, if needed, directly edit the text file's XML code to change the image. This is a bit risky but can be done.
  2. The image is easily transferred across the Internet to the user's browser, since the Internet is optimized for text files.
  3. The image consists of instructions to the browser to draw the image as the image loads into the browser.
  4. These instructions include "vector" commands such as "Go to point A, and draw a line from A to another point, B." This dynamic drawing approach allows for the image to be very sharp and detailed at any screen resolution.

Design Points

You can greatly enhance the appearance of your Web pages with images, but you need to keep these points in mind:

The <img> Tag -- Adding an Image to Your Page

Keep these points in mind when you are adding an image to your page:

Here is an image that you can practice with. Just right-click it and save it to your local images directory. (You can, of course, download any other acceptable image to your local storage. By "acceptable" we mean not offensive, defamatory, or offensive by normal community standards.)

Sleeping cat

For example, let's say that you want to include this image file in your page, and that it is stored in the "images" folder. The simplest possible HTML tag to include the image will look like this: 

  <img src="images/sleeping_cat.jpg">

The attribute name src is short for "source".

You should note that the <img> tag is self-closing, meaning that it has no ending/closing counterpart.

Width and Height

There are two ways to specify the width and height of the image:

  1. Use width and height HTML tag attributes.
  2. Use width: and height: CSS properties.

1. In order to help the user's browser quickly calculate the image's position on the page, you may include the width and height attributes in your <img> tags. The browser can calculate where the images and other objects (such as text) go, and can even display the text, while the image is still downloading, as long as it (the browser) has the width and height information to start with.

The values of the "width" and "height" attributes are understood (but not specified) to be in pixels.

These two attributes look like this: 

  <img src="images/sleeping_cat.jpg" width="425" height="282">

You don't have to put these attributes in this order, but most image-editing and -display programs list "width" first, so it's a natural order to stick with.

2. Or you could put width: and height: properties in your stylesheet. For instance, your image tag could look like this (Note the id attribute): 

  <img src="images/sleeping_cat.jpg" id="catPicture">

And then in your stylesheet you would have this selector: 

  #catPicture
  {
    width: 425px;
    height: 282px;
  }

Please NOTE that these two properties (since they are in a stylesheet) DO specify the units, in this case, px for pixels.


It is also possible to use percentage values for the width (and height) of an image. This approach is often used in pages that "respond" to the size of the browser window. (When you hear the phrase "Responsive Web Design" (RWD), it might be helpful to remember that this percentage width is often part of that design method.)

But there is a problem with trying to use a percentage value in an HTML tag's width or height attribute: The W3C's HTML Validator will report the width attribute to be in error. In HTML5, width and height attributes may only be given in pixels.

Probably the best solution to using a percentage value for the width or height of an image is to use CSS style properties in your stylesheet.

Alt and Title Attributes

You should also include alt and title attributes in your <img> tags.

  1. "Alt" is short for "alternate text". If the browser cannot display the image (for instance, if the Web server has not yet sent it to the browser or if there is an error in the src attribute), or if the user is using a screen reader browser, the browser will use the text in the alt attribute to show the user a brief description of the image's content/subject.

  2. The title attribute is specifically designed to create a "tool tip". A "tool tip" is pop-up text that displays in front of the image if the user keeps the mouse pointer over the image for a short amount of time.

(Older versions of Internet Explorer (version 7 and earlier) will (wrongly) display the value of the alt attribute as the tool tip.)

The value of your alt and title attributes can be the same and should be short but descriptive and informative.

Here is a sample of the alt and title attributes: 

  <img src="images/sleeping_cat.jpg" width="425" height="282"
   alt="Sleeping cat" title="Sleeping cat">

The title attribute in the previous code will show up as a tool tip if you hover your mouse cursor over the following image:

Sleeping Cat

And the alt attribute in the previous code will show up as a description of the missing image below:

Sleeping Cat

Some browsers (but apparently NOT Firefox) will also show a "missing image" icon next to the alt attribute's value.

Floating an Image

You can use the CSS float property to give the browser instructions about how you want text to flow around the image.

The possible values for the CSS float property are:

Please note carefully that the text which you want to float around the image must be after/below the image tag in the HTML page, in order for the float property to work.

If you don't use the float property, one line of the text after an image aligns with the right side of the image, then the rest of the text drops below the image. Here is an example of what this default situation looks like:

Sleeping Cat Here is a picture of a sleeping cat with some text nearby so you can see how the text flows without a "float" property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows without a "float" property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows without a "float" property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows without a "float" property.

Now here is what some text and the image look like with a CSS property of float: left; in the <img> tag. Please note that this image tag also has a CSS property of margin-right: 1em;:

Sleeping Cat Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: left; property.











Finally, here is what some text and the image look like with a CSS property of float:right; in the <img> tag. Please note that this image tag also has a CSS property of margin-left: 1em;, and the text has a CSS property of text-align: justify;:

Sleeping Cat Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property. Here is a picture of a sleeping cat with some text nearby so you can see how the text flows with a float: right; property.

Adding a Background Image

You can add a background image to almost any HTML tag, including the <body> tag, but keep these points in mind:

To add a background image, you will need to know the path (folder) that the image is stored in, the filename, and the filename extension. Also, keep in mind that on most Web servers the filename is case-sensitive, so use the same upper- and lower-case letters in your style rule as the name of the file is stored on the server.

Here are two samples of how to set the background image: 

  body {background-image:url(images/Winter.jpg);}

  #mainDiv {background-image:url('images/Blue hills.jpg');}

Please note these points about the above samples:

There are several additional CSS properties that you can use to determine where and how the background image is used by the browser. Some of these properties are:

You can see an example of how to add a background image, at the instructor's completed assignment site. The background image is the shuttle which is landing. (You can right-click in the page, click on the stylesheet URL ("space.css") in the href attribute of the <link> tag in the source listing, and see how the background image is added by using the style properties in the .mainBody selector.

Please note these points about the background image at the instructor's site: