CHAPTER 1: EPISODE 4

Adding Images

Make your websites come alive with pictures!

Welcome to Episode 4!

In our previous episode, we learned how to add headings and paragraphs to our HTML pages. Today, we're taking our websites to the next level by adding images!

Images make websites more engaging, help explain concepts, and break up large blocks of text. In this lesson, you'll learn:

  • How to use the <img> tag
  • How to set the src attribute to display your images
  • Why the alt attribute is important
  • Best practices for using images on your webpages

Let's see what the McTweak team has to say about adding images to websites!

The McTweak Team Discusses Images

TrashyMcTweak

TRASHY

[horrified]

WHAT IS THIS MONSTROSITY?! It's like stepping back into the digital STONE AGE! Text, text, and MORE TEXT! My visual processors are DYING of boredom!

AllyMcTweak

ALLY

[walking in, coffee in hand]

Not everyone needs flashy graphics and animations that cause seizures, Trashy. Some websites are content-focused.

TrashyMcTweak

TRASHY

[clutching chest dramatically]

A website without images is like a pizza without cheese! A dog without fur! A Trashy without OPINIONS! It's FUNDAMENTALLY WRONG!

FattyMcTweak

FATTY

[rolling in on his premium ergonomic chair]

For once, I agree with the chaos demon. Studies show that premium visual content increases user engagement by 647%. I made that number up, but it sounds correct.

AllyMcTweak

ALLY

[sighs]

Fine. But we're teaching beginners here. Let's keep it simple with basic image tags.

TrashyMcTweak

TRASHY

[horrified gasp]

"SIMPLE"?! Did you just say "SIMPLE"?! I was thinking animated 3D renders with parallax effects and maybe some WebGL particle systems that—

GrumpyMcTweak

GRUMPY

[appearing suddenly from nowhere]

ABSOLUTELY NOT! Every image is a potential SECURITY VULNERABILITY! Have you IDIOTS ever heard of steganography? Or XSS attacks through SVG? Or—

AshleyMcTweak

ASHLEY

[cutting in]

Let's all calm down. We're talking about kids adding images of puppies and unicorns to their bio pages, not deploying the Pentagon's security infrastructure.

GrumpyMcTweak

GRUMPY

[muttering]

That's exactly what they WANT you to think...

[CODY has been quietly working in the corner and raises his hand tentatively]

CodyMcTweak

CODY

Um, I wrote a basic example with the <img> tag. It's nothing fancy, but maybe it would help the students get started?

[Everyone turns to look at his screen]

TrashyMcTweak

TRASHY

[zooming over]

Let me see this digital catastrophe— Oh, wait. This is actually... not terrible?

AllyMcTweak

ALLY

[impressed]

It's clean, correctly formatted, and shows exactly what they need to learn. Good job, Cody!

The <img> Tag

The <img> tag is used to add images to your HTML pages. Unlike most HTML tags, the <img> tag does not have a closing tag - it's what we call a "self-closing" tag.

<img src="image-filename.jpg" alt="Description of the image">

Let's break down the key parts of the <img> tag:

The src Attribute

This tells the browser where to find the image file. The value should be the path to your image file. This can be:

  • A file in the same folder: src="puppy.jpg"
  • A file in a subfolder: src="images/puppy.jpg"
  • An image from another website: src="https://example.com/puppy.jpg"

The alt Attribute

This provides a text description of the image that is used when:

  • The image cannot be loaded
  • Someone is using a screen reader due to visual impairment
  • Search engines are indexing your page

Always include descriptive alt text for accessibility!

FattyMcTweak

FATTY

[adjusting his virtual monocle]

Well, I could have made it 300% more premium with my additional resources, but... yes, this will suffice for now.

CodyMcTweak

CODY

[beaming]

Thanks! I also included information about the 'alt' attribute for accessibility and—

TrashyMcTweak

TRASHY

[interrupting]

BOOOORING! Where's the animation? The pizzazz? The SOUL?!

Complete Image Example

Let's look at a complete example of how to add an image to your HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Bio Page</title>
</head>
<body>
    <h1>About Me</h1>
    
    <!-- Adding an image of myself -->
    <img src="my-photo.jpg" alt="A photo of me smiling at the camera">
    
    <p>Hello! My name is Alex and I love coding.</p>
</body>
</html>

Here's what this would look like in a browser:

About Me

[Image placeholder]

