HTML Images: From Basics to Responsive Pictures

Before we start, let's make sure you understand a few ideas that this lesson builds on.

What is an HTML Tag?

An HTML tag is a special keyword wrapped in angle brackets that tells the browser how to display content. For example:

<p>This is a paragraph.</p>

• <p> is the opening tag
• </p> is the closing tag
• Some tags are self-closing · they have no content inside them and no closing tag. The <img> tag is one of these.

What is an Attribute?

An attribute gives extra information about a tag. It lives inside the opening tag and follows a name="value" pattern.

<img src="photo.jpg" alt="A lovely photo">

Here, src and alt are attributes of the <img> tag.

What is a URL / File Path?

A URL (Uniform Resource Locator) is the address of a file on the internet or on your computer. For example:

• photo.jpg · a file in the same folder as your HTML file
• images/photo.jpg · a file inside a sub-folder called images
• https://example.com/photo.jpg · an image on a different website

What Is the <img> Tag?

The <img> tag is how you embed (place) an image inside a web page. It is a self-closing tag · meaning it has no closing </img> tag. It only contains attributes.

Think of it like this: the <img> tag doesn't actually put an image inside the HTML code. Instead, it creates a reserved space on the page and tells the browser: "Go fetch the image from this location and display it here."

Syntax:

<img src="url" alt="alternate text">

Let's break down each part:

The src Attribute · Where Is Your Image?

The src attribute tells the browser where to find the image. It is required · without it, there is no image to show.

Important: When a browser loads a web page, it separately goes out and fetches each image. If the image file has been moved, renamed, or deleted, the browser cannot find it and will show a broken image icon instead.

Example 1 · Image in the same folder:

<img src="cat.jpg" alt="A cute cat">

Expected result: A photo of a cat appears on the page.

Example 2 · Image in a sub-folder:

<img src="images/cat.jpg" alt="A cute cat">

Expected result: The browser looks inside a folder named images to find cat.jpg.

Example 3 · Image from another website (absolute URL):

<img src="https://www.example.com/photos/cat.jpg" alt="A cat from the internet">

Expected result: The browser fetches the image from the other website.

Warning about external images: External images may be protected by copyright. Also, you have no control over them · they could be removed or changed at any time. Use external images only when you have permission.

The alt Attribute · Always Include It!

The alt attribute provides a text description of the image. It serves two critical purposes:

1. If the image fails to load (wrong path, slow internet, etc.), the alt text is shown instead.
2. For screen readers · people who are visually impaired use software that reads web pages aloud. The screen reader reads the alt text so those users know what the image shows.

Screen Reader: A screen reader is a program that converts web page content into spoken audio. It reads the HTML code, including alt text, so that visually impaired users can "hear" the content of a page. This makes alt attributes essential for web accessibility.

Example · Image loads correctly:

<img src="sunset.jpg" alt="A beautiful orange and purple sunset over the ocean">

Expected result: The sunset photo appears on screen.

Example · Image fails to load (wrong filename):

<img src="sunse.jpg" alt="A beautiful orange and purple sunset over the ocean">

Expected result on screen:

A beautiful orange and purple sunset over the ocean

The browser cannot find sunse.jpg, so it displays the alt text instead.

Thinking prompt: What would happen if you left the alt attribute empty, like alt=""? Screen reader users would hear nothing · the image would be invisible to them. Always write a meaningful description!

Controlling Image Size: width and height

By default, an image is displayed at its original size. You can resize it using:

Method 1 · The style attribute (recommended):

<img src="dog.jpg" alt="A golden retriever" style="width:300px; height:200px;">

Method 2 · The width and height attributes:

<img src="dog.jpg" alt="A golden retriever" width="300" height="200">

Both methods display the same result · an image that is 300 pixels wide and 200 pixels tall.

What is a pixel? A pixel (px) is the smallest unit of display on a screen. A typical laptop screen is about 1920 pixels wide and 1080 pixels tall. When you set width:300px, the image occupies 300 of those tiny units across.

Why use style instead of width/height attributes?

If you use a CSS stylesheet that says img { width: 100%; }, it will override your width and height attributes, making your images stretch unexpectedly. The style attribute is more specific and will not be overridden by external stylesheets.

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      width: 100%;  <!-- This affects BOTH images below -->
    }
  </style>
