HTML Images — How to Add and Format Images in HTML

A webpage without images is technically functional but missing something important. HTML makes adding images straightforward, though there are several details that beginners skip over — and those details matter for performance, accessibility, and how search engines understand your pages. If you have been following from What is HTML? A Complete Beginner Guide with Examples, you have already seen the <img> tag briefly. Now let us go deep on it.

The Basic Image Tag

The <img> tag is self-closing — no content between tags, no closing tag needed. The two attributes you absolutely must include every time are src and alt.

<img src="profile-photo.jpg" alt="Profile photo of the tutorial author">

The src (source) attribute tells the browser where to find the image file. The alt (alternative text) attribute describes the image in words. If the image fails to load, the alt text is shown instead. Screen readers for visually impaired users also read out the alt text — which is why writing a real meaningful description matters. “image” or an empty description helps nobody.

Absolute vs Relative Image Paths

Just like with links in HTML Links and Anchor Tags — Complete Tutorial with Examples, image paths can be absolute or relative. If your image is hosted at a full URL, use the complete address. If it lives in the same folder as your HTML file, just use the filename.

<!-- Absolute path -->n<img src="https://www.yuvajobs.com/images/logo.png" alt="YuvaJobs logo">nn<!-- Same folder as HTML file -->n<img src="logo.png" alt="YuvaJobs logo">nn<!-- Inside an images subfolder -->n<img src="images/logo.png" alt="YuvaJobs logo">

Setting Image Width and Height

You can control image dimensions with the width and height attributes. Setting them in HTML is actually recommended because it tells the browser how much space to reserve before the image loads — this prevents the layout jumping around as images load in, which is called Cumulative Layout Shift.

<img src="banner.jpg" alt="Website banner" width="800" height="400">

Values are in pixels by default. If you set only width and not height, the browser scales proportionally — which is usually what you want. Setting both to values that don’t match the image’s actual ratio will distort it.

The figure and figcaption Elements

When an image needs a caption — like in an article or tutorial — wrap it in a <figure> element and use <figcaption> for the caption text. This is the semantic HTML way to associate an image with its description.

<figure>n  <img src="html-structure-diagram.png" alt="Diagram showing HTML document structure">n  <figcaption>Figure 1: The basic structure of every HTML document.</figcaption>n</figure>

Search engines understand that <figcaption> describes the adjacent image. It is better for SEO and accessibility than just dropping an image without any surrounding context.

Image File Formats — Which to Use

JPEG is best for photographs — good compression, smaller file sizes. PNG is better for images needing transparency or sharp edges like logos and icons. SVG is vector-based, scales to any size without losing quality, perfect for icons and logos. WebP is a newer format with better compression than both JPEG and PNG and is now supported by all modern browsers — use it when you want the best loading performance.

Common Image Mistakes to Avoid

Missing alt text is the most frequent mistake. An empty alt=”” is acceptable only for purely decorative images that add zero informational value. For anything meaningful, write a real description of what is in the image.

Using massive uncompressed images is another one that kills page speed. A 5MB photo on a webpage will significantly slow loading. Always compress images before uploading — free tools like TinyPNG and Squoosh handle this well.

Ready to organise content into structured lists? Head over to HTML Lists — Ordered, Unordered and Nested Lists with Examples and learn how to create ordered and unordered lists — one of the most used HTML structures in both navigation menus and content pages.