Images in HTML

In Ancient Egypt, the walls of pyramids and temples were covered with colorful paintings - scenes of pharaohs' lives, gods, and daily activities. These images told stories better than a thousand hieroglyphs. In HTML, you have the same power! Mohamed says: "A page without images is like a pyramid without paintings - empty and sad."

The <img> Tag - Painting on Pyramid Walls

To place an image on an HTML page, we use the <img> tag. It's a self-closing tag - it has no closing tag, similar to <br> or <hr>:

1<img src="pyramid.jpg" alt="The Pyramid of Cheops in Giza">

The <img> tag has two required attributes:

The src Attribute (source)

The src attribute points to the path to the image file. It's like the address of a chamber in the pyramid where the painting is located:

1<!-- Image from the same folder -->
2<img src="sphinx.jpg" alt="Sphinx">
3
4<!-- Image from a subfolder -->
5<img src="images/pharaoh.png" alt="Pharaoh Tutankhamun">
6
7<!-- Image from the internet (URL) -->
8<img src="https://example.com/photos/nile.jpg" alt="The Nile River">

The alt Attribute (alternative text)

The alt attribute is a text description of the image. Mohamed compares it to the description that a scribe would write next to a painting for those who couldn't see it. It's required for several reasons:

• Accessibility - screen readers read alt text to blind users
• Fallback - when the image fails to load, the browser displays the alt text
• SEO - search engines "read" alt text to understand what the image depicts

1<!-- Good alt - describes what's in the image -->
2<img src="pyramid.jpg" alt="The Great Pyramid of Cheops at sunset">
3
4<!-- Bad alt - too generic -->
5<img src="pyramid.jpg" alt="image">
6
7<!-- Decorative image - empty alt (but the attribute must be present!) -->
8<img src="decorative-border.png" alt="">

Image Dimensions - width and height

The width and height attributes specify the image size in pixels. Specifying dimensions is a good practice because the browser reserves space for the image before it loads - the page doesn't "jump":

1<img src="sphinx.jpg" alt="Sphinx" width="600" height="400">
2
3<!-- You can specify only width - height will adjust proportionally -->
4<img src="sphinx.jpg" alt="Sphinx" width="300">

Image Formats - Hieroglyphs in Different Styles

Just as Egyptians used different painting techniques (frescoes, reliefs, gilding), on the internet we have different image formats, each with its own advantages:

JPG / JPEG (Joint Photographic Experts Group)

• Best for: photos and images with many colors
• Advantages: small file size, good color reproduction
• Disadvantages: loses quality during compression (lossy), doesn't support transparency
• Example: photo of a pyramid, portrait of a pharaoh

PNG (Portable Network Graphics)

• Best for: graphics with transparent backgrounds, logos, icons
• Advantages: supports transparency, lossless compression
• Disadvantages: larger file size than JPG
• Example: Egyptian museum logo with transparent background

GIF (Graphics Interchange Format)

• Best for: simple animations, short repeating sequences
• Advantages: supports animations, small size for simple graphics
• Disadvantages: limited color palette (256), low quality photos
• Example: animated scarab, blinking hieroglyph

SVG (Scalable Vector Graphics)

• Best for: icons, logos, diagrams, charts
• Advantages: scales without quality loss (vector graphics), very small size
• Disadvantages: not suitable for photos
• Example: pyramid icon, map of Egypt

WebP (Google format)

• Best for: replacing JPG and PNG on web pages
• Advantages: smaller size than JPG and PNG at the same quality, supports transparency
• Disadvantages: older browsers may not support it
• Example: optimized photos on a modern website

<figure> and <figcaption> - Image with Caption

In an Egyptian museum, every exhibit has a label with a description. In HTML, you can do the same with the <figure> and <figcaption> tags:

1<figure>
2  <img src="tutankhamun-mask.jpg" alt="Golden mask of Tutankhamun" width="400">
3  <figcaption>Golden funerary mask of Tutankhamun, c. 1323 BCE.</figcaption>
4</figure>

The <figure> tag wraps the image (or other multimedia content), and <figcaption> adds a caption. This approach is semantic - the browser and screen readers know that the caption refers to the image.

You can place multiple images in one <figure>:

1<figure>
2  <img src="pyramid-cheops.jpg" alt="Pyramid of Cheops" width="300">
3  <img src="pyramid-khafre.jpg" alt="Pyramid of Khafre" width="300">
4  <figcaption>Two of the three great pyramids of Giza</figcaption>
5</figure>

Best Practices - Mohamed's Advice

Mohamed shares his wisdom about images in HTML:

1. Always use the alt attribute - even if the image is decorative (then alt="")
2. Specify dimensions width and height - prevents page "jumping"
3. Choose the right format - JPG for photos, PNG for transparency, SVG for icons
4. Optimize file sizes - large images slow down page loading
5. Use <figure> with <figcaption> - when an image needs a caption

Summary

Images are an integral part of web pages - just as paintings were an integral part of Egyptian temples. Remember the most important rules:

• The <img> tag with src and alt attributes (both required!)
• Formats: JPG (photos), PNG (transparency), GIF (animations), SVG (vectors), WebP (modern)
• <figure> + <figcaption> for images with captions
• Always optimize images and specify dimensions

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Images in HTML</title>
6</head>
7<body>
8    <h1>Gallery of Ancient Egypt</h1>
9
10    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg"
11         alt="Pyramid of Cheops in Giza"
12         width="400">
13
14    <figure>
15        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Sphinx_of_Giza_9059.jpg/500px-Sphinx_of_Giza_9059.jpg"
16             alt="Great Sphinx of Giza"
17             width="400">
18        <figcaption>Great Sphinx - guardian of the pyramids in Giza</figcaption>
19    </figure>
20
21    <h2>Image formats</h2>
22    <ul>
23        <li><strong>JPG</strong> - photos</li>
24        <li><strong>PNG</strong> - transparency</li>
25        <li><strong>SVG</strong> - vector graphics</li>
26        <li><strong>WebP</strong> - modern format</li>
27    </ul>
28</body>
29</html>