Adding Images to Your Website

Images bring your website to life! In this tutorial, you’ll learn how to add images to your web pages, choose the right image formats, write proper alt text, and make your images responsive for all devices.

Why Images Matter

Images make websites more engaging, help tell your story, and can convey information faster than words. From logos and product photos to illustrations and diagrams, images are essential to modern web design.

The <img> Tag

The <img> tag is a self-closing tag that displays images on your page. Here’s the basic syntax:

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

Important: The <img> tag doesn’t have a closing tag—it’s self-closing!

Let’s break down the essential attributes:

Your First Image

Here’s a complete example showing how to add an image to a page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Image</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<img src="landscape.jpg" alt="Beautiful mountain landscape at sunset">
<p>This is a photo from my recent hiking trip!</p>
</body>
</html>

Image File Paths

Relative Paths

When your image is in the same folder as your HTML file:

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

When your image is in a subfolder:

<img src="images/photo.jpg" alt="My photo">
<img src="photos/vacation/beach.jpg" alt="Beach photo">

When your image is in a parent folder:

<img src="../photo.jpg" alt="Photo from parent folder">

Absolute Paths

You can also use full URLs to link to images hosted elsewhere:

<img src="https://www.example.com/images/photo.jpg" alt="Remote image">

The Importance of Alt Text

The alt attribute serves multiple crucial purposes:

  1. Accessibility — Screen readers read the alt text to visually impaired users
  2. SEO — Search engines use alt text to understand image content
  3. Fallback — If the image fails to load, the alt text displays instead

Writing Good Alt Text

Ineffective alt text:

<img src="img001.jpg" alt="image">
<img src="product.jpg" alt="">
<img src="person.jpg" alt="photo">

Better alt text:

<img src="laptop.jpg" alt="Silver laptop on a wooden desk with coffee mug">
<img src="ceo-headshot.jpg" alt="Sarah Johnson, CEO of TechCorp">
<img src="chart.jpg" alt="Bar chart showing 25% increase in sales from 2023 to 2024">

Decorative images (that don’t add meaning) should have empty alt attributes:

<img src="decorative-border.png" alt="">

Image Dimensions

You can control image size using the width and height attributes:

<!-- Fixed width and height in pixels -->
<img src="logo.png" alt="Company logo" width="200" height="100">

<!-- Width only (height adjusts proportionally) -->
<img src="photo.jpg" alt="Team photo" width="400">

Pro tip: Specifying dimensions helps prevent layout shifts as the page loads, improving user experience!

Common Image Formats

JPEG (.jpg, .jpeg)

PNG (.png)

SVG (.svg)

WebP (.webp)

Responsive Images

Make images adapt to different screen sizes using CSS or the srcset attribute:

Using CSS (Simple Method)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>
</head>
<body>
<img src="large-photo.jpg" alt="Responsive photo">
</body>
</html>

Using srcset (Advanced Method)

Serve different image sizes for different devices:

<img
src="photo-800w.jpg"
srcset="photo-400w.jpg 400w,
        photo-800w.jpg 800w,
        photo-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px,
       (max-width: 1000px) 800px,
       1200px"
alt="Responsive photo that loads different sizes"
>

You can make images clickable by wrapping them in an <a> tag:

<a href="gallery.html">
<img src="thumbnail.jpg" alt="Click to view full gallery">
</a>

<!-- External link -->
<a href="https://www.example.com" target="_blank">
<img src="logo.png" alt="Visit Example.com">
</a>

Figure and Figcaption

Use <figure> and <figcaption> for images with captions:

<figure>
<img src="sunset.jpg" alt="Orange and pink sunset over the ocean">
<figcaption>Sunset at Malibu Beach, California - July 2024</figcaption>
</figure>

This semantic HTML clearly associates the caption with the image, which is great for accessibility and SEO!

Common Mistakes to Avoid

Forgetting Alt Text

Problematic example:

<img src="photo.jpg">

Improved example:

<img src="photo.jpg" alt="Family vacation photo at the Grand Canyon">

Always include alt text! It’s required for accessibility.

Using the Wrong Image Format

Problematic example:

<!-- Using PNG for a large photograph -->
<img src="beach-photo.png" alt="Beach">  <!-- 2MB file! -->

Improved example:

<!-- Using JPEG for photographs -->
<img src="beach-photo.jpg" alt="Beach">  <!-- 200KB file -->

Choose the right format to keep file sizes small and pages loading fast.

Not Optimizing Image Size

Problematic example:

<!-- Displaying a 4000x3000px image at 400px wide -->
<img src="huge-photo.jpg" alt="Photo" width="400">

Improved example:

<!-- Using an appropriately-sized image -->
<img src="photo-800px.jpg" alt="Photo" width="400">

Resize images before uploading them to your website!

Image Optimization Tips

  1. Resize before uploading — Don’t upload 4000px images if you only need 800px
  2. Compress your images — Use tools like TinyPNG or ImageOptim
  3. Use appropriate formats — JPEG for photos, PNG for logos, SVG for icons
  4. Lazy load images — Add loading="lazy" for images below the fold:
<img src="photo.jpg" alt="Photo" loading="lazy">

Try It Yourself

Ready to practice? Try these challenges:

Create a page with:

Challenge 2: Image Grid (Intermediate)

Build a photo gallery with:

Challenge 3: Hero Section (Advanced)

Create a hero section with:

What You Learned

Congratulations! You now know:

Next Steps

Now that you can add images, explore these related tutorials:

Want to experiment with images? Try our interactive HTML editor!

Back to all tutorials