HTML Images

Visual media elements integrate photographs, graphics, and illustrations into web documents through img tags configured with source paths, alternative descriptions, and dimensional properties.

Complete working example

Responsive image with a caption

Copy a complete image example with an embedded illustration, dimensions and alternative text.

HTMLCSSSelf-contained

Edit in playground

Live preview

Original code, no external assets

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  min-width: 0;
  width: min(100%, 600px);
  background: white;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
}
h1 {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  margin: 0 0 16px;
}
h2 {
  font-size: 20px;
  margin: 24px 0 12px;
}
p,
li {
  line-height: 1.65;
}
a {
  color: #2545a8;
  text-underline-offset: 3px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #9eaed0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #eef2fa;
  padding: 16px;
  border-radius: 10px;
}
code {
  font-family: ui-monospace, monospace;
}
figure {
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
figcaption {
  font-size: 14px;
  color: #495773;
  margin-top: 12px;
  line-height: 1.6;
}
</style>
</head>
<body>
<main>
  <h1>An image that fits</h1>
  <figure>
    <img
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzYwIiB2aWV3Qm94PSIwIDAgNjQwIDM2MCI+PHJlY3Qgd2lkdGg9IjY0MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IiNlNmVkZmYiLz48Y2lyY2xlIGN4PSI1MDAiIGN5PSI4NCIgcj0iNDAiIGZpbGw9IiNmMmJkNTUiLz48cGF0aCBkPSJNMCAzMDBMMTgwIDExMCAzNjUgMzAwWiIgZmlsbD0iIzYyN2NjYSIvPjxwYXRoIGQ9Ik0xODAgMzYwTDQ1MCAxNTAgNjQwIDM0MCA2NDAgMzYwWiIgZmlsbD0iIzM0NTdiZCIvPjxwYXRoIGQ9Ik0wIDMyMlExODAgMjcyIDM4MCAzMjBUNjQwIDMwOFYzNjBIMFoiIGZpbGw9IiMyNDY5NTUiLz48L3N2Zz4="
      alt="Two blue mountains beneath a yellow sun, with green hills in front."
      width="640"
      height="360"
    />
    <figcaption
      >An original embedded illustration: no image download needed.</figcaption
    >
  </figure>
  <p>Resize the browser to see the illustration fit its container.</p>
</main>
<script>

</script>
</body>
</html>

How it works

The original SVG is embedded as a data URL, so the copied file works offline without a missing image. Width and height reserve its aspect ratio; max-width and height:auto keep it responsive. The alt text describes the relevant content, while figcaption gives visible context.

Troubleshooting and limits

When substituting your own image, package the file beside the HTML and update src, dimensions and alt. Decorative images use alt=""; informative images need a description suited to their context. Avoid putting important text only inside the image.

Explore more original working examples.

Quick Answer

How do you add images in HTML?

Add images using the <img> tag with src (image path) and alt (alternative text) attributes: <img src="image.jpg" alt="description">. The alt attribute is required for accessibility. Supported formats include JPG, PNG, GIF, SVG, and WebP. Use width/height attributes or CSS for sizing and responsive design.

Images embed via <img> elements, forming crucial components of compelling web experiences. Strategic implementation balances visual impact with accessibility requirements and page performance optimization.

Understanding Visual Elements

Image elements inject visual media into HTML documents, presenting photographs, diagrams, iconography, and supplementary graphics. The <img> tag facilitates this integration.

Strategic Image Advantages

Amplify aesthetic quality driving visitor engagement
Communicate concepts rapidly through visual channels
Reinforce brand identity via consistent imagery
Enable accessible consumption when correctly implemented
Help readers and search engines understand images through useful alternative text and relevant context.

Image Element Fundamentals

The void <img> tag requires src attributes indicating image file locations.

Standard Image Integration

Labelled sample illustrations replace missing original images. Original URLs remain in the editor.

<h1>Visual Media Showcase</h1>

<!-- Elementary image -->
<img
  src="https://placehold.co/300x200/5c7cfa/fff?text=Platform+Brand"
  alt="Platform branding visualization"
/>

<h2>Technology Learning Resources</h2>

<!-- Descriptive alt attributes -->
<img
  src="https://placehold.co/250x150/fa5252/fff?text=Markup"
  alt="Markup language instruction"
/>

<img
  src="https://placehold.co/250x150/20c997/fff?text=Styling"
  alt="Stylesheet techniques guide"
/>

<img
  src="https://placehold.co/250x150/fab005/fff?text=Scripting"
  alt="Interactive programming lessons"
/>

<p>Master development at <strong>htmlfreecodes.com</strong></p>

Result:

Visual Media Showcase

Web Development Images

Learn web development at htmlfreecodes.com

Image Attributes

HTML images support several important attributes that control their behavior and accessibility.

Image Attribute Examples

Labelled sample illustrations replace missing original images. Original URLs remain in the editor. The snippet includes CSS inside its HTML.

<h2>HTML Free Codes Tutorial Images</h2
>

<!-- Image with width and height -->
<img
  src="https://placehold.co/400x300/3498db/fff?text=Resized+Image"
  alt="HTML tutorial banner"
  width="200"
  height="150"
/>

<!-- Image with title attribute (tooltip) -->
<img
  src="https://placehold.co/200x150/9b59b6/fff?text=Hover+Me"
  alt="Interactive example"
  title="Hover to see this tooltip - HTML Free Codes"
  width="200"
  height="150"
/>

<!-- Image with loading attribute -->
<img
  src="https://placehold.co/300x200/e67e22/fff?text=Lazy+Loading"
  alt="Performance optimized image"
  width="300"
  height="200"
  loading="lazy"
/>

<!-- Image with custom styling -->
<img
  src="https://placehold.co/250x200/27ae60/fff?text=Styled+Image"
  alt="CSS styled image example"
  width="250"
  height="200"
  style="border: 3px solid #2c3e50; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
/>

<!-- Clickable image (image as link) -->
<a
  href="https://htmlfreecodes.com"
  >
    <img
    src="https://placehold.co/200x100/e74c3c/fff?text=Click+Me"
    alt="Visit HTML Free Codes website"
    width="200"
    height="100"
  />
</a
>

<p
  >All images from <strong>htmlfreecodes.com</strong> tutorials.</p
>

Result:

HTML Free Codes Tutorial Images

All images from htmlfreecodes.com tutorials.

Responsive Images

Responsive images adapt to different screen sizes and devices, providing optimal viewing experiences across all platforms.

Responsive Image Examples

Labelled sample illustrations replace missing original images. Original URLs remain in the editor. Picture candidates use supplied SVG illustrations for layout and selection; their original file-format hints are retained only in the source. The snippet includes CSS inside its HTML.

<style>
.responsive-img {
    max-width: 100%;
    height: auto;
    border: 2px solid #3498db;
    border-radius: 8px;
}

.image-container {
    max-width: 600px;
    margin: 20px 0;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery img {
    flex: 1 1 200px;
    max-width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}
</style>

<h2>Responsive Image Examples</h2>

<!-- Simple responsive image -->
<div class="image-container">
    <img src="https://placehold.co/800x400/3498db/fff?text=HTML+Free+Codes+Banner"
         alt="HTML Free Codes responsive banner"
         class="responsive-img">
</div>

<!-- Picture element with multiple sources -->
<picture>
    <source media="(max-width: 600px)"
            srcset="https://placehold.co/300x200/2ecc71/fff?text=Mobile">
    <source media="(max-width: 1200px)"
            srcset="https://placehold.co/600x400/2ecc71/fff?text=Tablet">
    <img src="https://placehold.co/800x500/2ecc71/fff?text=Desktop"
         alt="Adaptive image for different devices"
         class="responsive-img">
</picture>

<!-- Responsive gallery -->
<h3>Image Gallery</h3>
<div class="gallery">
    <img src="https://placehold.co/300x200/9b59b6/fff?text=Gallery+1" alt="HTML tutorial 1">
    <img src="https://placehold.co/300x200/e67e22/fff?text=Gallery+2" alt="CSS tutorial 2">
    <img src="https://placehold.co/300x200/1abc9c/fff?text=Gallery+3" alt="JS tutorial 3">
</div>

<p>Learn responsive design at <strong>htmlfreecodes.com</strong></p>

Result:

Responsive Image Examples

Image Gallery

Learn responsive design at htmlfreecodes.com

Image Formats and Optimization

Different image formats serve different purposes. Choosing the right format improves performance and quality.

Image Format Examples

<h2>Image Format Comparison</h2
>

<!-- JPEG format -->
<div
  style="display: inline-block; text-align: center; margin: 10px;"
  >
    <img
    src="https://placehold.co/200x150/e74c3c/fff?text=JPEG"
    alt="JPEG format example"
  />
    <p
    ><strong>JPEG (.jpg/.jpeg)</strong
    ><br />
    Best for: Photos, complex images<br />
    Compression: Lossy<br />
    Size: Small</p
  >
</div
>

<!-- PNG format -->
<div
  style="display: inline-block; text-align: center; margin: 10px;"
  >
    <img
    src="https://placehold.co/200x150/3498db/fff?text=PNG"
    alt="PNG format example"
  />
    <p
    ><strong>PNG (.png)</strong
    ><br />
    Best for: Graphics, transparency<br />
    Compression: Lossless<br />
    Size: Larger</p
  >
</div
>

<!-- WebP format -->
<div
  style="display: inline-block; text-align: center; margin: 10px;"
  >
    <img
    src="https://placehold.co/200x150/2ecc71/fff?text=WebP"
    alt="WebP format example"
  />
    <p
    ><strong>WebP (.webp)</strong
    ><br />
    Best for: Modern browsers<br />
    Compression: Both<br />
    Size: Very small</p
  >
</div
>

<!-- Modern image with fallback -->
<h3>Modern Image with Fallback</h3>
<picture
  >
    <source
    srcset="https://placehold.co/400x300/1abc9c/fff?text=WebP+Format"
    type="image/webp"
  />
    <source
    srcset="https://placehold.co/400x300/1abc9c/fff?text=JPEG+Fallback"
    type="image/jpeg"
  />
    <img
    src="https://placehold.co/400x300/1abc9c/fff?text=Fallback+Image"
    alt="Modern image with fallback from HTML Free Codes"
  />
</picture
>

<p
  >Learn image optimization at <strong>htmlfreecodes.com</strong></p
>

Result:

Image Format Comparison

JPEG (.jpg/.jpeg)
Best for: Photos, complex images
Compression: Lossy
Size: Small

PNG (.png)
Best for: Graphics, transparency
Compression: Lossless
Size: Larger

WebP (.webp)
Best for: Modern browsers
Compression: Both
Size: Very small

Modern Image with Fallback

Learn image optimization at htmlfreecodes.com

Image Accessibility

Proper image accessibility ensures that all users, including those using screen readers, can understand your content.

Accessible Image Examples

Labelled sample illustrations replace missing original images. Original URLs remain in the editor.

<h2>Image Accessibility Examples</h2
>

<!-- Informative image with descriptive alt text -->
<img
  src="https://placehold.co/400x200/3498db/fff?text=HTML+Tutorial"
  alt="HTML tutorial screenshot showing code structure and syntax highlighting"
  width="400"
  height="200"
/>

<!-- Decorative image with empty alt -->
<img
  src="https://placehold.co/100x50/ecf0f1/95a5a6?text=Decoration"
  alt=""
  width="100"
  height="50"
/>
<p>This decorative image above adds visual appeal but conveys no essential information.</p>

<!-- Complex image with detailed description -->
<img
  src="https://placehold.co/500x300/1abc9c/fff?text=Chart"
  alt="Bar chart showing web development skill popularity: HTML 95%, CSS 87%, JavaScript 92%"
  width="500"
  height="300"
/>

<!-- Image with figure and caption -->
<figure
  >
    <img
    src="https://placehold.co/350x250/9b59b6/fff?text=Code+Example"
    alt="HTML code structure demonstration"
    width="350"
    height="250"
  />
    <figcaption>Figure 1: Basic HTML document structure from htmlfreecodes.com</figcaption>
</figure
>

<p
  >Learn accessibility best practices at <strong>htmlfreecodes.com</strong></p
>

Result:

Image Accessibility Examples

This decorative image above adds visual appeal but conveys no essential information.

Code Example — sample illustration — Figure 1: Basic HTML document structure from htmlfreecodes.com

Learn accessibility best practices at htmlfreecodes.com

Complete Images Example

Here's a comprehensive example demonstrating various HTML image techniques working together:

Complete Images Example

Labelled sample illustrations replace missing original images. Original URLs remain in the editor. The snippet includes CSS inside its HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Images Tutorial</title>
    <style>
        .responsive-img { max-width: 100%; height: auto; }
        .gallery { display: flex; gap: 10px; flex-wrap: wrap; }
        .gallery img { flex: 1 1 200px; max-width: 300px; }
    </style>
</head>
<body>
    <header>
        <img src="https://placehold.co/800x200/3498db/fff?text=HTML+Free+Codes+Header"
             alt="HTML Free Codes website header"
             class="responsive-img">
    </header>

    <main>
        <h1>Welcome to HTML Free Codes</h1>

        <figure>
            <img src="https://placehold.co/600x400/2ecc71/fff?text=Featured+Tutorial"
                 alt="Featured HTML tutorial demonstrating image usage"
                 class="responsive-img">
            <figcaption>Featured: Complete guide to HTML images</figcaption>
        </figure>

        <div class="gallery">
            <img src="https://placehold.co/300x200/e74c3c/fff?text=Tutorial+1" alt="HTML basics tutorial">
            <img src="https://placehold.co/300x200/9b59b6/fff?text=Tutorial+2" alt="CSS styling tutorial">
            <img src="https://placehold.co/300x200/f39c12/fff?text=Tutorial+3" alt="JavaScript tutorial">
        </div>
    </main>
</body>
</html>

🎯 Image Best Practices

Always include alt text: Describe the image content or purpose
Optimize file sizes: Compress images without losing quality
Use appropriate formats: JPEG for photos, PNG for graphics, WebP for modern browsers
Implement responsive images: Provide different sizes for different devices
Use lazy loading: Improve page load performance
Specify dimensions: Prevent layout shifts during loading
Provide fallbacks: Ensure compatibility across browsers

Try it Yourself

Experiment with different HTML image techniques and responsive design!

Try Images Example

Test Your Knowledge

5 practice questions are available. Choose Start practice to try them.

A smaller starting example and practical notes

An img element places an image in a document. Its src points to a real asset; alt provides a text alternative based on the image's purpose. Set intrinsic width and height so the browser can reserve space before the file arrives.

<img src="/images/workspace.jpg"
     alt="A notebook beside a laptop on a wooden desk"
     width="1200" height="800" loading="lazy">
<style>
  img { display: block; max-width: 100%; height: auto; }
</style>

The example path needs your own image

The snippet demonstrates markup and does not include workspace.jpg. Add that file to your site's images folder or replace src with a real local asset. A broken path cannot be fixed by alt text. Verify the network response is an image and inspect its dimensions before publishing.

Write an alternative for the purpose

Describe informative content rather than starting every alternative with image of. If a decorative image adds no information, use alt="" so assistive technology can skip it. A linked image needs an alternative that explains the destination or action. If nearby text already conveys the same information, avoid redundant announcements.

Load at the right time

Lazy loading is useful for images below the initial viewport. Avoid delaying an image that is essential to the initial page view. Width and height establish an aspect ratio; max-width and height:auto let the rendered size adapt without distorting that ratio. Compress assets and use appropriate resolutions rather than sending a huge image for a small thumbnail.

Responsive image with a caption

Live preview

How it works

Troubleshooting and limits

Quick Answer

Understanding Visual Elements

Strategic Image Advantages

Image Element Fundamentals

Standard Image Integration

Result:

Visual Media Showcase

Web Development Images

Image Attributes

Image Attribute Examples

Result:

HTML Free Codes Tutorial Images

Responsive Images

Responsive Image Examples

Result:

Responsive Image Examples

Image Gallery

Image Formats and Optimization

Image Format Examples

Result:

Image Format Comparison

Modern Image with Fallback

Image Accessibility

Accessible Image Examples

Result:

Image Accessibility Examples

Complete Images Example

Complete Images Example

🎯 Image Best Practices

Try it Yourself

Test Your Knowledge

Related Articles

HTML Basics

HTML Attributes

HTML Links

HTML Responsive Design

HTML Layout

HTML Media

The example path needs your own image

Write an alternative for the purpose

Load at the right time