CA Resources

Images

Images can improve the design and the appearance of a web page.

Agenda

  1. HTML Images
  2. Image Attributes
  3. Types of Web Page Image
  4. Absolute vs. Relative URL
  5. Image CSS Properties
  6. background Properties

Images

In HTML, images are defined using <img /> tag.

The <img /> tag creates a holding space for the referenced image.

The <img /> tag is empty, it contains attributes only, and does not have a closing tag.

Image Attributes

The src attribute specifies the path (URL) to the image.

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it.

The value of the alt attribute should describe the image.

It is important to take note of the file type of the image (.jpg, .png, .gif).

<body>


  <img src="images/html.png" alt="HTML logo" />
</body>

Types of Web Page Images

  • Graphics Interchange Format (.gif) use for images with few colors (<256) and allows transparent backgrounds. It uses compression techniques called LZW compression, to make it smaller to download on the Web.
GIF example 1GIF example 2GIF example 3
  • Portable Network Graphics (.png) newest format for images that supports multiple colors and resolutions. The PNG format is patent-free.
PNG example 1PNG example 2
  • Joint Photographic Experts Group (.jpg) is a graphic image saved using a lossy compression techniques that discards some data during compression process. JPEG file format supports images with many colors (>256), such as photographs.
JPG example 1JPG example 3JPG example 2

Absolute and Relative Image URL

ABSOLUTE URL is a uniform resource locator (web address) that begins with http:// and then specifies a website, possibly a folder and a then a filename.

RELATIVE URL is a uniform resource locator that is relative to the current HTML page location. The relative URL will specify the image location (rather that the complete site).

<body>
  <img 
    src="https://onlinejpgtools.com/images/examples-onlinejpgtools/sunflower.jpg"
    alt="Sunflower" 
  />
</body>
Edit on GitHub

Last updated on

Previous

First Web Page

Next

CSS Properties

On this page