</head>
<body>
  <!-- This image WILL be stretched to 100% because the stylesheet overrides width attribute -->
  <img src="logo.gif" alt="Logo" width="128" height="128">

  <!-- This image WON'T be stretched because inline style takes priority -->
  <img src="logo.gif" alt="Logo" style="width:128px; height:128px;">
</body>
</html>

Expected result: The first image stretches to fill the page width. The second image stays exactly 128×128 pixels.

Images in Sub-Folders

If your images are stored in a separate folder (good practice for keeping projects organised), you include the folder name in the path:

<img src="/images/header.gif" alt="Website Header" style="width:128px; height:128px;">

Here /images/ is the folder name and header.gif is the file name.

Animated Images (GIFs)

HTML supports animated GIF files · images that play like short looping animations. You use them the same way as any other image:

<img src="loading-spinner.gif" alt="Loading animation" style="width:48px; height:48px;">

Expected result: A spinning animation appears on screen.

GIFs are commonly used for loading indicators, simple animations, and internet memes!

Using an Image as a Link

You can wrap an <img> tag inside an <a> tag to make an image clickable · clicking it takes the user to another page:

<a href="https://www.example.com">
  <img src="banner.jpg" alt="Click here to visit Example.com" style="width:200px; height:80px;">
</a>

Expected result: The banner image is displayed, and clicking on it navigates to example.com.

Analogy: Think of this like a clickable picture in a magazine. Instead of just looking at the image, you can tap it to go somewhere new.

Image Floating · Wrapping Text Around an Image

The CSS float property lets you position an image to the left or right of a text block, so the text flows around it · like you see in newspaper layouts.

Float image to the right:

<p>
  <img src="smiley.gif" alt="Smiley face" style="float:right; width:60px; height:60px;">
  This is a paragraph of text. The image floats to the right side of this paragraph,
  and the text wraps around it on the left side.
</p>

Expected result: The smiley icon appears on the right side of the paragraph, and the text sits to its left.

Float image to the left:

<p>
  <img src="smiley.gif" alt="Smiley face" style="float:left; width:60px; height:60px;">
  This paragraph has an image floating to its left side. The text wraps on the right.
</p>

Expected result: The smiley icon appears on the left, and the text flows to its right.

Common Image File Formats

Different image formats are suited for different purposes. All modern browsers support these:

Practical tip: For web pages, JPEG is great for photos (smaller file size), PNG is great for logos or anything with a transparent background, and SVG is ideal for icons that need to look sharp at any size.

Note: Loading large images takes time and can slow down your web page. Always use appropriately sized images!

Image Tags Quick Reference

✏️ Your Task

`html ` Here /images/ is the folder name and header.gif is the file name. ·

What Is an Image Map?

An image map is an image with multiple clickable zones. Each zone takes the user to a different destination · or triggers a different action · when clicked.

Real-world example: Imagine a map of Africa. You click on Nigeria and go to a page about Nigeria. You click on Ghana and go to a page about Ghana. Each country is a different clickable zone on the same image.

The Three Tags You Need

To build an image map, you need three things working together:

1. <img> · the image itself, with a special usemap attribute
2. <map> · a container that defines the clickable zones
3. <area> · one or more elements that define each clickable zone

Step 1: The Image with usemap

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

• src="workplace.jpg" · loads the image as usual
• usemap="#workmap" · connects this image to a map named workmap

- The # sign means "look for something with this name on the same page"

Step 2: The <map> Element

<map name="workmap">
  <!-- clickable areas go here -->
</map>

