LESSON 4.3

HTML Embedded Images

Add photos and graphics directly to your page

Master the img tag and its key attributes (src, alt, width, and height) so you can place images anywhere on your webpage with confidence.

💡 The Concept

The HTML img tag is the standard way to embed images in a webpage. Every <img> element needs at minimum a src attribute to point to the image file and an alt attribute to describe it.

A Quick Review of HTML Attributes

HTML images rely heavily on attributes, so here is a quick refresher. Attributes modify an HTML element by providing additional information. They are always placed inside the opening tag.

Here is a simple example:

<h1 class="headline">My Headline</h1>

In the code above, class="headline" is the attribute. To add an attribute, type a space after the element name, then the attribute name, an equals sign, and the value in quotation marks.

An element can have multiple attributes, separated by spaces:

<h1 class="headline" id="headline">My Headline</h1>

An attribute can also have multiple values, separated by spaces within the quotation marks:

<h1 class="headline home-page">My Headline</h1>

With attributes covered, it is time to put them to work with images.

The HTML <img> Element and Its Essential Attributes

A photo of the Great American Eclipse of August 2017. This is a perfect example of a content image you'd embed with HTML.

The HTML element for images is <img>. It is a self-closing element, meaning it does not have a separate closing tag. Every <img> element should include four attributes:

  • src: The location (source) of the image file in your website
  • alt: A text description of the image for screen readers and accessibility
  • height: The height of the image in pixels
  • width: The width of the image in pixels

A note on self-closing tags: Self-closing tags do not have a closing tag — they open and close in one. You have already seen a few others: <hr> for a horizontal rule, <br> for a line break, and <!DOCTYPE html> at the top of every HTML file. The <img> tag follows the same pattern.

Here is what the code for the eclipse photo above might look like:

<img src="images/eclipse.png" alt="Great American Eclipse of August 2017" height="280" width="300">

Each attribute is covered in more detail below.

The src Attribute

The src (source) attribute tells the browser where to find the image within your website files. For example:

src="images/sunset.jpg"

In plain English, this says: “Find the image named ‘sunset.jpg’ inside the ‘images’ folder.”

The src value can be either a relative link or an absolute link:

<!-- Absolute link -->
<img src="https://my-domain.com/images/my-image.png">

<!-- Relative link -->
<img src="images/my-image.png">

In most cases, use relative links for images stored within your own project. Relative links are shorter, more portable, and easier to maintain.

The height and width Attributes

You need to specify the actual height and width of your image in pixels. This tells the browser how much space to reserve for the image before it finishes loading, which prevents the page layout from jumping around.

You can find the dimensions of any image using Windows File Explorer or Mac Finder. Just check the file properties. If height and width are not included, the browser cannot reserve space for the image. This can cause layout shifts that hurt user experience.

The alt Attribute

The alt attribute is arguably the most important attribute beyond src. It serves several critical purposes:

  • Accessibility: Screen readers read the alt text aloud to visually impaired visitors, making your website usable for everyone.
  • SEO: Search engines use alt text to understand what your images depict, which can improve your search rankings.
  • Professionalism: If a potential employer ever reviews your code, the quality of your alt text is one of the things they will evaluate.

Write alt text that describes the image meaningfully. Instead of alt="photo", write something like alt="golden retriever playing fetch in a park".

Putting It All Together

Say you have a photo of a spider that you want to add to your web page. The image is saved as spider.png inside your images folder, and its dimensions are 400 pixels wide by 300 pixels tall.

The HTML looks like this:

<img src="images/spider.png" alt="close-up of a spider on a web" height="300" width="400">

Four attributes, one self-closing tag, and the image is on the page. The pattern looks like this:

<img src="[path-to-image]" alt="[description]" height="[pixels]" width="[pixels]">

Styling a Single Image

Not all images on a page should look the same. A logo, a hero image, or a portrait might each need its own size, border, or positioning. The way to target a single image with CSS is to add a class attribute to it.

<img src="images/logo.png" width="200" height="72" alt="Company Logo" class="logo">

Then in your CSS, select it using a dot followed by the class name:

