# How to Add a Photo in HTML: A Complete Guide Adding images to a webpage is one of the most fundamental skills in web development. Whether you're building your first site or refreshing your HTML knowledge, understanding how image embedding actually works — not just the syntax, but the mechanics behind it — makes a real difference in how your pages perform and look. ## The Core Tag: How HTML Images Work HTML uses the ` ` tag to embed images. Unlike most HTML elements, it's a **self-closing tag**, meaning it doesn't need a separate closing tag. The basic structure looks like this: ```html ``` Two attributes are doing the heavy lifting here: - **`src` (source)** — tells the browser where to find the image file - **`alt` (alternative text)** — provides a text description used by screen readers, search engines, and displayed when the image fails to load Both are considered essential. Skipping `alt` isn't just bad practice — it actively harms accessibility and SEO. ## Understanding the `src` Attribute: Paths and URLs Where your image lives determines what goes into your `src` attribute. There are three main approaches: **Relative paths** point to image files stored within your own project folder: ```html ``` This works when the image is in a subfolder called `images` relative to your HTML file. **Absolute local paths** include the full file path on your system — but these break when you move files or publish to a server, so they're rarely used in production. **External URLs** point to images hosted elsewhere on the web: ```html ``` This works, but comes with caveats: if the external server goes down or removes the file, your image disappears. Hosting your own images gives you full control. ## Controlling Image Size in HTML 🖼️ You can set dimensions directly on the ` ` tag using `width` and `height` attributes: ```html ``` These values are in **pixels** by default. Specifying both width and height serves an important purpose beyond appearance — browsers use them to **reserve layout space** before the image loads, reducing what's called **Cumulative Layout Shift (CLS)**, a key factor in Google's Core Web Vitals scoring. However, hard-coding fixed pixel dimensions isn't always ideal for responsive designs. Most modern projects handle image sizing through **CSS** instead: ```css img { max-width: 100%; height: auto; } ``` This approach makes images scale fluidly with their container — crucial for mobile-friendly layouts. ## Image File Formats: Which One to Use The format of your image file matters for both quality and performance. | Format | Best For | Transparency | Compression | |--------|----------|--------------|-------------| | **JPEG/JPG** | Photos, complex images | No | Lossy | | **PNG** | Logos, graphics, screenshots | Yes | Lossless | | **WebP** | Most web images | Yes | Both modes | | **SVG** | Icons, illustrations | Yes | Vector-based | | **AVIF** | High-quality web photos | Yes | Lossy/lossless | **WebP** has become the broadly recommended format for web photography because it typically produces smaller file sizes than JPEG at comparable quality — but browser and toolchain support still varies depending on your environment. ## Making Images Accessible Accessibility isn't optional — it's part of writing correct HTML. The `alt` attribute is your primary tool: - **Descriptive images** should have meaningful alt text: `alt="A golden retriever sitting in a park"` - **Decorative images** that add no informational value should use empty alt text: `alt=""` — this signals to screen readers to skip it entirely - **Functional images** (like a button icon) should describe the action: `alt="Submit form"` Search engines also read `alt` text when indexing your images, so accurate descriptions can improve how your images appear in image search results. ## Adding Images Inside Links and Figures Images are often wrapped in other elements for additional functionality. **Clickable image link:** ```html ``` **Figure with caption** (semantic HTML5): 🏷️ ```html Figure 1: Q1 sales performance by region ``` The ` ` and ` ` pairing is semantically meaningful — it tells browsers and assistive technologies that the caption belongs specifically to that image. ## Responsive Images: Going Beyond Basic `src` For more advanced use cases, HTML provides the `srcset` and `sizes` attributes, which let you serve different image sizes depending on the user's screen resolution or viewport: ```html ``` This instructs the browser to **choose the most appropriate image** from the set — a smaller file for a mobile screen, a larger one for a high-resolution desktop display. This is a meaningful performance optimization, but adds complexity that may or may not be warranted depending on your project's scope. ## The Variables That Shape Your Approach How you add and configure images in HTML isn't one-size-fits-all. What works well depends on factors like: - **Your project's structure** — a simple static page has different needs than a large CMS-driven site - **Your audience's devices** — if most visitors use mobile, responsive image techniques matter more - **Performance requirements** — high-traffic sites benefit significantly from format choices and `srcset`, while a personal portfolio may not need that complexity - **Whether you're using a framework** — React, Vue, Next.js, and similar tools often have their own image components that abstract or extend native HTML behavior A developer building a performance-optimized news site will approach image embedding very differently than someone creating a basic personal homepage — even though both start with the same ` ` tag.
``` Two attributes are doing the heavy lifting here: - **`src` (source)** — tells the browser where to find the image file - **`alt` (alternative text)** — provides a text description used by screen readers, search engines, and displayed when the image fails to load Both are considered essential. Skipping `alt` isn't just bad practice — it actively harms accessibility and SEO. ## Understanding the `src` Attribute: Paths and URLs Where your image lives determines what goes into your `src` attribute. There are three main approaches: **Relative paths** point to image files stored within your own project folder: ```html 
``` This works when the image is in a subfolder called `images` relative to your HTML file. **Absolute local paths** include the full file path on your system — but these break when you move files or publish to a server, so they're rarely used in production. **External URLs** point to images hosted elsewhere on the web: ```html 
``` This works, but comes with caveats: if the external server goes down or removes the file, your image disappears. Hosting your own images gives you full control. ## Controlling Image Size in HTML 🖼️ You can set dimensions directly on the ` 
``` **Figure with caption** (semantic HTML5): 🏷️ ```html 
``` This instructs the browser to **choose the most appropriate image** from the set — a smaller file for a mobile screen, a larger one for a high-resolution desktop display. This is a meaningful performance optimization, but adds complexity that may or may not be warranted depending on your project's scope. ## The Variables That Shape Your Approach How you add and configure images in HTML isn't one-size-fits-all. What works well depends on factors like: - **Your project's structure** — a simple static page has different needs than a large CMS-driven site - **Your audience's devices** — if most visitors use mobile, responsive image techniques matter more - **Performance requirements** — high-traffic sites benefit significantly from format choices and `srcset`, while a personal portfolio may not need that complexity - **Whether you're using a framework** — React, Vue, Next.js, and similar tools often have their own image components that abstract or extend native HTML behavior A developer building a performance-optimized news site will approach image embedding very differently than someone creating a basic personal homepage — even though both start with the same `