HTML Images

In previous lessons, you’ve learned about HTML Links and Navigation. Now we will learn about how to add images to your web page.

🖼️ The Image Element

The <img> tag is used to insert images in your webpage. Unlike other HTML elements, img tag is self-closing we do not need to add a closing tag like </img>.

🏗️ img tag Syntax

<img src="path/to/image.jpg" alt="Description of the image">

• src = Source - the path to your image file
• alt = Alternative text - text that display if the image cannot be loaded

🌟 Your First Image

<img src="FreecodingSchool.jpg" alt="Freecoding School is a free coding school for everyone">

this will display the image FreecodingSchool.jpg with the alt text “Freecoding School is a free coding school for everyone” as below:

When images are not available, the alt text will be displayed instead. For example, if image FreecodingSchool.jpg is not found, the text “Freecoding School is a free coding school for everyone” will be shown as below:

📁 Image File Paths

Providing the correct path to your image file is very important. There are two main types of paths you can use:

1. Relative Paths - its path from the current file location
2. Absolute URLs - its full URL from the root of the website or an external website

🏠 Relative Paths (Images in Your Project)

Relative paths are used when your images are stored in the same project folder or subfolders.

We have to understand how we can go up or down the folder structure to find the correct image file. Here are some examples:

1. Same Folder: If your image is in the same folder as your HTML file, you can just use the image name.
2. Subfolder: If your image is in a subfolder, you need to include the subfolder name in the path.
3. Parent Folder: If your image is in a parent folder, you can use ../ to go up one level in the folder structure.
4. Subfolder of Parent Folder: You can combine ../ with the subfolder name to access images in a subfolder of the parent folder.

🏠 Relative Path Examples

<!-- Image in the same folder as your HTML file -->
<img src="photo.jpg" alt="My photo">

<!-- Image in a subfolder -->
<img src="images/photo.jpg" alt="My photo">

<!-- Image in a parent folder -->
<img src="../photo.jpg" alt="My photo">

<!-- Image in a subfolder of parent folder -->
<img src="../images/photo.jpg" alt="My photo">

🌐 Absolute URLs (Images from Other Websites)

Absolute URLs are taken from the root of the website. They start with / and after that the complete path to the the image file.

Like if we have image photo.jpg in the root of our website, we can use the following absolute URL:

1. Root Image: If the image is in the root folder of your website, you can use a path starting with /.
2. Nested Folder: If the image is in a nested folder, you can specify the full path from the root.
3. External Image: If the image is hosted on another website, you can use the full URL.

<!-- Image in the root of your website -->
<img src="/photo.jpg" alt="External photo">

<!-- Image in a nested folder -->
<img src="/images/folder1/photo.jpg" alt="External photo">

<!-- External image from another website -->
<img src="https://example.com/images/photo.jpg" alt="External photo">

📂 Recommended Folder Structure

Its a good practice to organize your images in a separate folder within your project.

my-website/
│
├── index.html
├── about.html
├── contact.html
│
└── images/
    ├── logo.png
    ├── hero-banner.jpg
    ├── team/
    │   ├── john.jpg
    │   └── sarah.jpg
    └── products/
        ├── product1.jpg
        └── product2.jpg

🎨 img Tag Attributes

The <img> tag has several attributes that help you control how images are displayed in browser like:

📏 Controlling Image Size

We can use width and height attributes to control the size of the image. There are some things to keep in mind:

<!-- Set specific dimensions -->
<img src="photo.jpg" alt="My photo" width="300" height="200">

<!-- Set only width (height adjusts proportionally) -->
<img src="photo.jpg" alt="My photo" width="300">

<!-- Set only height (width adjusts proportionally) -->
<img src="photo.jpg" alt="My photo" height="200">

⚡ Lazy Loading for Performance

Sometimes, we may want to load images once the user scrolls to them, instead of loading all images at once when the page loads. This can speed up page loading times, especially for pages with many images.

<!-- Load image only when user scrolls near it -->
<img src="large-image.jpg" alt="Description" loading="lazy">

🎯 Writing Great Alt Text

We have to remember that Alt text is very important for accessibility and SEO. Here’s how to write it well:

✅ Good Alt Text Examples:

<!-- Descriptive and specific -->
<img src="golden-retriever.jpg" alt="Golden retriever playing fetch in a sunny park">

<!-- For decorative images, use empty alt -->
<img src="decorative-border.png" alt="">

<!-- For functional images (like buttons) -->
<img src="search-icon.png" alt="Search">

<!-- For informational images -->
<img src="sales-chart.png" alt="Sales increased 25% from January to March 2024">

❌ Poor Alt Text Examples:

<!-- Too vague -->
<img src="dog.jpg" alt="dog">

<!-- Redundant -->
<img src="photo.jpg" alt="Photo of a dog">

<!-- Too long -->
<img src="dog.jpg" alt="This is a photo I took last summer of my golden retriever named Max who loves playing fetch and swimming in the lake near our house">

🖼️ Common Image Formats

There are different image formats that work best for different purposes:

📱 Responsive Images

This is very important concept in modern web development. We should always make sure that the images that we want to display on our website looks good on all devices like for phones it should not be too big and for desktops it should not be too small.

🎯 Basic Responsive Image

To make an image responsive, we can set its width to 100% and height to auto in style. This will make the image only take the width of its parent container and adjust its height automatically to maintain the aspect ratio.

<img src="photo.jpg" alt="Description" style="max-width: 100%; height: auto;">

🖼️ Different Images for Different Screen Sizes

We can use the <picture> element to provide different images for different screen sizes. Based on the device’s screen width, the browser will choose the correct image and display it.

Here is an example of how we can use the <picture> element to provide different images for different screen sizes:

<picture>
    <source media="(max-width: 600px)" srcset="small-image.jpg">
    <source media="(max-width: 1200px)" srcset="medium-image.jpg">
    <img src="large-image.jpg" alt="Responsive image">
</picture>

As you can see we have used the <source> tag along with the media attribute to make browser display image based on the screen size. Like if the screen width is less than or equal to 600px, it will display small-image.jpg, if the screen width is less than or equal to 1200px, it will display medium-image.jpg, and for larger screens, it will display large-image.jpg.

🎮 Try It Yourself!

We have learned a lot about images in HTML. Now it’s time we use our knowledge.

1. Make a travel blog post featuring:
   • Multiple photos with descriptive captions
   • A short video tour
   • Audio narration or local music

🎊 What You’ve Mastered

Fantastic work! You now know how to:

• ✅ Add images with proper src and alt attributes
• ✅ Organize images with folder structures
• ✅ Create responsive images for different devices
• ✅ Write accessible alt text for all users
• ✅ Optimize images for performance
• ✅ Use different media formats appropriately

🚀 What’s Next?

In our next lesson, we’ll look into HTML Tables - learn how to organize and display data in rows and columns.