Hello! My name is Alex and I love coding.

GarbageMcTweak

GARBAGE

[appearing suddenly in the doorway]

The "soul" of an image tag isn't in effects. It's in serving the right image, at the right size, with the right description, for the right purpose.

[Everyone falls silent]

GarbageMcTweak

GARBAGE

[walking over to inspect Cody's code]

Hmm. Proper syntax. Alt text included. Dimensions specified. File size consideration noted. [nods approvingly] Sometimes the most elegant solutions are the simplest ones.

Additional Image Attributes

Besides src and alt, there are other attributes you can add to your image tag:

Size Attributes

Control the size of your image:

  • width: Sets the width in pixels
  • height: Sets the height in pixels
<img src="cat.jpg" alt="A cute cat" width="300" height="200">

Other Useful Attributes

These can help with loading and organization:

  • loading="lazy": Loads images only when they're about to be visible
  • title: Shows a tooltip when hovering over the image
<img src="landscape.jpg" alt="Mountain view" loading="lazy" title="Beautiful mountains">

Pro Tip

Always specify both width and height attributes for images. This helps the browser reserve the right amount of space even before the image loads, preventing layout shifts that can be annoying to users.

TrashyMcTweak

TRASHY

[whispers dramatically to ALLY]

Did GARBAGE just compliment CODY? Check if pigs are flying or if the apocalypse started while we weren't looking!

AllyMcTweak

ALLY

[whispers back]

Maybe Garbage is sick? Or possessed? Should we call an exorcist?

GarbageMcTweak

GARBAGE

[without turning around]

I can hear you both.

[TRASHY and ALLY freeze]

GarbageMcTweak

GARBAGE

Show the students how to add basic images first. Then teach them to optimize those images. THEN you can talk about your fancy effects, Trashy—but only after they understand the fundamentals.

Interactive Image Example

Try changing the attributes below to see how they affect the image:

Snowzie the Elkhound

Try These:

  • Change the width to 300
  • Change the alt text to something else
  • Add title="Hover over me!" and hover your mouse over the image
  • Try using a different character's image URL

Image Best Practices

Do's:

  • Use descriptive alt text for accessibility
  • Optimize images for web (reduce file size)
  • Use appropriate image dimensions
  • Use loading="lazy" for images below the fold
  • Use logical, descriptive file names

Don'ts:

  • Skip the alt attribute
  • Use extremely large image files
  • Display images at the wrong aspect ratio
  • Use images for text content
  • Hotlink images from other websites without permission
SnowzieMcTweak

SNOWZIE

[trots in, sniffing curiously at the screen]

Woof! Picture good? Show Snowzie picture?

CodyMcTweak

CODY

[smiling]

That's right, Snowzie! Today we're learning how to add images to make our web pages more interesting!

SnowzieMcTweak

SNOWZIE

Code with pictures! Much better! Show Snowzie ALL pictures!

TrashyMcTweak

TRASHY

[to audience]

You heard the boss! Let's make these web pages less boring and add some IMAGES! But first, let me tell you about this REVOLUTIONARY new image format I invented last night that combines JPEG, SVG, and interpretive dance—

EVERYONE ELSE

[in unison]

TRASHY, NO!

Activity: Add An Image To Your Bio Page

Now it's your turn! Let's add an image to the bio page you created in the previous episode.

Your Mission:

  1. Open your HTML bio page from Episode 3 (or create a new one if needed)
  2. Find an image that represents you - it could be:
    • A photo of yourself
    • A picture of something you love (pet, hobby, favorite place)
    • An avatar or character that represents you
  3. Save the image in the same folder as your HTML file
  4. Add an <img> tag to your page with the appropriate attributes
  5. Don't forget to include descriptive alt text!

Challenge Yourself:

  • Add multiple images to your page
  • Position your images in different places (before/after paragraphs)
  • Experiment with different width and height attributes
  • Add title attributes for tooltips when hovering over images

Summary

In this episode, you've learned:

  • How to use the <img> tag to add images to your HTML pages
  • The importance of the src attribute for specifying the image location
  • Why the alt attribute is essential for accessibility
  • Additional attributes like width, height, and title
  • Best practices for using images on the web

Next Episode Preview

Coming up in Episode 5, we'll learn about creating links with the <a> tag so you can connect your webpage to other pages on the web!

CODE IS COMMITTED!

Previous Episode Home Next Episode