HTML CSS JavaScript Python Swift TypeScript SQL React

How to Add an Image in HTML

You’ll place an image on a web page using HTML so it loads reliably in the browser.

When this approach works best

This approach works best when the image is part of your page content and you can reference it with a local file path or a URL.

Learn HTML on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSEHTML

Unlock Web Development: Start building web pages using the foundational markup language of the web

Beginner friendly

Use it when you:

Add a logo, product photo, or profile picture.
Insert screenshots into documentation or a tutorial.
Show images inside an article or landing page.

Skip this approach when:

The image is purely decorative. A CSS background can be a better fit.
You need complex layout or effects. You’ll usually add CSS styling beyond the basics.

Prerequisites

A text editor and a browser.
An image file (like .jpg, .png, .webp, .gif) or an image URL.

Step-by-step instructions

Step 1: Add an `<img>` tag with the correct path

The <img> element displays an image. Use src to point to the file and alt to describe it for accessibility and fallback.

Open in Mimo

<imgsrc="images/cat.jpg"alt="A gray cat sleeping on a couch">

Pick the path style that matches where your image lives.

Option A: Relative path (most common)

Use this when your image sits in a folder inside your project.

Project example:

Open in Mimo

index.html
images/
  cat.jpg

Open in Mimo

<imgsrc="images/cat.jpg"alt="A gray cat sleeping on a couch">

Option B: Same-folder path

Use this when the image is in the same folder as your HTML file.

Open in Mimo

<imgsrc="cat.jpg"alt="A gray cat sleeping on a couch">

Option C: Absolute URL

Use this when the image is hosted online.

Open in Mimo

<img
src="https://example.com/images/cat.jpg"
alt="A gray cat sleeping on a couch"
/>

What to look for:

A broken image icon almost always means the src path is wrong.
Many servers treat Cat.jpg and cat.jpg as different files.

Step 2: Control basic sizing to avoid stretching

If you set both width and height to values that don’t match the image’s real proportions, the image can look squished. A simple rule: set only one dimension, or use CSS to keep it responsive.

Option A: Set one dimension only

Open in Mimo

<imgsrc="images/cat.jpg"alt="A gray cat sleeping on a couch"width="320">

Option B: Use CSS for responsive sizing

This keeps the image within its container and preserves its aspect ratio.

JavaScript

Open in Mimo

<imgclass="photo"src="images/cat.jpg"alt="A gray cat sleeping on a couch">

<style>
  .photo {
    max-width:100%;
    height:auto;
  }
</style>

What to look for:

If the image overflows on smaller screens, max-width: 100% usually fixes it.

Examples you can copy

Example 1: Add a simple image to a page

PHP

Open in Mimo

<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Image Example</title>
</head>
<body>
<h1>My Favorite Animal</h1>
<imgsrc="images/cat.jpg"alt="A gray cat sleeping on a couch">
</body>
</html>

Example 2: Responsive image that scales down on mobile

JavaScript

Open in Mimo

<imgclass="hero"src="images/mountains.webp"alt="A mountain trail at sunrise">

<style>
  .hero {
    max-width:900px;
    width:100%;
    height:auto;
    display:block;
  }
</style>

Example 3: Image with a caption (content pattern)

CSS

Open in Mimo

<figure>
<imgsrc="images/chart.png"alt="Bar chart showing weekly study hours">
<figcaption>
    Study time increased after switching to a daily schedule.
</figcaption>
</figure>

Example 4: Clickable thumbnail (common gallery pattern)

Open in Mimo

<ahref="images/cat.jpg">
<imgsrc="images/cat-thumb.jpg"alt="A gray cat sleeping on a couch">
</a>

Common mistakes and how to fix them

Mistake 1: Using a Windows file path in `src`

What you might do:

Open in Mimo

<imgsrc="C:\Users\Ana\Pictures\cat.jpg"alt="A gray cat sleeping on a couch">

Why it breaks:

Browsers don’t load your C:\... path when the page runs as a website, and backslashes aren’t used in web paths.

Correct approach:

Put the image inside your project folder and use a relative path.

Open in Mimo

<imgsrc="images/cat.jpg"alt="A gray cat sleeping on a couch">

Mistake 2: Missing alt text or using vague alt text

What you might do:

Open in Mimo

<imgsrc="images/chart.png"alt="image">

Why it breaks:

The image loads, but the page becomes less accessible and less useful if the image can’t be seen.

Correct approach:

Describe what matters in the image.

Open in Mimo

<imgsrc="images/chart.png"alt="Line chart showing a steady increase in monthly sales">

If the image is purely decorative, use an empty alt so screen readers skip it.

Open in Mimo

<imgsrc="images/divider.png"alt="">

Troubleshooting

If you see a broken image icon, re-check the src path and the exact file name, including uppercase and lowercase letters.
If an online image doesn’t load, open the image URL directly in a browser. If that fails, the image isn’t publicly accessible.
If the image looks stretched, remove either width or height, then use max-width: 100% and height: auto in CSS.
If it works in a preview but not when deployed, the server may be case-sensitive. Update the HTML to match the exact file name.
If the image loads locally but not after moving files around, confirm you’re opening the right index.html in the right folder.