Images in HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Section 2.5

Basic Facts

Three main formats of images that are good for the Web:

JPEG (Joint Photographic Experts Group)
- 24-bit color representation for pixels (can represent more than 16 million different colors).
- JPEG has three settings: "low JPEG" (56 dpi), "medium JPEG" (72 dpi), "high JPEG" (96 dpi).
- Windows programs automatically save JPEG images at "medium," which is mediocre.
- JPEG images are lossy --quality lost in the compression process.
- Have higher compression, though.
GIF (Graphic Interchange Format)
- 8-bit color representation for pixels (each pixel can have 256 colors).
- Usually efficient.
- Mostly lossless in quality.
- Can have transparent backgrounds.
- Can be used for animation.
PNG (Portable Network Graphics)
- Most recent format.
- Allows images to be made transparent against any background.
- May not display in all browsers (e.g., Internet Explorer).

The `<img />` Tag

Specifies an image to appear.
Attributes:
- src
  - Value is the URL of the file containing the image.
  - Value is either an absolute URL or relative URL.
  - Example: <img src="dogruns.gif" alt="(Dog running)"/>
    Note: This example has a relative URL. This means that the file dogruns.gif is located in the same directory as the HTML document displaying the image.
- alt
  - Specifies text to replace an image if a browser's image download is disabled.
  - Example: <img src="dogruns.gif" alt="(Picture of a dog running)" />

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>image test</title></head>
<body>
<h2>UCLA Royce Hall</h2>
<img alt="UCLA Royce Hall" src="http://www.laphotos.com/ucla_royce_hall_small.jpg" /> 
</body>
</html>

UCLA Royce Hall

You have to download 2 images file (ice.gif and post.gif) and save them in images folder.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Cute Cats</title></head>
<body>
<h2>Cute Cats</h2>
<img alt="[Ice Cat]" src="images/ice.gif" />
<br />
<img alt="[Post Cat" src="images/post.gif" />
</body>
</html>

Cute Cats

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Cute Cats</title></head>
<body>
<h2>Cute Cats</h2>
<img alt="[Ice Cat]" src="images/ice.gif"/>
<h2>Smaller</h2>
<img alt="[Ice Cat]" src="images/ice.gif" width="125" height="178"/>
<br />
</body>
</html>

Images in HTML

Reading

Basic Facts

The <img /> Tag

Example

UCLA Royce Hall

Cute Cats

Cute Cats

Smaller

The `<img />` Tag