Inserting and Configuring Images with the `<img>` Tag

The <img> Tag: Embedding Images

To place an image on a web page, we use the <img> tag. Unlike tags like <p> or <h1> that have opening and closing parts, the <img> tag is a void element (or self-closing tag). This means it doesn't wrap around content and doesn't need a closing tag. All the information the browser needs is provided through attributes within the tag itself.

The most crucial attribute is src, which stands for source. Its value is the path or URL to the image file you want to display.

<img src="path/to/your/image.jpg">

This src attribute works just like the href attribute you learned about for links. It can be an absolute URL to an image hosted on another website, or a relative path to an image file stored alongside your HTML files.

Organizing Your Project Files

As you start adding more assets like images to your website, your project folder can get cluttered. A standard practice is to create a dedicated folder for your images, often named images or assets.

When you do this, you must update the src path to include the folder name. If your index.html file is in the main project folder, and you have an image named flower.jpg inside an images subfolder, your tag would look like this:

<img src="images/flower.jpg">

This tells the browser to look inside the images folder to find flower.jpg.

Let's watch a quick video that demonstrates how to create an image folder and adjust the src path.

The alt Attribute: Accessibility and Fallbacks

What happens if an image can't be displayed? Maybe the path is wrong, the file is corrupted, or the user is on a very slow connection. What about users who are visually impaired and use screen readers to browse the web?

This is where the alt attribute comes in. It provides alternative text that serves two main purposes:

1. It's displayed on the page if the image fails to load.
2. It's read aloud by screen readers, describing the image to users who cannot see it.

Providing descriptive alt text is one of the most important principles of web accessibility. It ensures that all users, regardless of ability, can access the information on your page.

<img src="images/dog.jpg" alt="A golden retriever puppy playing in a field of grass.">

A good alt text describes the content and function of the image. If the image is purely decorative, the alt attribute should still be present but left empty (alt="").

The following video includes a great demonstration of a screen reader announcing the alt text, making its importance very clear.

Sizing Images with width and height

By default, an image will be displayed at its original size, which might be far too large for your page layout. You can control its dimensions using the width and height attributes. These values are specified in pixels, but you should only include the number, not the "px" unit.

A crucial reason to set width and height is to prevent layout shift. When you specify the dimensions, the browser reserves that space on the page while the image loads. Without them, the browser only finds out the image's size after it downloads, causing the text and other elements to suddenly jump around to make room. This creates a jarring user experience.

A quick note: While you can use these attributes to make an image smaller, you should avoid using them to drastically shrink a very large image file. The browser still has to download the full, large file, which wastes bandwidth and slows down your page. The best practice is to resize your images to be close to the intended display size before uploading them.

Practice: Putting it all together

Now it's time to try it yourself. The best way to learn is by doing.

First, I recommend going through this interactive exercise provided by MDN. It allows you to practice all the attributes we've discussed in a live code editor.

Next, apply this to your own project!

1. Find an image you'd like to add to one of your HTML pages. You can use a personal photo or find a royalty-free image from a site like Pexels or Unsplash.
2. In your project folder, create a new folder named images.
3. Save the image inside this new images folder. Give it a simple, descriptive filename (e.g., mountain-sunset.jpg).
4. Open one of your HTML files and add an <img> tag. Set the src, alt, width, and height attributes. Remember to use the correct relative path!

###Bonus: Making an Image a Link

In the last lesson, you learned to create links with the <a> tag. You can combine that knowledge with what you've learned today to make an image clickable. To do this, you simply wrap the <img> tag inside an <a> tag.

<a href="page2.html">
  <img src="images/next-page-icon.png" alt="An arrow pointing right, linking to the next page." width="50" height="50">
</a>

Now, clicking the image will take the user to page2.html. This is a very common pattern used all over the web.

Conclusion

You can now bring your web pages to life with visual content! You have learned not only how to display an image, but how to do it in a way that is accessible, performant, and well-organized.

Key Takeaways:

• Use the <img> tag to embed images.
• The src attribute is required and points to the image file's location.
• Organize your images in a dedicated folder (like images) and use relative paths.
• The alt attribute is essential for accessibility and as a fallback.
• Setting width and height attributes prevents layout shift and improves user experience.
• You can make an image a link by wrapping the <img> tag in an <a> tag.

In our next lesson, we will explore another fundamental tool for structuring content: lists. You'll learn how to create ordered (numbered) and unordered (bulleted) lists, which are perfect for organizing information from navigation menus to product features.