The Quick Start

Displaying Images in HTML

  • Beginner
  • December 29, 2025
Written by Fahim ul Haq

Fahim ul Haq is the co-founder and CEO of Educative, the world's leading upskilling platform for and by developers. He is a former software engineer at Microsoft and Facebook with a deep passion for creating better, more efficient ways for developers to master in-demand skills.

Images play a huge role in how websites look and feel. They help explain ideas, create visual interest, and guide users through content. From logos and photos to icons and diagrams, images are everywhere on the web.

In this lesson, you’ll learn how to display images in HTML, how the <img> tag works, and how to use images correctly and responsibly. You’ll also practice adding images step by step so you understand not just how to show an image, but why each part of the code matters.

By the end of this lesson, you’ll be able to confidently add images to your web pages and avoid common beginner mistakes.

How images work on the web

Unlike text, images are not written directly inside an HTML file. Instead, HTML tells the browser where to find an image file and how to display it.

When a browser loads a page, it reads the HTML first. If it encounters an image element, it then makes a separate request to load the image file. This means images are external resources, even if they are stored in the same project folder.

Understanding this separation helps explain why correct file paths and attributes are so important when working with images.

The <img> tag

Images in HTML are displayed using the <img> tag. The name comes from “image.”

Here is the simplest possible example:

				
					<img decoding="async" src="photo.jpg" alt="A photo" />

The <img> tag is different from many other HTML elements because it does not have a closing tag. Instead, all the information the browser needs is included in the opening tag.

Two attributes are especially important:

  • src, which tells the browser where the image file is
  • alt, which provides alternative text

You should always include both.

Understanding the src attribute

The src attribute stands for source. It tells the browser the location of the image file.

The value of src can be:

  • A file name in the same folder
  • A relative path to another folder
  • A full URL to an external image

For example, if your image is in the same folder as your HTML file:

				
					<img decoding="async" src="logo.png" alt="Company logo" />

If your image is inside an images folder:

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

The browser will look exactly where you tell it to. If the path is incorrect, the image will not display.

Using external image URLs

You can also display images hosted elsewhere on the internet by using a full URL.

Example:

				
					<img decoding="async"
  src="https://via.placeholder.com/300"
  alt="A placeholder image"
/>

This works because the browser can fetch the image from that address. External images are useful for testing, but for real projects, images are usually stored locally to avoid broken links and performance issues.

The importance of the alt attribute

The alt attribute provides alternative text for an image. This text is shown if the image fails to load, and it is read aloud by screen readers for users who cannot see images.

Example:

				
					<img decoding="async" src="profile.jpg" alt="Profile photo of a student" />

The alt text should describe the image clearly and concisely. It should explain the image’s purpose, not just its appearance.

Including alt text is not optional. It is essential for accessibility and is considered a best practice in HTML.

What happens when an image doesn’t load

If an image file cannot be found, the browser displays a broken image icon and shows the alt text instead.

This is another reason why meaningful alt text matters. It ensures users still understand what was supposed to be there.

Broken images are often caused by:

  • Incorrect file paths
  • Misspelled file names
  • Missing image files

Checking your src value carefully is always the first step when debugging images.

Step-by-step: adding your first image

Let’s add an image to a basic HTML page.

Start with this structure:

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Displaying Images</title>
  </head>
  <body>
    <h1>My First Image</h1>
  </body>
</html>

Now add an image below the heading:

				
					<img decoding="async"
  src="https://via.placeholder.com/300"
  alt="A simple placeholder image"
/>

Save the file and open it in your browser. You should see an image appear below the heading.

Image size and default behavior

By default, images display at their original size. If the image is large, it may overflow the page or push content around.

HTML allows you to control image size using attributes like width and height.

Example:

				
					<img decoding="async"
  src="https://via.placeholder.com/600"
  alt="Large placeholder image"
  width="300"
/>

This tells the browser to display the image at 300 pixels wide while maintaining its aspect ratio.

Width and height attributes

You can also specify both width and height:

				
					<img decoding="async"
  src="https://via.placeholder.com/600"
  alt="Resized image"
  width="300"
  height="300"
/>

