# How to Add a Picture in HTML: A Complete Guide Adding images to a web page is one of the most fundamental skills in HTML. Whether you're building your first static site or brushing up on the basics, understanding how the ` ` tag works — and what controls it — gives you real control over how images appear across different browsers and devices. ## The Core Tag: How HTML Images Work HTML uses a **self-closing ` ` tag** to embed images. Unlike most HTML elements, it doesn't need a closing tag. 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)** — describes the image for screen readers and search engines, and displays if the image fails to load These aren't optional extras. Missing `alt` text hurts accessibility and SEO. A missing or broken `src` means no image at all. ## Linking to Images: Paths and URLs Where your image lives determines how you write the `src` value. There are three common approaches: **Relative paths** point to image files stored alongside your HTML files: ```html ``` This works when your image is in a folder called `images` in the same directory as your HTML file. Relative paths are the standard choice for images you host yourself. **Absolute paths** include the full URL: ```html ``` Use this when linking to images hosted on an external server or a CDN (Content Delivery Network). **Root-relative paths** start with a forward slash and are useful in larger site structures: ```html ``` This path resolves from the root of your domain, making it reliable across nested page structures. ## Controlling Image Size in HTML By default, a browser renders an image at its natural pixel dimensions. You can override this using **`width` and `height` attributes** directly in the tag: ```html ``` Values are in pixels unless you use CSS. A few things worth knowing: - Always specify **both width and height** when possible — it helps the browser reserve layout space before the image loads, reducing page layout shifts - **Stretching an image beyond its natural size** will cause visible pixelation - For responsive design, most developers leave size control to CSS rather than hardcoding attributes In CSS, a common pattern for fluid images is: ```css img { max-width: 100%; height: auto; } ``` This ensures images scale down on smaller screens without overflowing their containers. ## Supported Image Formats 🖼️ Not all image formats behave the same way in browsers. Here's a quick comparison: | Format | Best For | Browser Support | Notes | |--------|----------|-----------------|-------| | **JPEG / JPG** | Photos, complex images | Universal | Lossy compression; smaller file sizes | | **PNG** | Graphics, transparency | Universal | Lossless; larger files than JPEG | | **GIF** | Simple animations | Universal | Limited to 256 colors | | **SVG** | Icons, logos, illustrations | Modern browsers | Scales without quality loss | | **WebP** | Photos and graphics | Most modern browsers | Smaller than JPEG/PNG at similar quality | | **AVIF** | Photos | Newer browsers | Excellent compression; limited support | Choosing the right format affects both visual quality and page load speed — two factors that directly influence user experience and search rankings. ## Adding Context: Figures and Captions When an image needs a visible caption, HTML provides the **` ` and ` ` elements**: ```html Figure 1: Q1 sales growth compared to the previous year. ``` This structure is semantically meaningful — it groups the image with its description in a way that browsers and assistive technologies understand, rather than just placing a paragraph of text nearby. ## Responsive Images: Serving the Right Size Modern HTML includes tools for serving different image sizes to different devices. The **`srcset` attribute** lets you list multiple image files: ```html ``` The browser picks the most appropriate file based on screen size and pixel density. This matters most on mobile devices and high-DPI (retina) displays, where loading unnecessarily large images wastes bandwidth and slows load times. ## Variables That Affect How Your Image Displays Even with correct syntax, image rendering depends on several factors specific to your setup: - **File path accuracy** — a single typo in the `src` value breaks the image entirely - **Server configuration** — some hosts block certain file types or require specific directory permissions - **Image file format compatibility** — older browsers may not support WebP or AVIF - **Page layout and CSS rules** — parent container styles (like `overflow: hidden` or fixed widths) can clip or distort images unexpectedly - **Screen resolution** — a standard JPEG that looks sharp on a desktop monitor may appear blurry on a high-DPI mobile screen without proper `srcset` handling How much any of this matters depends on your project. A single-page personal site has very different requirements than an image-heavy editorial site optimized for mobile traffic across varying connection speeds. 🌐 The right combination of format, sizing approach, and markup structure shifts depending on your audience's devices, your hosting environment, and how much control you have over your CSS — factors only your specific setup can answer.
``` Two attributes are essential here: - **`src` (source)** — tells the browser where to find the image file - **`alt` (alternative text)** — describes the image for screen readers and search engines, and displays if the image fails to load These aren't optional extras. Missing `alt` text hurts accessibility and SEO. A missing or broken `src` means no image at all. ## Linking to Images: Paths and URLs Where your image lives determines how you write the `src` value. There are three common approaches: **Relative paths** point to image files stored alongside your HTML files: ```html 
``` This works when your image is in a folder called `images` in the same directory as your HTML file. Relative paths are the standard choice for images you host yourself. **Absolute paths** include the full URL: ```html 
``` Use this when linking to images hosted on an external server or a CDN (Content Delivery Network). **Root-relative paths** start with a forward slash and are useful in larger site structures: ```html 
``` This path resolves from the root of your domain, making it reliable across nested page structures. ## Controlling Image Size in HTML By default, a browser renders an image at its natural pixel dimensions. You can override this using **`width` and `height` attributes** directly in the tag: ```html 
``` Values are in pixels unless you use CSS. A few things worth knowing: - Always specify **both width and height** when possible — it helps the browser reserve layout space before the image loads, reducing page layout shifts - **Stretching an image beyond its natural size** will cause visible pixelation - For responsive design, most developers leave size control to CSS rather than hardcoding attributes In CSS, a common pattern for fluid images is: ```css img { max-width: 100%; height: auto; } ``` This ensures images scale down on smaller screens without overflowing their containers. ## Supported Image Formats 🖼️ Not all image formats behave the same way in browsers. Here's a quick comparison: | Format | Best For | Browser Support | Notes | |--------|----------|-----------------|-------| | **JPEG / JPG** | Photos, complex images | Universal | Lossy compression; smaller file sizes | | **PNG** | Graphics, transparency | Universal | Lossless; larger files than JPEG | | **GIF** | Simple animations | Universal | Limited to 256 colors | | **SVG** | Icons, logos, illustrations | Modern browsers | Scales without quality loss | | **WebP** | Photos and graphics | Most modern browsers | Smaller than JPEG/PNG at similar quality | | **AVIF** | Photos | Newer browsers | Excellent compression; limited support | Choosing the right format affects both visual quality and page load speed — two factors that directly influence user experience and search rankings. ## Adding Context: Figures and Captions When an image needs a visible caption, HTML provides the **` 
``` The browser picks the most appropriate file based on screen size and pixel density. This matters most on mobile devices and high-DPI (retina) displays, where loading unnecessarily large images wastes bandwidth and slows load times. ## Variables That Affect How Your Image Displays Even with correct syntax, image rendering depends on several factors specific to your setup: - **File path accuracy** — a single typo in the `src` value breaks the image entirely - **Server configuration** — some hosts block certain file types or require specific directory permissions - **Image file format compatibility** — older browsers may not support WebP or AVIF - **Page layout and CSS rules** — parent container styles (like `overflow: hidden` or fixed widths) can clip or distort images unexpectedly - **Screen resolution** — a standard JPEG that looks sharp on a desktop monitor may appear blurry on a high-DPI mobile screen without proper `srcset` handling How much any of this matters depends on your project. A single-page personal site has very different requirements than an image-heavy editorial site optimized for mobile traffic across varying connection speeds. 🌐 The right combination of format, sizing approach, and markup structure shifts depending on your audience's devices, your hosting environment, and how much control you have over your CSS — factors only your specific setup can answer.