Images

Agenda

HTML Images
Image Attributes
Types of Web Page Image
Absolute vs. Relative URL
Image CSS Properties
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.

Portable Network Graphics (.png) newest format for images that supports multiple colors and resolutions. The PNG format is patent-free.

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.

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>

Images

Agenda

Images

Image Attributes

Types of Web Page Images

Absolute and Relative Image URL

On this page