# How to Add an Image in HTML: A Complete Guide Adding images to a webpage is one of the most fundamental HTML skills — and while the basic syntax takes seconds to learn, doing it *well* involves understanding a handful of attributes, file considerations, and accessibility practices that separate functional code from professional-quality markup. ## The Core HTML Image Tag HTML uses the ` ` element to embed images. Unlike most HTML elements, ` ` is a **self-closing tag** — it has no closing counterpart. The minimal working syntax looks like this: ```html ``` Two attributes are essential every time: - **`src`** (source) — tells the browser where to find the image file - **`alt`** (alternative text) — describes the image for screen readers, search engines, and cases where the image fails to load Skipping `alt` is technically valid HTML but considered bad practice for both **accessibility** and **SEO**. ## Understanding the `src` Attribute: Paths and URLs The `src` value can point to an image in three ways: **1. Relative path** — the image file lives within your own project folder: ```html ``` **2. Absolute path** — the full URL to an image hosted somewhere online: ```html ``` **3. Root-relative path** — starts from the root of the domain, useful in larger sites: ```html ``` Which approach works best depends on your project structure. Relative paths are common in small local projects; absolute URLs are typical when pulling images from a CDN or external source. ## Controlling Image Size in HTML By default, an image renders at its **natural dimensions** — whatever pixel size the file actually is. You can override this with `width` and `height` attributes: ```html ``` Values are in **CSS pixels** by default. A few important points: - Setting both width and height helps the browser **reserve layout space** before the image loads, reducing page layout shift - Setting only one dimension scales the image proportionally - For precise, responsive control, most developers prefer handling size through **CSS** rather than HTML attributes — but including both attributes in HTML for layout stability is still a best practice recommended by Google's Core Web Vitals guidelines 📐 ## Supported Image Formats Not all image formats behave the same way in browsers: | Format | Best For | Transparency | Animation | |--------|----------|-------------|-----------| | JPEG/JPG | Photos, complex images | No | No | | PNG | Graphics, logos, screenshots | Yes | No | | GIF | Simple animations | Yes (1-bit) | Yes | | SVG | Icons, logos, vector art | Yes | Yes (CSS) | | WebP | Photos and graphics (modern) | Yes | Yes | | AVIF | High-quality compression (newest) | Yes | Yes | **WebP** and **AVIF** offer significantly smaller file sizes than JPEG or PNG at comparable quality — but browser support and tooling familiarity vary across development environments. ## Writing Useful Alt Text The `alt` attribute does more work than most beginners expect: - **Screen readers** read it aloud for visually impaired users - **Search engines** use it to understand image content - **Browsers** display it when the image fails to load Good alt text describes the *content and function* of the image — not "image of..." but the actual subject: ```html ``` For **decorative images** that add no informational value, use an empty alt attribute (`alt=""`) — this signals to screen readers to skip the image entirely rather than announce a filename. 🖼️ ## Adding Images Inside Other Elements Images rarely sit naked in HTML. They're commonly placed inside: **Links** — making an image clickable: ```html ``` **`

` and `