However, setting both can distort the image if the values don’t match the original proportions. As a beginner, it’s usually safer to set only the width and let the browser handle the height.

Later, CSS will give you more flexible and responsive ways to control image size.

Images inside content

Images are often placed inside sections of content, not just on their own.

Example:

				
					<h2>About Me</h2>
<p>
  I’m learning HTML and building my first website.
</p>
<img decoding="async"
  src="https://via.placeholder.com/200"
  alt="A sample profile image"
/>

The browser displays the image exactly where it appears in the HTML. HTML order matters.

Wrapping images in links

Images can be clickable by wrapping them inside an anchor tag.

Example:

				
					<a href="https://how.dev">
  <img decoding="async"
    src="https://via.placeholder.com/200"
    alt="Visit how.dev"
  />
</a>

When the user clicks the image, the browser follows the link. This is commonly used for logos and banners.

Images and accessibility

Accessibility is a key part of using images correctly.

Screen readers announce images using their alt text. If the alt text is missing or unclear, users may miss important information.

If an image is purely decorative and adds no meaning, you can use an empty alt attribute:

				
					<img decoding="async" src="decorative-line.png" alt="" />

This tells screen readers to skip the image entirely.

Decorative vs meaningful images

Understanding the difference between decorative and meaningful images is important.

A meaningful image adds information, such as a photo, chart, or diagram. These images need descriptive alt text.

A decorative image is purely visual and does not add information. These should have empty alt attributes so they don’t distract screen reader users.

Common beginner mistakes with images

One common mistake is forgetting the alt attribute. Another is using vague alt text like “image” or “picture.”

Beginners also sometimes:

  • Use incorrect file paths
  • Upload very large image files
  • Stretch images by forcing width and height

Learning to check these details early helps avoid frustration.

Step-by-step: building an image section

Let’s build a small content section that includes text and an image.

Add this to your body:

				
					<h2>Learning with Visuals</h2>

<p>
  Images help explain concepts and make pages more engaging.
</p>

<img decoding="async"
  src="https://via.placeholder.com/400"
  alt="An example visual used in learning"
/>

<p>
  When using images, it’s important to describe them properly and keep file
  sizes reasonable.
</p>

Save and refresh. You now have a structured content section with an image placed naturally between paragraphs.

Image file formats (basic overview)

Images come in different file formats, each with its own purpose.

Common formats include JPG, PNG, and SVG. As a beginner, you don’t need to master them yet, but it’s helpful to know they exist.

Later, you’ll learn which formats are best for photos, icons, and graphics.

Images and performance

Large image files can slow down websites. Even though HTML makes images easy to display, choosing appropriate image sizes matters.

For now, focus on:

  • Using reasonably sized images
  • Avoiding unnecessarily large files
  • Testing pages in the browser

Performance optimization becomes more important as sites grow.

Practice: creating a simple gallery

Try adding multiple images to your page:

				
					<h2>Sample Gallery</h2>

<img decoding="async" src="https://via.placeholder.com/150" alt="Sample image 1" />
<img decoding="async" src="https://via.placeholder.com/150" alt="Sample image 2" />
<img decoding="async" src="https://via.placeholder.com/150" alt="Sample image 3" />

Save and refresh. The images appear in a row because images are inline elements by default.

Later, CSS will help you control layout more precisely.

How images fit into the bigger picture

Images work alongside text, links, and lists to create complete web pages. They add context and clarity, but they should never replace meaningful structure.

Good HTML balances text and visuals while keeping accessibility in mind.

What you should understand after this lesson

By now, you should be comfortable with:

  • Using the <img> tag
  • Understanding src and alt attributes
  • Adding images from local and external sources
  • Resizing images responsibly
  • Avoiding common beginner mistakes

You don’t need to be perfect. Focus on clarity, meaning, and practice.

What’s next?

Now that you know how to display images, you’re ready to work with more interactive content.

In the next lesson, you’ll learn how to create tables to organize data in rows and columns using HTML.

Before moving on, try creating a simple profile page with a heading, a paragraph, an image, and a few links. Combining what you’ve learned so far is the best way to build confidence.

On this page

    In This Module

    1. The Quick Start