InnoMarts logo
InnoMarts
Fast websites
← Back to course

Images and Media

Images and Media

Welcome back.

In the previous lesson, you learned how to connect pages with links and navigation.

Now we add images.

Because text is powerful.

But sometimes one image can explain something faster than five paragraphs and one emotional crisis.

Images make pages more visual, more personal, and easier to understand.

But they must be added correctly.

Otherwise the browser shows a broken image icon.

And that little icon is the browser’s way of saying:

“I tried, but you gave me chaos.”

What You’ll Learn

In this lesson, you’ll learn:

The img Element

Images are added with the img element.

Example:

<img src="cat.jpg" alt="A cute cat sitting on a chair">

The img tag does not need a closing tag.

This is not needed:

</img>

The image element usually has two very important attributes:

Small attributes.

Big consequences.

Like forgetting one screw while building a chair.

The src Attribute

The src attribute tells the browser where the image file is.

Example:

<img src="photo.jpg" alt="A mountain landscape">

This means:

Find the file photo.jpg and show it here.

If the image is in the same folder as your HTML file, this works:

project/
  index.html
  photo.jpg

HTML:

<img src="photo.jpg" alt="A mountain landscape">

Simple.

Clean.

No drama.

A rare moment in web development.

Images in Folders

Usually images are stored in a folder.

Example:

project/
  index.html
  images/
    profile.jpg

To show profile.jpg, write:

<img src="images/profile.jpg" alt="Portrait of a person">

The path must match the real location of the image.

If the folder is called images, do not write image.

If the file is called profile.jpg, do not write Profile.jpg.

Computers are strict.

They can run millions of operations per second but still get offended by one capital letter.

The alt Attribute

The alt attribute gives alternative text for the image.

Example:

<img src="dog.jpg" alt="A brown dog playing in the park">

The alt text is used when:

Good alt text describes the meaning of the image.

Not just the file name.

Bad:

<img src="dog.jpg" alt="dog">

Better:

<img src="dog.jpg" alt="A brown dog playing in the park">

Good alt text is not decoration.

It is accessibility.

And accessibility is not optional if you want to build decent websites.

Decorative Images

Sometimes an image is only decorative.

For example, a background pattern or a small visual ornament.

In that case, you can use an empty alt:

<img src="decoration.png" alt="">

This tells screen readers:

This image is decorative. You can skip it.

But be careful.

Do not use empty alt for meaningful images.

If the image gives information, describe it.

If the image is just visual decoration, empty alt is acceptable.

HTML is simple.

But it expects honesty.

Width and Height

You can set image width and height:

<img src="profile.jpg" alt="Portrait of a person" width="300" height="300">

This tells the browser the image size.

It can help the page layout load more smoothly.

But do not randomly stretch images.

This can make people look like they were attacked by a printer.

If the original image is square, use square dimensions.

If the original image is wide, use wide dimensions.

Respect the image.

The image has feelings.

Probably not.

But still.

Create an Image Practice Page

Create a new file:

touch images.html

Create an images folder:

mkdir images

Put an image inside the folder and name it:

profile.jpg

Now write this in images.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Images Practice</title>
</head>
<body>
  <h1>Images Practice</h1>

  <p>This page shows how to add an image in HTML.</p>

  <img src="images/profile.jpg" alt="Profile photo for the practice page" width="300">

  <p>The image above is loaded from the images folder.</p>
</body>
</html>

Open the file in your browser.

If the image appears, excellent.

If not, check the path.

The browser is not angry.

It is just lost.

Common Image Formats

Common image formats include:

Use .jpg for photos.

Use .png when you need transparency or sharp graphics.

Use .webp for modern optimized images.

Use .svg for logos and icons when possible.

Use .gif carefully.

One animated gif can be funny.

Twenty animated gifs can turn your website into a digital circus.

Image File Names

Use simple file names.

Good:

profile.jpg
hero-image.webp
course-cover.png

Bad:

My Final Image NEW VERSION 222!!!.jpg
photo from phone (copy).jpeg
IMG_20240318_174433.jpg

Simple names are easier to use.

Use lowercase letters.

Use hyphens instead of spaces.

Example:

my-profile-photo.jpg

Not:

my profile photo.jpg

Spaces in file names can cause annoying problems.

And we already have enough annoying problems.

The internet provides them daily.

External Images

You can also use an image from another website:

<img src="https://example.com/photo.jpg" alt="Example image">

But be careful.

External images may disappear.

The other website may block them.

They may load slowly.

For your own website, it is usually better to store images in your project.

Your files.

Your control.

Your tiny kingdom.

Images and Links

An image can also be inside a link.

Example:

<a href="about.html">
  <img src="images/profile.jpg" alt="Go to the about page" width="200">
</a>

Now the image is clickable.

This is useful for logos, cards, galleries, and visual navigation.

But the alt text should describe the link purpose.

Not only the image.

If clicking the image goes to the about page, the alt text should help explain that.

Figure and Figcaption

HTML has figure and figcaption for images with captions.

Example:

<figure>
  <img src="images/mountain.jpg" alt="A mountain landscape at sunrise" width="500">
  <figcaption>A mountain landscape at sunrise.</figcaption>
</figure>

Use this when the image needs a visible caption.

The alt text helps accessibility.

The figcaption gives a visible explanation to everyone.

They are related.

But not the same thing.

Basic Media: Audio and Video

HTML can also show audio and video.

Audio example:

<audio controls>
  <source src="audio/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Video example:

<video controls width="500">
  <source src="videos/demo.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

The controls attribute shows play, pause, and volume controls.

Without controls, users may not be able to control the media.

And nobody likes a website that starts behaving like a radio possessed by a ghost.

Common Mistakes

Wrong Image Path

If the file is here:

images/profile.jpg

Do not write:

<img src="profile.jpg" alt="Profile photo">

Use:

<img src="images/profile.jpg" alt="Profile photo">

The path must match the file location.

Missing alt

This is bad:

<img src="profile.jpg">

Better:

<img src="profile.jpg" alt="Profile photo of the website owner">

Always think about alt.

Even if the text is empty for decorative images.

Huge Images

Do not upload giant images without thinking.

A 10 MB photo can make a page slow.

Slow websites are painful.

Users do not wait.

They leave.

Like cats when you try to explain JavaScript.

Practice

Create a page called:

gallery.html

It should include:

Use an images folder.

Keep file names simple.

No CSS.

No JavaScript.

Just clean HTML.

Mini Challenge

Create a simple personal page with:

Use meaningful alt text.

Do not write alt="image".

That is not useful.

That is the HTML version of shrugging.

Summary

Today you learned:

Images make websites more alive.

But only when they are used correctly.

A good image supports the content.

A bad image just sits there like a confused potato.

Next Lesson

In the next lesson, we’ll learn tables.

Tables are not for layout.

Tables are for data.

Very important.

Very often abused.

We will be strict.