The Img Tag in HTML: How to Display Images

You need images to show products or ideas on your site. The HTML img tag places those images on the web page. It points to a file and gives short text for context.

What Is the <img> Tag in HTML?

The <img> tag shows an image in the HTML page. It uses attributes to set where the file sits and how it looks. You do not close this tag. You place it inside the HTML where you want the image to show.

Here is the basic syntax:

<img src="" alt="">

The tag works with many image types:

• JPG suits photos.
• PNG allows edges.
• GIF loops short clips.
• SVG holds shapes.
• WebP shrinks in size.

The <img> tag has two needed attributes, which are src and alt.

• The src gives the file path.
• The alt tells what the image means if it fails to load or if a screen reader reads it.

You can add width and height to set size.

Browsers fetch and show the image each time the page loads. They keep no copy in the tag itself. This tag sits inline and flows with text or other inline tags. It does not break layout blocks.

You must check paths and write alt text. Here is an example:

<img src="images/photo.jpg" alt="A red apple">

This tag shows an apple photo from a folder named images. The alt text says what the picture shows for readers who cannot see it.

The <img> Tag Attributes

Here is a list that shows you the common attributes that are used in the <img> tag:

• src gives the path to the image.
• alt holds short text.
• width sets how wide the image looks.
• height sets how tall the image looks.
• title shows text when the user hovers.
• loading can be set to lazy so the page loads faster.
• crossorigin handles access rules from other servers.

Browsers need the src to get the file. If the src is wrong, you see nothing or a broken icon. The alt text steps in as a fallback. Screen readers read the alt text to describe the image.

Use width and height in pixels or percent. They help keep space while files load. The title attribute adds extra hints. Lazy load saves bandwidth. It waits to load pictures until users scroll near them.

Here is an example:

<img 
  src="logo.png" 
  alt="Site logo" 
  width="120" 
  height="60" 
  title="Home logo" 
  loading="lazy" 
/>

This tag loads a logo in a set size. It shows a short title on hover and delays loading until needed.

Relative vs. Absolute Paths in HTML img Tag

Paths tell the browser where to find your file. You can use a relative path or an absolute path.

A relative path points from the file’s place to the image. It uses folders or short names. Use this if your files live on the same site.

An absolute path uses the full URL. It starts with http or https. Use this for files that live on other servers or sites. It does not break if you move HTML to a new folder.

Here is a relative path example:

<img src="assets/pic.jpg" alt="Small icon">

Here is an absolute path example:

<img src="https://example.com/images/banner.jpg" alt="Banner image">

A relative path fits small sites or apps. An absolute path suits files you host elsewhere. Always test your links to be sure they work as you expect.

So, which one is better and faster for development?

Relative path:

• Better for development in most cases.
• Faster to work with, because you don’t have to type (or change) the full domain.
• Easier to move your project to another domain or folder without editing all your links.

Absolute Paths:

• Start with the full URL (https://...) or a root slash (/images/photo.jpg).
• Sometimes used when you link to resources hosted on a CDN or an external server.
• Less flexible if you move the site to a different domain or folder.

So, for local development, stick with relative paths unless you have a specific reason not to.

Accessibility and SEO

Screen readers speak the alt text aloud. If a picture fails to load, the browser shows the text.

Write a short text. Do not start with “Image of.” Use words that fit the image’s role. If the picture is just decor, leave the alt empty but keep the attribute. This signals the browser to skip it.

The alt text improves SEO, and search engines read it to guess what your page says. This helps rank pages in search. It also helps users with slow links or no images.

Here are tips:

• Keep text under 125 characters.
• Be direct.
• Describe what the image shows.
• Skip words like “photo of.”

<img src="team.jpg" alt="Three people in a meeting">

This tag tells readers what is in the photo.

Some errors break images or make them hard to read. Avoid these:

• If the alt Text doesn’t exist; it fails users with screen readers.
• Wrong src path. This shows a broken icon.
• Fixed size that stretches the image.
• No loading="lazy" on big images.
• Wrong format for the use case.

Responsive and Lazy Loaded Images

Web pages need to look good on all screens. The srcset and sizes attributes help choose the right image size.

srcset lists files for different widths. sizes sets which size to use based on the screen.

Lazy loading also speeds up sites. It holds back images that sit off-screen. They load later when users scroll near them. This saves data and time.

Here is an example of responsive and lazy-loaded image:

<img 
src="small.jpg" 
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"  
sizes="(max-width: 600px) 480px, 800px" 
alt="Wide banner" 
loading="lazy" />

This tag picks the right image size for each screen. It also waits to load it until the user gets near it.

Style Images with CSS

CSS lets you set how images look and fit in your page. You can change size, shape, or borders.

Use width and height in CSS to set size. Use border to add lines around the picture. box-shadow makes depth. object-fit helps fill space without stretch.

<img src="cat.jpg" alt="Black cat" class="rounded">

CSS:

.rounded {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border: 2px solid #000;
  box-shadow: 2px 2px 6px #333;
}

This setup shows a sharp box with no stretch. The border and shadow add edges.

Image Formats and When to Use Them

You pick image formats by what you show:

• JPG: Good for photos with many colors. Small size.
• PNG: Good for sharp edges and see-through parts.
• GIF: Best for small loops or icons.
• SVG: For shapes and logos. Stays sharp when scaled.
• WebP: New format. Smaller files with good quality.

JPG works best for photos. PNG fits icons or logos. GIF makes short clips. SVG scales with no blur. WebP shrinks file size.

<img src="photo.webp" alt="Modern image format" />

Use each format as it suits your needs.

Example of the <img> Tag in HTML

You can use the <img> tag in many ways.

Logos in headers:

<img src="logo.svg" alt="Site brand logo">

This shows a clean logo in the top area.

Product photos in stores:

<img src="shoes.jpg" alt="Blue sports shoes" />

This shows an item for sale.

Background visuals through CSS:

.hero {
  background: url("banner.jpg") no-repeat center;
  height: 400px;
}

This adds an image as a backdrop.

Wrapping Up

In this article, you learned how to use the HTML <img> tag to place and style images. You also saw how to pick the right format.

Here is a quick recap:

• Use <img> with src and alt to load and describe images.
• Add width, height, and title for size and hints.
• Use loading="lazy" to delay the loading of offscreen images.
• Pick the right format: JPG, PNG, GIF, SVG, or WebP.
• Write alt text for SEO and screen readers.
• Style images with CSS for shape and fit.
• Use srcset and sizes for screen-based images.
• Avoid broken links and stretched images.
• Use logos, product shots, and background images where they help.

FAQs

Similar Reads