# How to Add a Photo in HTML: A Complete Guide Adding an image to an HTML page is one of the first practical skills in web development — and while the core syntax is simple, getting it right involves more decisions than most beginners expect. From file paths to accessibility attributes, each choice shapes how your image loads, displays, and performs across different browsers and devices. ## The Basic HTML Image Tag HTML uses the ` ` element to embed photos and images into a webpage. Unlike most HTML elements, ` ` is a **self-closing tag** — it has no closing counterpart. The minimum viable syntax looks like this: ```html ``` Two attributes are doing the essential work here: - **`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 Neither attribute is optional in practice. Omitting `src` breaks the image entirely. Omitting `alt` hurts accessibility and SEO. ## Understanding File Paths The `src` value can point to an image in three different ways, and choosing the wrong one is the most common reason images don't appear. **Relative paths** reference a file location relative to your current HTML file: ```html ``` This works when the image lives in a subfolder called `images` alongside your HTML file. Relative paths are the standard approach for self-hosted projects. **Absolute paths** include the full URL, including the domain: ```html ``` Use this when embedding an image hosted on a different server or when building from a root-level reference. **Root-relative paths** start with a forward slash, anchoring the path to the domain root: ```html ``` This is common in larger sites and frameworks where file nesting can make relative paths unreliable. ## Controlling Image Size in HTML By default, an image renders at its natural dimensions. You can override this with `width` and `height` attributes directly on the tag: ```html ``` Values are in pixels when written without units. However, most modern workflows handle sizing through **CSS** rather than HTML attributes, because CSS gives you responsive control — allowing images to scale fluidly across screen sizes: ```css img { max-width: 100%; height: auto; } ``` That CSS rule is widely used as a baseline for responsive images. It prevents an image from overflowing its container while preserving the original aspect ratio. Even if you're sizing with CSS, it's still good practice to include `width` and `height` attributes in the HTML. Browsers use those values to **reserve layout space** before the image loads, reducing page layout shifts — a factor in Core Web Vitals performance scoring. ## Supported Image Formats 🖼️ HTML itself doesn't restrict which image formats you can use, but browser support and use-case suitability vary: | Format | Best For | Notes | |--------|----------|-------| | **JPEG / JPG** | Photos, complex images | Lossy compression; small file sizes | | **PNG** | Graphics, transparency | Lossless; larger files | | **WebP** | Photos and graphics | Modern format; excellent compression | | **SVG** | Icons, logos, illustrations | Vector-based; scales without quality loss | | **GIF** | Simple animations | Limited color range; largely superseded | | **AVIF** | High-quality photos | Newer format; not universally supported yet | For photographs specifically, **JPEG and WebP** are the most practical choices for web use. WebP typically delivers smaller file sizes at comparable visual quality, but you may need fallback handling for older browsers. ## Adding Images with Figures and Captions When a photo needs a visible caption, the semantic HTML approach uses ` ` and ` `: ```html Sunrise over the northern ridge, early spring. ``` This pairing is meaningful to browsers, assistive technologies, and search engines — it explicitly associates the caption with the image rather than just placing text nearby. ## Responsive Images for Different Screen Sizes A single image file rarely serves all screen sizes optimally. The `srcset` attribute lets you offer the browser multiple versions of an image at different resolutions: ```html ``` The browser then selects the most appropriate version based on the user's screen width and pixel density. This is more relevant for production websites than simple practice projects, but it's the standard approach for performance-conscious development. 📱 ## Lazy Loading Modern HTML supports native **lazy loading**, which defers off-screen images from loading until a user scrolls near them: ```html ``` This single attribute can meaningfully reduce initial page load times on image-heavy pages. The alternative value is `loading="eager"`, which is the default behavior — the image loads immediately regardless of its position on the page. ## What Shapes the Right Approach for Your Project The mechanics of ` ` are consistent, but the decisions around it shift depending on several variables: - **Project type** — a static personal page, a CMS-powered blog, and a React application each handle images differently - **Hosting environment** — file path conventions depend entirely on your folder structure and server setup - **Performance requirements** — a portfolio site and a high-traffic news site have very different optimization thresholds - **Browser support targets** — newer formats like WebP and AVIF require more careful implementation if older browser support matters - **Content management** — whether images are hardcoded, dynamically inserted, or managed through a CMS changes which attributes you control manually The syntax for placing a photo in HTML is straightforward. The decisions around format, sizing strategy, responsive behavior, and file organization are where your specific project's constraints become the determining factor.
``` Two attributes are doing the essential work here: - **`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 Neither attribute is optional in practice. Omitting `src` breaks the image entirely. Omitting `alt` hurts accessibility and SEO. ## Understanding File Paths The `src` value can point to an image in three different ways, and choosing the wrong one is the most common reason images don't appear. **Relative paths** reference a file location relative to your current HTML file: ```html 
``` This works when the image lives in a subfolder called `images` alongside your HTML file. Relative paths are the standard approach for self-hosted projects. **Absolute paths** include the full URL, including the domain: ```html 
``` Use this when embedding an image hosted on a different server or when building from a root-level reference. **Root-relative paths** start with a forward slash, anchoring the path to the domain root: ```html 
``` This is common in larger sites and frameworks where file nesting can make relative paths unreliable. ## Controlling Image Size in HTML By default, an image renders at its natural dimensions. You can override this with `width` and `height` attributes directly on the tag: ```html