# 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, there's a surprising amount of depth underneath it. File formats, file paths, accessibility attributes, and responsive behavior all affect how well your images actually work in the real world. ## The Core Syntax: The ` ` Tag HTML uses a **self-closing ` ` element** to embed images. Unlike most HTML tags, it has no closing tag. The minimal version looks like this: ```html ``` Two attributes are essential here: - **`src`** — the source path pointing to your image file - **`alt`** — a text description of the image for screen readers and SEO Both are required in any well-formed HTML document. Skipping `alt` is technically valid but bad practice — it breaks accessibility and hurts search engine indexing. ## Understanding File Paths The `src` attribute can point to an image in a few different ways, and getting the path wrong is one of the most common beginner mistakes. **Relative paths** reference images stored in relation to your HTML file: ```html ``` This tells the browser to look inside an `images` folder at the same directory level as your HTML file. **Absolute paths** include the full URL to an image hosted online: ```html ``` This works for externally hosted images, but you're dependent on that external server staying available. Hosting images on your own server gives you more control. **Root-relative paths** start with a forward slash and are common in larger sites: ```html ``` This resolves from the root of the domain, which makes it useful when your HTML files exist at multiple directory depths. ## Controlling Image Size By default, an image renders at its natural dimensions. You can control size directly in HTML using **`width` and `height` attributes** (values in pixels, no units needed): ```html ``` Setting both attributes explicitly also helps browsers **reserve space** for the image before it loads, reducing layout shift — a factor in Core Web Vitals scores. For responsive designs, most developers set size through **CSS** instead, using properties like `max-width: 100%` to prevent images from overflowing their containers on smaller screens. ## Image File Formats and When They Matter 🖼️ The format of your image file affects file size, quality, and browser compatibility: | Format | Best For | Notes | |--------|----------|-------| | **JPEG / JPG** | Photographs, complex images | Lossy compression; small file sizes | | **PNG** | Graphics, logos, transparency | Lossless; larger files than JPEG | | **GIF** | Simple animations | Limited to 256 colors | | **SVG** | Icons, logos, vector art | Scales without quality loss | | **WebP** | General use | Modern format; smaller than JPEG/PNG with good quality | | **AVIF** | Modern browsers | Very efficient compression; not universally supported | Choosing the wrong format — like using a PNG for a full-width photograph — can significantly slow page load times. ## The `alt` Attribute in Depth The `alt` attribute does more than display fallback text. It: - Reads aloud by **screen readers** for visually impaired users - Appears in place of the image if the file fails to load - Gives search engines context about what the image shows **Descriptive alt text** is specific and meaningful: `alt="Red ceramic coffee mug on a wooden desk"` rather than `alt="mug"` or `alt="image1"`. For purely decorative images that add no informational value, use an empty alt attribute (`alt=""`) — this signals to screen readers to skip the element entirely. ## Adding a Title and Other Optional Attributes The **`title` attribute** adds a tooltip that appears when a user hovers over the image: ```html ``` This is optional and not a substitute for `alt`. Other commonly used attributes include: - **`loading="lazy"`** — defers loading until the image is near the viewport, improving initial page load performance - **`decoding="async"`** — allows the browser to decode the image off the main thread - **`srcset`** — serves different image sizes depending on screen resolution (key for responsive images) ## The `

` and `