# 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 is simple, there are enough attributes, formats, and best practices involved that it's worth understanding the full picture before you start dropping image tags into your code. ## The Core HTML Image Tag HTML uses the ` ` tag to embed images. Unlike most HTML elements, ` ` is a **self-closing tag**, meaning it doesn't need a closing counterpart. The most basic syntax looks like this: ```html ``` Two attributes here are essential: - **`src`** (source) — tells the browser where to find the image file - **`alt`** (alternative text) — provides a text description if the image fails to load, and is read aloud by screen readers Skipping `alt` is technically allowed, but it's bad practice for both **accessibility** and **SEO**. Search engines can't "see" images — they read the alt text instead. ## Understanding the `src` Attribute: Paths Matter Where your image lives determines how you write the `src` value. There are three common approaches: **Relative paths** point to a file within your own project: ```html ``` **Absolute paths** use the full URL of an image: ```html ``` **Root-relative paths** start from the root of your domain: ```html ``` Relative paths are the most portable option when building a local project — they work regardless of which domain the site eventually lives on. Absolute URLs are commonly used when pulling in images from a CDN or external source. ## Controlling Image Size By default, an image renders at its natural dimensions. You can override this directly in HTML using `width` and `height` attributes: ```html ``` Values here are in **pixels**. You can also set size using CSS, which gives you far more flexibility — especially for responsive layouts. Many developers prefer to define dimensions in a stylesheet rather than inline, to keep HTML structure and visual presentation separate. 🖼️ One important reason to always specify `width` and `height` even if you plan to override them with CSS: it tells the browser how much space to reserve before the image loads, preventing **layout shift** — a sudden jump in page content that makes for a poor user experience and affects Core Web Vitals scores. ## Choosing the Right Image Format The format of your image file affects both quality and page load speed. Common options include: | Format | Best For | Supports Transparency | Notes | |--------|----------|-----------------------|-------| | **JPEG / JPG** | Photos, complex images | No | Lossy compression; small file sizes | | **PNG** | Graphics, logos, screenshots | Yes | Lossless; larger file sizes | | **GIF** | Simple animations | Partial | Limited color range | | **WebP** | Photos and graphics | Yes | Modern format; excellent compression | | **SVG** | Icons, logos, illustrations | Yes | Vector-based; scales without quality loss | **WebP** has strong browser support and typically produces smaller files than JPEG or PNG at comparable quality — making it a practical choice for performance-conscious projects. ## Adding Images with Responsive Design in Mind A fixed-width image can break layouts on smaller screens. The simplest responsive fix is a CSS rule: ```css img { max-width: 100%; height: auto; } ``` This allows images to scale down on narrow viewports while never exceeding their natural size on larger ones. For more advanced control, HTML offers the **`srcset`** attribute, which lets you provide multiple image versions at different resolutions: ```html ``` The browser then selects the most appropriate version based on the device's screen size and resolution. This matters significantly on mobile — loading a 2,000px-wide image on a phone screen wastes bandwidth and slows the page down. ## Linking an Image You can wrap the ` ` tag inside an anchor tag to make it clickable: ```html ``` This is commonly used for logo links, gallery thumbnails, or banner ads. ## The `

` and `