# How to Attach a Picture in HTML: A Complete Guide Adding images to a webpage is one of the first things anyone learns in HTML — and one of the most nuanced things to get right. Whether you're building a portfolio, a blog, or a full web application, understanding how image embedding actually works will save you from broken layouts, slow load times, and accessibility headaches. ## The Core Tag: ` ` HTML uses the **` ` element** to embed images into a page. Unlike most HTML elements, ` ` is a **self-closing (void) element** — it doesn't need a closing tag. The basic syntax looks like this: ```html ``` Two attributes are essential: - **`src` (source)** — tells the browser where to find the image file - **`alt` (alternative text)** — describes the image for screen readers and displays when the image fails to load Leaving out `alt` is valid HTML, but it's bad practice. Search engines and accessibility tools both rely on it. ## Understanding the `src` Attribute: Path Types How you write the `src` value determines where the browser looks for the image. There are three common approaches: ### Relative Paths A **relative path** points to a file relative to the current HTML document's location. ```html ``` This works when `sunset.jpg` lives inside an `images` folder in the same directory as your HTML file. Relative paths are the standard choice for self-hosted assets. ### Absolute Paths An **absolute path** includes the full URL to the image, including the domain. ```html ``` This is used when linking to images hosted on a different server or a CDN (Content Delivery Network). ### Inline Data URIs A **data URI** encodes the image directly into the HTML as a Base64 string: ```html ``` This eliminates the need for a separate HTTP request, but bloats your HTML file significantly. It's typically reserved for small icons or situations where reducing HTTP requests is a priority. ## Controlling Size and Display By default, an image renders at its native resolution. You can control dimensions using **HTML attributes** or **CSS** — and the two approaches behave differently. ```html ``` Setting `width` and `height` directly in HTML helps the browser **reserve layout space** before the image loads, reducing layout shift — a factor in Core Web Vitals scores. For responsive design, CSS is more flexible: ```css img { max-width: 100%; height: auto; } ``` This lets the image scale down on smaller screens while never exceeding its container width. ## Supported Image Formats 🖼️ Not all image formats behave the same way in browsers. Here's how common formats compare: | Format | Best Use Case | Transparency | Browser Support | |--------|--------------|--------------|-----------------| | **JPEG/JPG** | Photos, complex images | No | Universal | | **PNG** | Graphics, logos, screenshots | Yes | Universal | | **GIF** | Simple animations | Partial | Universal | | **SVG** | Icons, illustrations, logos | Yes | Modern browsers | | **WebP** | Photos + graphics, smaller files | Yes | Modern browsers | | **AVIF** | Next-gen compression | Yes | Newer browsers only | For modern projects, **WebP** offers a strong balance between quality and file size. If you need to support older browsers, a JPEG or PNG fallback using the ` ` element is the reliable approach. ## The ` ` Element: Advanced Image Embedding When you need more control — different images for different screen sizes or format fallbacks — the **` ` element** wraps multiple ` ` options with a fallback ` `: ```html ``` The browser picks the first format it supports and ignores the rest. The ` ` tag at the end is the universal fallback. ## Accessibility and SEO Considerations 🔍 A technically working image isn't necessarily a *good* image in HTML. Several factors affect both accessibility and search visibility: - **Alt text** should describe the image content meaningfully, not just say "image" or "photo" - **Decorative images** (icons, spacers) should use an empty `alt=""` so screen readers skip them - **File names** matter for SEO — `sunset-beach-florida.jpg` is better than `IMG_00423.jpg` - **Lazy loading** via `loading="lazy"` defers off-screen images and improves page speed: ```html ``` - **`decoding="async"`** is a lesser-known attribute that tells the browser to decode the image off the main thread, keeping interactions smooth ## Variables That Affect Your Approach How you embed images in HTML isn't one-size-fits-all. Several factors shape the right technique for a given project: - **Hosting setup** — self-hosted files use relative paths; third-party storage or CDNs require absolute URLs - **Performance targets** — high-traffic sites benefit from WebP/AVIF, lazy loading, and CDN delivery - **Browser support requirements** — legacy browser compatibility limits which formats and attributes you can use safely - **CMS or framework** — platforms like WordPress, React, or Next.js often handle image optimization through their own components, changing how you write image markup - **Responsive design needs** — a single static image works fine for simple pages; complex layouts may need `srcset`, `sizes`, or ` ` A developer building a static single-page site has very different needs than someone integrating images into a React component tree or a headless CMS. The same ` ` tag is the foundation in both cases, but the surrounding decisions — format choice, path structure, responsive strategy, and optimization tooling — depend entirely on the context of the project.