.logo {
    max-width: 100%;
    height: auto;
}

The class name can be anything descriptive. You will use this pattern throughout your web development work. We will look at it in more detail in an upcoming lesson.

Common Mistakes to Avoid

As you start working with images, watch out for these frequent pitfalls:

  • Forgetting the alt attribute: This hurts accessibility and SEO. Always include descriptive alt text.
  • Incorrect file paths, Double-check that your src path matches the actual location and file name. Remember, file paths are case-sensitive on most web servers.
  • Missing height and width: Without these, the browser cannot reserve space for the image, leading to layout shifts as the page loads.
  • Using spaces or uppercase in file names, Stick to lowercase letters and hyphens to prevent broken links.

🎬 Video Demonstration

This video demonstrates how to code an embedded image.

Exercise: Try It Yourself

For this exercise, choose one of the following images. Copy the URL to your clipboard:

Step 1. Open JSFiddle.net.

Step 2. Paste this into the HTML panel:

<img src="" alt="" height="" width="">

Step 3. Paste your image URL into the src attribute.

Step 4. Add 200 for the height and width attributes.

Step 5. Write the alt text to describe your image to screen readers.

Click Run. Your result should look like this:

JS Fiddle Demonstrating How to Code an HTML Image
A live example of an HTML image element with all four essential attributes.

❓ Frequently Asked Questions

What happens if I leave the alt attribute empty?

An empty alt attribute (alt="") is valid HTML and tells screen readers to skip the image entirely. This is actually correct for purely decorative images — images that add no meaning and do not need to be announced to a screen reader user. For content images (product photos, portraits, diagrams), always write descriptive alt text. Leaving the alt attribute out entirely is different: some screen readers will read the file name aloud instead, which is usually unhelpful. Either write meaningful alt text or use alt="" for decoration — never omit the attribute.

Can I resize an image by changing the height and width attributes?

You can, but it is not recommended. The height and width attributes are meant to match the actual dimensions of the image file so the browser can reserve the correct amount of space before the image loads. If you set them to different values, the browser will stretch or squish the image, which often looks distorted. The right approach is to resize the image file itself before adding it to your project, then set the attributes to match the actual dimensions. If you need different sizes for different contexts, CSS is the better tool — properties like max-width: 100% and height: auto let images scale cleanly without distortion.

What is the difference between a relative and absolute src path?

A relative path points to the image relative to the current HTML file. For example, src="images/photo.jpg" means “look in the images folder next to this HTML file.” A relative path works as long as your folder structure stays consistent, which is why it is the preferred choice for images inside your own project. An absolute path is the full URL, like src="https://example.com/images/photo.jpg". Absolute paths are used when linking to images hosted on another server. Avoid linking to images on other websites without permission — the other site can remove or move the file at any time, leaving you with a broken image.

Why does my image show a broken icon instead of the photo?

A broken image icon almost always means the browser cannot find the file at the path specified in the src attribute. The most common causes are: a typo in the file name, a mismatch in capitalization (remember, file paths are case-sensitive on Linux servers), the image file being in a different folder than expected, or the file extension being wrong. Double-check that the file name in your src attribute matches the actual file name exactly, including the extension and capitalization. The browser will also show your alt text in place of the broken image, which is one more reason to always write it.

Does alt text really affect search rankings?

Yes, meaningfully. Search engines cannot see images — they rely entirely on alt text to understand what an image depicts. A well-written alt attribute tells Google what the image shows, which helps the page rank for relevant searches and gets the image indexed in Google Images. Descriptive alt text like alt="golden retriever puppy playing in autumn leaves" is far more useful than alt="dog" or alt="image". At the same time, avoid keyword-stuffing your alt text — write it to describe the image accurately, and the SEO benefit follows naturally.

★ Key Takeaways

Images make web pages more engaging and easier to understand. This lesson covered the img tag and how to use the src and alt attributes to add photos to a page. Next, you will learn about CSS background images, which are set using CSS instead of HTML. Each approach has its own strengths depending on how you plan to use the image.

Next Lesson: CSS Background Images: Techniques and Best Practices

← Back to Web Images Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons