# How to Add a Picture in HTML: A Complete Guide Adding images to an HTML page is one of the most fundamental skills in web development. Whether you're building a personal portfolio, a product page, or a blog, understanding how the ` ` tag works — and what controls how images behave — sets the foundation for everything else. ## The Core Element: The ` ` Tag HTML uses a **self-closing ` ` tag** to embed images directly into a webpage. Unlike most HTML elements, it doesn't need a closing tag. The basic syntax looks like this: ```html ``` Two attributes are essential every time you use it: - **`src` (source):** Tells the browser where to find the image file. - **`alt` (alternative text):** Provides a text description used by screen readers and displayed if the image fails to load. This also matters for SEO. Skipping `alt` is a common beginner mistake — and it costs you both accessibility and search visibility. ## Understanding the `src` Attribute: Local vs. Remote Images The `src` value can point to two types of locations: ### Local (Relative) File Paths If your image is stored in the same project folder as your HTML file, you reference it by its relative path: ```html ``` This means the image file `banner.jpg` lives inside a subfolder called `photos`, relative to where your HTML file is saved. If the file path doesn't match exactly — including capitalization on case-sensitive servers — the image will break. ### Remote (Absolute) URLs You can also embed images hosted elsewhere on the web: ```html ``` Using external URLs is quick, but it introduces dependency on another server. If that server goes down or moves the file, your image disappears. For anything important, hosting images yourself is more reliable. ## Controlling Image Size with `width` and `height` By default, an image renders at its actual pixel dimensions. You can override this directly in HTML: ```html ``` Setting both `width` and `height` is good practice — it reserves space in the layout before the image loads, preventing **layout shift**, which affects both user experience and Core Web Vitals scores. That said, for most modern projects, image sizing is handled through **CSS** rather than inline HTML attributes, which gives you much more flexible, responsive control. ## Supported Image Formats 🖼️ Not all image files behave the same way in a browser. The format you choose affects file size, quality, and transparency support. | Format | Best For | Transparency | Browser Support | |--------|----------|--------------|-----------------| | **JPEG / JPG** | Photos, complex images | No | Universal | | **PNG** | Graphics, logos, screenshots | Yes | Universal | | **GIF** | Simple animations | Limited | Universal | | **SVG** | Icons, illustrations, logos | Yes | Modern browsers | | **WebP** | Photos and graphics (smaller size) | Yes | Most modern browsers | | **AVIF** | Next-gen compression | Yes | Growing support | For photographs, **JPEG** or **WebP** keeps file sizes manageable. For logos or images requiring a transparent background, **PNG** or **SVG** is the right category to reach for. ## Making Images Responsive A static pixel width breaks on smaller screens. The standard CSS approach is: ```html ``` This tells the image to never exceed its container's width, and to scale height proportionally. For production projects, this kind of rule typically lives in an external stylesheet rather than inline. HTML5 also introduced the **`srcset` attribute**, which lets you serve different image sizes depending on the user's screen resolution: ```html ``` The browser picks the most appropriate version based on the device — a major performance win on mobile. ## Using `

` and `