Images in HTML

Images in HTML are added with the <img> element. Images make web pages more useful by showing diagrams, product photos, screenshots, icons, charts, illustrations, and visual explanations. A page can work without images, but good images often make the content easier to understand and more engaging.

The important thing is that images are not only visual decoration. In HTML, an image needs the correct file path, useful alternative text, suitable dimensions, and good loading behavior. If these details are ignored, the page may become slow, inaccessible, confusing, or visually unstable while loading.

In this article, we will understand the <img> tag, the src and alt attributes, image paths, width and height, responsive images, lazy loading, captions, common mistakes, and practical best practices for using images in HTML.

What are Images in HTML?

Images in HTML are embedded media resources displayed inside a web page. The browser loads the image file from the location written in the src attribute and places it in the document where the <img> element appears.

Unlike paragraph or heading elements, the <img> tag does not wrap text content. It is a void element, which means it does not need a closing tag. The information needed to show the image is written through attributes.

<img src="photo.jpg" alt="A mountain landscape at sunrise">

In this example, photo.jpg is the image source, and the alt value describes the image for users who cannot see it or when the image fails to load.

A useful HTML image is not just visible. It also has a correct source, meaningful alternative text, suitable dimensions, and a purpose in the content.

Basic Syntax of the img Tag

The simplest image element needs at least two important attributes: src and alt. The src attribute tells the browser where the image file is located. The alt attribute provides alternative text.

<img src="images/html-logo.png" alt="HTML logo">

The browser does not know what an image means by looking at the filename alone. That is why the alt attribute matters. It gives meaning to the image in text form. This helps screen readers, search engines, slow connections, broken image cases, and users who disable images.

The src Attribute in HTML Images

The src attribute contains the path to the image file. This path can be relative, root-relative, or absolute. If the path is wrong, the browser cannot load the image and will show a broken image icon or the alternative text depending on the browser.

<!-- Image in the same folder -->
<img src="banner.jpg" alt="Website banner">

<!-- Image inside an images folder -->
<img src="images/banner.jpg" alt="Website banner">

<!-- Image from another website -->
<img src="https://example.com/images/banner.jpg" alt="Website banner">

For your own website, local or root-relative image paths are usually easier to maintain. External image URLs should be used carefully because you depend on another server. If that external image is deleted, blocked, or slow, your page is affected.

The alt Attribute in HTML Images

The alt attribute is one of the most important parts of an image. It should describe the meaning or purpose of the image, not just repeat the filename. If an image shows a circuit diagram, the alt text should describe the diagram. If an image is a decorative divider, an empty alt value may be better.

<!-- Good alt text -->
<img src="mosfet-symbol.png" alt="Enhancement MOSFET circuit symbol">

<!-- Poor alt text -->
<img src="mosfet-symbol.png" alt="image">

Good alt text depends on context. The same image may need different alt text in different articles. If the surrounding paragraph already explains the image fully, the alt text can be short. If the image carries important information, the alt text should explain that information clearly.

Decorative Images and Empty alt Text

Not every image needs descriptive alt text. Some images are decorative, meaning they do not add useful information. Examples include purely visual borders, background-style patterns, or repeated icons that do not change meaning. For decorative images, use an empty alt attribute.

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

Do not remove the alt attribute entirely. An empty alt="" tells assistive technology to ignore the image. A missing alt attribute can cause the screen reader to announce the filename, which is usually not helpful.

Width and Height Attributes

The width and height attributes define image dimensions in pixels. They are useful because the browser can reserve the correct space before the image finishes loading. This reduces layout shift, where content jumps around as images appear.

<img src="tutorial-cover.jpg" alt="HTML tutorial cover" width="800" height="450">

You can still make images responsive with CSS while keeping width and height attributes in HTML. The attributes tell the browser the image aspect ratio. CSS can control how large the image appears on different screens.

<img src="tutorial-cover.jpg" alt="HTML tutorial cover" width="800" height="450" style="max-width:100%; height:auto;">

In production websites, CSS classes are usually better than inline styles, but this example shows the basic idea clearly. max-width:100% prevents the image from overflowing its container, and height:auto preserves the aspect ratio.

Responsive Images in HTML

Responsive images adapt to different screen sizes or display densities. The simplest responsive image uses CSS, but HTML also provides srcset and sizes for serving different image files based on the user's screen.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Student learning HTML on a laptop">

The srcset attribute lists available image files and their widths. The sizes attribute tells the browser how much layout width the image will take. The browser then chooses the most suitable file. This can improve speed on mobile devices because they do not need to download unnecessarily large images.

Using figure and figcaption with Images

When an image needs a visible caption, use the <figure> and <figcaption> elements. The image and caption become a grouped unit. This is useful for diagrams, charts, screenshots, tutorials, and labeled examples.

<figure>
  <img src="html-layout.png" alt="Basic HTML page layout diagram">
  <figcaption>Basic structure of an HTML document.</figcaption>
</figure>

The caption is visible text for all users. The alt text is still needed because it serves a different purpose. A caption can describe context, while alt text describes the image for non-visual access or fallback.

Lazy Loading Images

Large images can slow down a web page. The loading attribute allows the browser to delay loading images that are not immediately visible. The most common value is lazy.

<img src="gallery-photo.jpg" alt="HTML project screenshot" loading="lazy">

Lazy loading is useful for images below the fold, long tutorials, image galleries, and product pages. However, avoid lazy loading the main hero image or an important image visible at the top of the page because that can delay the first meaningful visual content.

Image File Formats for HTML Pages

HTML can display many image formats, but choosing the right format affects quality and performance. JPEG is common for photos, PNG is useful for transparency and sharp graphics, SVG is excellent for icons and vector diagrams, and WebP or AVIF can provide strong compression on modern browsers.

Best Practices for Images in HTML

• Always include an alt attribute, even if the value is empty for decorative images.
• Use meaningful filenames such as html-form-example.png instead of random names.
• Compress images before uploading them to reduce page load time.
• Set width and height when possible to reduce layout shift.
• Use responsive image techniques for large images used across mobile and desktop screens.
• Use loading="lazy" for below-the-fold images.
• Do not use images to show important text when real HTML text would work better.

Images should support the content, not fight it. A good image improves explanation, but a badly optimized image slows the page and hurts the reading experience. Keep image quality high enough to be useful and file size low enough to load quickly.

Common Mistakes with Images in HTML

A very common mistake is using the wrong file path. If the browser cannot find the file, the image will not load. Another mistake is writing weak alt text such as image, photo, or the raw filename. These do not explain the image.

Another mistake is uploading very large images and shrinking them only with CSS. The browser still downloads the large file, so the page remains slow. Resize and compress images before publishing, then use responsive techniques when the same image must serve multiple screen sizes.

• Do not omit the alt attribute.
• Do not use broken or temporary image paths.
• Do not rely on huge image files for small display areas.
• Do not put important readable text only inside an image.
• Do not lazy load images that are immediately visible at the top of the page.

FAQs

Which tag is used to add images in HTML? 3

The <img> tag is used to add images in HTML. It is a void element, so it does not need a closing tag.

What is src in an HTML image? 3

The src attribute defines the image file path or URL. If the src path is wrong, the image will not load.

Why is alt text important in HTML images? 3

Alt text explains the image when it cannot be seen or loaded. It improves accessibility, fallback behavior, and image meaning.

How do I make an image responsive in HTML? 3

Use CSS such as max-width:100% and height:auto. For advanced cases, use srcset and sizes to serve different image files.

Should every image have a caption? 3

No. Use captions when the image needs visible explanation. For diagrams, screenshots, charts, and tutorial images, <figure> and <figcaption> are useful.