Lesson 7: HTML Images

What are HTML Images?

Images can improve the design and appearance of a web page. HTML images are defined with the <img> tag.

Key Points:

The <img> tag is an empty element (no closing tag)
The src attribute specifies the image file path
The alt attribute provides alternative text
Images can be in various formats: JPG, PNG, GIF, SVG, etc.

Basic Image Syntax

Required Attributes

The src Attribute

The src (source) attribute specifies the path to the image:

<img src="photo.jpg" alt="My Photo">

<img src="images/logo.png" alt="Company Logo">

<img src="https://www.example.com/pic.jpg" alt="External Image">

The alt Attribute

The alt attribute provides alternative text if the image cannot be displayed. It's also important for accessibility (screen readers):

Why alt is important:

Helps visually impaired users understand the image
Displays if the image fails to load
Helps search engines understand the image content
Required for valid HTML

Image Size - Width and Height

HTML Code:

Output:

Logo Image

💡 Note: You can specify size in pixels (px) or percentages (%). It's best to specify both width and height to prevent page flickering while the image loads.

Image as a Link

You can make an image clickable by wrapping it in an <a> tag:

<a href="home.html">

    <img src="home-icon.png" alt="Home" width="50">

</a>

Image Formats

Format	Extension	Best For
JPEG/JPG	.jpg, .jpeg	Photos, complex images with many colors
PNG	.png	Images with transparency, logos, graphics
GIF	.gif	Simple animations, icons
SVG	.svg	Vector graphics, scalable logos
WebP	.webp	Modern format, smaller file size

Image Alignment with CSS

HTML Code:

<img src="photo.jpg" alt="Photo" style="float: left; margin-right: 10px;">

<p>Text wraps around image.</p>

Output:

Image

Text wraps around the image on the left side.

Responsive Images

Make images responsive so they scale with the page:

This ensures the image will never be larger than its container and maintains its aspect ratio.

Image with Border and Styling

HTML Code:

<img src="photo.jpg" alt="Photo" style="border: 5px solid #667eea; border-radius: 10px;">
            

Output:

Styled Image

Image Maps

Image maps allow you to create clickable areas on an image:

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

<map name="workmap">

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

    <area shape="circle" coords="337,300,44" href="phone.html" alt="Phone">

</map>

The <figure> and <figcaption> Elements

Use these semantic elements to add captions to images:

HTML Code:

<figure>

    <img src="sunset.jpg" alt="Sunset" width="300">

    <figcaption>Beautiful sunset</figcaption>

</figure>

Output:

Sunset Image

Beautiful sunset

Common Image Attributes

Attribute	Description	Example
src	Specifies the image source	src="image.jpg"
alt	Alternative text	alt="Description"
width	Image width in pixels	width="200"
height	Image height in pixels	height="150"
title	Tooltip text on hover	title="My photo"
loading	Lazy loading (lazy/eager)	loading="lazy"

💡 Best Practices:

Always include the alt attribute
Use descriptive file names (sunset.jpg, not img1.jpg)
Optimize images for web (compress file size)
Specify width and height to prevent layout shifts
Use appropriate image formats for the content
Consider using responsive images for mobile devices

Practice Exercise

Try This:

Create a simple photo gallery page with:

At least 4 images with proper alt text
Set width and height for each image
Make one image a clickable link
Add a border or rounded corners to at least one image
Use <figure> and <figcaption> for at least one image