# 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 takes seconds to learn, there's more depth to it than most beginners expect. Getting it right affects page speed, accessibility, SEO, and how your site behaves across different devices. ## The Core HTML Image Tag HTML uses the ` ` element to embed images. Unlike most HTML elements, it's a **self-closing tag** — meaning it doesn't need a closing `` tag. Here's the most basic syntax: ```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, search engines, and cases where the image fails to load Skipping `alt` is a common mistake. It's not just a best practice — it's critical for accessibility compliance and SEO indexing. ## How the `src` Attribute Works The `src` value can point to an image in two main ways: ### Relative Paths Used when the image is hosted on the same server as your HTML file: ```html ``` This tells the browser to look for a folder called `images` in the same directory as the HTML file, then find `photo.jpg` inside it. ### Absolute URLs Used when the image is hosted externally: ```html ``` This works anywhere, but you're depending on an external server to keep that image available. If that URL breaks or the host removes the file, your image disappears. ## Controlling Image Size 🖼️ You can set dimensions directly in HTML using `width` and `height` attributes: ```html ``` Values are in pixels. Setting both attributes is recommended — even if you're also using CSS — because it tells the browser how much space to reserve before the image loads. This prevents **layout shift**, where content jumps around as images load in. That said, most developers control image sizing through CSS rather than inline HTML attributes for better responsiveness and maintainability. ## Image File Formats and When They Matter Choosing the right format affects file size, quality, and browser compatibility: | Format | Best For | Notes | |--------|----------|-------| | **JPEG / JPG** | Photos, complex images | Lossy compression; small file sizes | | **PNG** | Logos, screenshots, transparency | Lossless; larger files than JPEG | | **GIF** | Simple animations | Limited to 256 colors | | **SVG** | Icons, logos, illustrations | Scales without quality loss; text-based | | **WebP** | General use (modern browsers) | Smaller than JPEG/PNG at similar quality | | **AVIF** | High-efficiency images | Excellent compression; newer format | WebP and AVIF are increasingly the preferred formats for web performance, but older browsers may not support them — something worth checking based on your target audience. ## Making Images Responsive A fixed-width image looks fine on desktop but can overflow on mobile. The standard CSS approach is: ```html ``` This tells the image to scale down if the screen is narrower than the image's natural width, while maintaining its aspect ratio. For more complex use cases, the ` ` element lets you serve different image files depending on screen size or resolution: ```html ``` The browser picks the first ` ` that matches and falls back to the ` ` tag if none do. ## Accessibility and SEO Considerations The `alt` attribute does double duty: - **Screen readers** read it aloud to visually impaired users - **Search engines** use it to understand what the image depicts Good alt text is descriptive but concise: `alt="Red hiking boots on a mountain trail"` — not `alt="image1"` or a keyword-stuffed string. For **decorative images** that add no meaning (dividers, background textures), use an empty alt attribute: `alt=""`. This signals to screen readers to skip the image entirely. ## Variables That Affect Your Specific Approach 🔧 How you implement images in HTML isn't one-size-fits-all. A few key factors shape the right approach: - **Project scale** — A single static HTML page has different needs than a multi-page site or a CMS-driven platform - **Performance targets** — Sites prioritizing Core Web Vitals scores will lean heavily on modern formats, lazy loading (`loading="lazy"`), and responsive images - **Browser support requirements** — If your audience includes users on older browsers, cutting-edge formats like AVIF may need a fallback strategy - **Content type** — Product photos, illustrations, icons, and hero images each have different format and sizing priorities - **Hosting setup** — Some platforms or CDNs handle image optimization automatically; others leave it entirely to you A developer building a portfolio site, a team managing an e-commerce catalog, and someone hand-coding a blog all have genuinely different constraints — and the optimal implementation looks different in each case.