• name="workmap" · must exactly match the usemap value (without the #)
• Everything inside <map> defines the clickable zones

Step 3: The <area> Elements · Defining Clickable Zones

Each <area> element defines one clickable zone. You must specify:

• shape · what shape the clickable zone is
• coords · the coordinates (pixel positions) that define where the zone is
• href · where to go when the zone is clicked
• alt · description of the area (for accessibility)

Shape 1: Rectangle (shape="rect")

A rectangle needs two corner points: the top-left corner and the bottom-right corner. Each point is given as x,y (horizontal pixels from the left, vertical pixels from the top).

<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

Breaking this down:

• shape="rect" · rectangular clickable zone
• coords="34,44,270,350" · means:

- Top-left corner: 34px from left edge, 44px from top edge - Bottom-right corner: 270px from left edge, 350px from top edge

• alt="Computer" · description
• href="computer.htm" · destination when clicked

Expected result: A rectangular clickable zone appears over the computer part of the image.

Shape 2: Circle (shape="circle")

A circle needs a centre point and a radius (how big the circle is).

<area shape="circle" coords="337,300,44" alt="Coffee Cup" href="coffee.htm">

Breaking this down:

• shape="circle" · circular clickable zone
• coords="337,300,44" · means:

- Centre point: 337px from left, 300px from top - Radius: 44 pixels (the circle extends 44px in all directions from the centre)

• href="coffee.htm" · destination when clicked

Expected result: A circular clickable zone appears over the coffee cup in the image.

Shape 3: Polygon (shape="poly")

A polygon lets you define any shape using a series of connected points. This is useful for irregular shapes like countries on a map, or a croissant!

<area shape="poly"
  coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147"
  alt="Croissant" href="croissant.htm">

Breaking this down:

• shape="poly" · polygon (any shape with straight sides)
• coords · a list of x,y pairs that form the outline of the shape. Each pair is a corner of the polygon

- 140,121 → first point (140px right, 121px down) - 181,116 → second point - 204,160 → third point - ...and so on, connecting the dots to form the shape

• href="croissant.htm" · destination

Expected result: A custom-shaped clickable zone precisely outlines the croissant.

Shape 4: Default (shape="default")

The default shape makes the entire image clickable (as a fallback for any area not covered by other shapes):

<area shape="default" href="home.htm" alt="Go to homepage">

A Complete Image Map Example

Here is a full, working image map with three clickable zones:

<!-- The image — connected to the map by usemap="#workmap" -->
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<!-- The map — name matches usemap value (without #) -->
<map name="workmap">

  <!-- Rectangular area over the computer -->
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

  <!-- Rectangular area over the phone -->
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

  <!-- Circular area over the coffee cup -->
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">

</map>

Expected result:

• The workplace.jpg image is displayed normally
• Hovering over the computer area shows a hand cursor (indicating it's clickable)
• Clicking the computer area loads computer.htm
• Clicking the phone area loads phone.htm
• Clicking the coffee cup area loads coffee.htm

Image Maps and JavaScript

A clickable area can also run a JavaScript function instead of (or in addition to) loading a new page. Use the onclick attribute:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="showCoffeeAlert()">
</map>

<script>
function showCoffeeAlert() {
  alert("You clicked the coffee cup!");
}
</script>

Expected result: When the user clicks the coffee cup area, a pop-up alert box appears with the message "You clicked the coffee cup!" before navigating to coffee.htm.

What is JavaScript? JavaScript is a programming language that runs in the browser and makes web pages interactive. You don't need to know JavaScript to use this feature · just understand that onclick="functionName()" calls a function when something is clicked.

How to Find Coordinates for an Image Map

How do you know what coordinates to use? Here's a simple process:

1. Open the image in an image editing tool (like Paint, Photoshop, or GIMP)
2. Hover your mouse over the area you want to make clickable
3. The software shows the current x,y position of your cursor
4. Note down the coordinates of the corners (for rectangles) or the centre + radius (for circles)

Online tool: You can also search for "image map generator" online. These tools let you draw shapes on an image and automatically generate the coordinates for you.

What Is a Background Image?

A background image is an image placed behind the content of an HTML element, rather than as a visible image within the content. Think of it like the wallpaper behind the text and pictures on your computer desktop.

Background images are applied using CSS (specifically the background-image property), not with the <img> tag.

Background Image on a Single Element

You can add a background image to any HTML element using the style attribute:

<p style="background-image: url('forest.jpg');">
  This paragraph has a forest background image behind this text.
</p>

Expected result: The paragraph is displayed with the forest photo visible behind the text.

Or you can define it in a <style> block in the <head> of your document:

<head>
  <style>
    p {
      background-image: url('forest.jpg');
    }
  </style>
</head>
<body>
  <p>This paragraph has a forest background.</p>
</body>

Expected result: All <p> elements on the page will have the forest background image.

Background Image on the Entire Page

To give the whole page a background image, apply it to the <body> element:

<style>
  body {
    background-image: url('beach.jpg');
  }
</style>

Expected result: The beach photo fills the background of the entire webpage.

Background Repeat

By default, if the image is smaller than the element, it will automatically tile (repeat) · it copies itself horizontally and vertically until it fills the entire space. This is useful for textures and patterns, but can look messy with photographs.

Default repeating behaviour:

<style>
  body {
    background-image: url('small_pattern.jpg');
  }
</style>

Expected result: The small pattern image tiles across the entire page.

To stop repeating:

<style>
  body {
    background-image: url('photo.jpg');
    background-repeat: no-repeat;
  }
</style>

Expected result: The photo appears once in the top-left corner and does not repeat.

background-repeat values:

• repeat · default, tiles in both directions
• no-repeat · shows the image only once
• repeat-x · tiles only horizontally
• repeat-y · tiles only vertically

Background Cover · Fill the Entire Element

The most common professional technique is to make the image cover the entire element without repeating or distorting. Use background-size: cover:

<style>
  body {
    background-image: url('hero.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
</style>

Let's understand each line:

Expected result: The hero image fills the entire browser window, is fixed in place when you scroll, and maintains its proportions (no stretching or distortion).

Analogy: background-size: cover is like fitting a photo over your phone screen · it fills the entire screen and crops any overflow, but the photo isn't distorted.

Background Stretch · Stretch to Fit Exactly

If you want the image to stretch and fill the element exactly (including potentially distorting it), use background-size: 100% 100%:

<style>
  body {
    background-image: url('texture.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
  }
</style>

Expected result: The texture image is stretched to fill exactly 100% of the width and 100% of the height of the browser window. If you resize the browser, the image stretches with it.

Difference between cover and 100% 100%:

• cover · keeps proportions, crops if needed
• 100% 100% · stretches to fit, may distort the image

Background Image Summary

<!-- Background on a paragraph -->
<p style="background-image: url('pattern.jpg');">Text here</p>

<!-- Background on the entire page, no repeat, covering -->
<style>
  body {
    background-image: url('page_bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
</style>

The Problem: One Image Doesn't Fit All Screens

Think about this situation: You build a website with a beautiful wide landscape photo as your hero image · 1920 pixels wide. On a large desktop monitor, it looks stunning. But on a mobile phone, that 1920px image is:

• Far wider than the phone screen needs
• Much larger in file size than necessary (wastes mobile data)
• Possibly the wrong aspect ratio for a portrait phone screen

The solution is to serve different images to different devices. That's exactly what the <picture> element does!

What Is the <picture> Element?

The <picture> element is a container that holds multiple image source options. The browser looks through the options and picks the best match for the current device or screen size · then displays that one image.

Analogy: Think of a restaurant menu with a regular option and a kids' option. The waiter (browser) looks at who's asking and serves the appropriate version. The <picture> element is the menu; each <source> is a different option.

Basic Structure of <picture>

<picture>
  <source media="(min-width: 650px)" srcset="large_food.jpg">
  <source media="(min-width: 465px)" srcset="medium_car.jpg">
  <img src="small_girl.jpg" alt="A person standing outside">
</picture>

Let's break this down carefully:

<source> element:

• media="(min-width: 650px)" · a media condition: this source is used when the screen is at least 650 pixels wide
• srcset="large_food.jpg" · the image to load when the condition is true

<img> element (the fallback):

• This is the default image · always required
• It is used by browsers that don't support <picture>, or if none of the <source> conditions match
• Must always be the last child inside <picture>

How the browser makes its decision:

The browser reads through the <source> elements from top to bottom and uses the first one that matches. If nothing matches, it falls back to the <img> tag.

For our example:

• Screen is 800px wide → uses large_food.jpg (matches min-width: 650px)
• Screen is 500px wide → uses medium_car.jpg (matches min-width: 465px)
• Screen is 300px wide → uses small_girl.jpg (no conditions match, uses <img> fallback)

Why Use <picture>? Two Main Reasons

Reason 1: Bandwidth (Data Saving)

Loading a 2MB image on a mobile phone wastes data and makes the page slow. With <picture>, you can load a small lightweight image on mobile and a high-quality large image on desktop.

Example:

<picture>
  <!-- Desktop: load the full high-quality image -->
  <source media="(min-width: 1024px)" srcset="hero_desktop.jpg">

  <!-- Tablet: load a medium image -->
  <source media="(min-width: 600px)" srcset="hero_tablet.jpg">

  <!-- Mobile: load the smallest image (default fallback) -->
  <img src="hero_mobile.jpg" alt="Our company headquarters">
</picture>

Expected result:

• Desktop user (1024px+): sees hero_desktop.jpg
• Tablet user (600 · 1023px): sees hero_tablet.jpg
• Mobile user (under 600px): sees hero_mobile.jpg

Each user gets appropriately sized content without wasting bandwidth.

Reason 2: Format Support

Not every browser supports every image format. For example, some browsers may not support WebP (a modern, efficient format). With <picture>, you can offer the modern format first and fall back to a widely supported one:

<picture>
  <!-- Try to use WebP first (smaller file, better quality) -->
  <source srcset="photo.webp">

  <!-- Fall back to PNG if WebP isn't supported -->
  <source srcset="photo.png">

  <!-- Final fallback: GIF (supported everywhere) -->
  <img src="photo.gif" alt="A scenic mountain view" style="width:auto;">
</picture>

Expected result:

• Browsers that support WebP → use photo.webp
• Browsers that support PNG (but not WebP) → use photo.png
• Other browsers → use photo.gif

Note: The browser uses the first <source> it recognises and can support. Once a match is found, it ignores all the ones that follow.

The <picture> Element vs. The <img> Element

Mistake 1: Missing the alt Attribute

❌ Wrong:

<img src="photo.jpg">

✅ Correct:

<img src="photo.jpg" alt="A description of what this photo shows">

Why it matters: Without alt, screen readers say nothing about the image. Users with slow internet who don't see the image get no information. It's also a web accessibility standard requirement.

Mistake 2: Wrong File Name or Path (Case Sensitivity)

❌ Wrong (file is Dog.jpg but code says dog.jpg):

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

✅ Correct (exact match including capitalisation):

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

Why it matters: File systems on web servers are often case-sensitive (unlike Windows). Dog.jpg and dog.jpg are treated as different files. Always match the filename exactly.

Mistake 3: Forgetting usemap="#" Hash Symbol

❌ Wrong:

<img src="map.jpg" usemap="mymap">

✅ Correct:

<img src="map.jpg" usemap="#mymap">

Why it matters: The # symbol tells the browser to look for an element on the same page. Without it, the image map link is broken.

Mistake 4: map name and usemap Value Not Matching

❌ Wrong (names don't match):

<img src="map.jpg" usemap="#mymap">
<map name="map1">...</map>

✅ Correct (names match exactly):

<img src="map.jpg" usemap="#mymap">
<map name="mymap">...</map>

Why it matters: The usemap="#mymap" value connects to name="mymap". If they don't match exactly, the image map doesn't work at all.

Mistake 5: Using <img> for Background Images

❌ Wrong (trying to use <img> as a background):

<div>
  <img src="bg.jpg" style="position:absolute;">
  <p>Content here</p>
</div>

✅ Correct (use CSS background-image):

<div style="background-image: url('bg.jpg'); background-size: cover;">
  <p>Content here</p>
</div>

Why it matters: <img> is for visible, content images. CSS background-image is for decorative backgrounds that sit behind content.

Mistake 6: Forgetting the <img> Fallback Inside <picture>

❌ Wrong (no <img> fallback):

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
</picture>

✅ Correct (always include <img> as the last element):

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="A description of the image">
</picture>

Why it matters: Older browsers don't understand <picture> at all · they need the <img> element. Without it, those users see nothing.

Mistake 7: Forgetting background-repeat: no-repeat with Background Images

❌ Wrong (photo tiles awkwardly):

<style>
  body {
    background-image: url('sunset_photo.jpg');
    background-size: cover;
  }
</style>

✅ Correct:

<style>
  body {
    background-image: url('sunset_photo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

Why it matters: Even with background-size: cover, some browsers may still show tiling artefacts in certain edge cases. Always explicitly set background-repeat: no-repeat when you don't want tiling.

Mistake 8: Not Specifying Width and Height

❌ Wrong (may cause page to flicker during loading):

<img src="large_photo.jpg" alt="A large photo">

✅ Correct:

<img src="large_photo.jpg" alt="A large photo" style="width:800px; height:500px;">

Why it matters: If the browser doesn't know the image dimensions before it loads, the page layout can "jump" suddenly when the image finishes loading. Specifying dimensions reserves the correct space immediately.