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