# How to Attach an Image in HTML: A Complete Guide Adding images to a webpage is one of the most fundamental skills in web development. Whether you're building a personal portfolio, a blog, or a full-scale web application, knowing how to correctly embed images in HTML affects everything from page layout to load speed to accessibility. ## The Core Tag: ` ` in HTML HTML uses the **` ` element** to embed images directly into a webpage. Unlike most HTML elements, ` ` is a **self-closing tag** — it doesn't need a closing counterpart. The basic syntax looks like this: ```html ``` Two attributes are essential here: - **`src`** (source) — tells the browser where to find the image file - **`alt`** (alternative text) — provides a text description if the image can't load, and is critical for screen readers and SEO Leaving out `alt` isn't just bad practice — it creates accessibility and ranking problems. Search engines can't "see" images; they read the `alt` text instead. ## Understanding the `src` Attribute: Local vs. Remote Paths 🖼️ Where your image lives determines how you write the `src` value. This is where many beginners run into their first errors. ### Using a Local File Path If the image is stored in the same folder as your HTML file: ```html ``` If it's inside a subfolder called `images`: ```html ``` To go up one directory level: ```html ``` Getting the path wrong is one of the most common causes of broken images — the browser simply shows a placeholder icon instead. ### Using an Absolute URL (Remote Image) You can also link directly to an image hosted elsewhere on the web: ```html ``` This works, but it makes your page dependent on that external server. If the remote image is deleted or moved, your page breaks — and you have no control over it. ## Controlling Image Size in HTML By default, an image renders at its native dimensions. You can control this with the **`width`** and **`height`** attributes: ```html ``` Values here are in pixels. Setting both dimensions is recommended because it **reserves space in the layout** before the image loads, reducing layout shift — a factor that affects user experience and Core Web Vitals scores. You can also control image size through CSS, which gives you far more flexibility: ```css img { max-width: 100%; height: auto; } ``` This pattern is the foundation of **responsive images** — images that scale gracefully across screen sizes. ## Image Formats: Which File Types Work in HTML The ` ` tag supports all common web image formats, but they behave differently: | Format | Best For | Supports Transparency | File Size | |--------|----------|----------------------|-----------| | **JPEG/JPG** | Photos, complex imagery | No | Moderate | | **PNG** | Graphics, logos, screenshots | Yes | Larger | | **GIF** | Simple animations | Limited | Small–moderate | | **SVG** | Icons, logos, illustrations | Yes | Very small | | **WebP** | Photos + graphics with compression | Yes | Smaller than JPEG/PNG | | **AVIF** | Next-gen compression | Yes | Smallest | Modern browsers support WebP and AVIF well, but browser support for cutting-edge formats can vary — especially on older versions. Using the ` ` element lets you offer multiple formats as fallbacks: ```html ``` The browser picks the first format it supports and ignores the rest. ## Additional Attributes Worth Knowing Beyond `src` and `alt`, several other attributes shape how images behave: - **`title`** — shows a tooltip on hover (not a substitute for `alt`) - **`loading="lazy"`** — defers loading images until they're near the viewport, improving initial page speed - **`srcset`** — lets you specify multiple image resolutions so the browser loads the right size for the device's screen - **`decoding="async"`** — allows the browser to decode the image off the main thread, keeping the page responsive A well-optimized image tag might look like this: ```html ``` ## Making Images Clickable 🔗 Wrapping an ` ` tag inside an ` ` tag turns the image into a hyperlink: ```html ``` When doing this, the `alt` text should describe the destination or action, not just the image itself — since the image is now functioning as a link. ## The Variables That Shape Your Approach How you attach images in HTML isn't a single fixed decision — it shifts based on several factors: - **Project scale** — a single static HTML page works fine with local relative paths; a large CMS-driven site typically uses dynamic URLs or a CDN - **Performance requirements** — high-traffic sites benefit significantly from `srcset`, `loading="lazy"`, and modern formats like WebP - **Browser support targets** — if you're supporting older browsers, you may need to stick with JPEG and PNG rather than AVIF - **Accessibility standards** — projects held to WCAG compliance require meaningful, descriptive `alt` text on every image - **Hosting environment** — images served from a CDN behave differently than files on a shared server, and that affects which path structure makes sense A developer building a quick prototype has different priorities than one optimizing a production e-commerce site for Core Web Vitals. The tag is the same; everything around it depends on context.
``` Two attributes are essential here: - **`src`** (source) — tells the browser where to find the image file - **`alt`** (alternative text) — provides a text description if the image can't load, and is critical for screen readers and SEO Leaving out `alt` isn't just bad practice — it creates accessibility and ranking problems. Search engines can't "see" images; they read the `alt` text instead. ## Understanding the `src` Attribute: Local vs. Remote Paths 🖼️ Where your image lives determines how you write the `src` value. This is where many beginners run into their first errors. ### Using a Local File Path If the image is stored in the same folder as your HTML file: ```html 
``` If it's inside a subfolder called `images`: ```html 
``` To go up one directory level: ```html 
``` Getting the path wrong is one of the most common causes of broken images — the browser simply shows a placeholder icon instead. ### Using an Absolute URL (Remote Image) You can also link directly to an image hosted elsewhere on the web: ```html 
``` This works, but it makes your page dependent on that external server. If the remote image is deleted or moved, your page breaks — and you have no control over it. ## Controlling Image Size in HTML By default, an image renders at its native dimensions. You can control this with the **`width`** and **`height`** attributes: ```html 
``` ## Making Images Clickable 🔗 Wrapping an ` 
``` When doing this, the `alt` text should describe the destination or action, not just the image itself — since the image is now functioning as a link. ## The Variables That Shape Your Approach How you attach images in HTML isn't a single fixed decision — it shifts based on several factors: - **Project scale** — a single static HTML page works fine with local relative paths; a large CMS-driven site typically uses dynamic URLs or a CDN - **Performance requirements** — high-traffic sites benefit significantly from `srcset`, `loading="lazy"`, and modern formats like WebP - **Browser support targets** — if you're supporting older browsers, you may need to stick with JPEG and PNG rather than AVIF - **Accessibility standards** — projects held to WCAG compliance require meaningful, descriptive `alt` text on every image - **Hosting environment** — images served from a CDN behave differently than files on a shared server, and that affects which path structure makes sense A developer building a quick prototype has different priorities than one optimizing a production e-commerce site for Core Web Vitals. The tag is the same; everything around it depends on context. 
``` ## Making Images Clickable 🔗 Wrapping an `