# How to Add an Image in HTML: A Complete Guide Adding images to a webpage is one of the most fundamental skills in HTML. Whether you're building your first site or brushing up on the basics, understanding how the ` ` tag works — and all the attributes that go with it — sets the foundation for clean, accessible, and well-performing web pages. ## The Core Tag: ` ` HTML images are inserted using the **self-closing ` ` tag**. 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, search engines, and cases where the image fails to load Leaving out `alt` is a common mistake. It matters for **accessibility** (users relying on assistive technology) and **SEO** (search engines index alt text to understand image content). ## Specifying the Image Path: Relative vs. Absolute URLs The value you give `src` can be one of two types: **Relative paths** point to a file within your own project structure: ```html ``` **Absolute URLs** point to an image hosted elsewhere on the web: ```html ``` Relative paths are generally preferred for images you host yourself — they're more portable and don't break if your domain changes. Absolute URLs work for externally hosted images, but you depend on that server staying available. ## Controlling Image Size in HTML You can set dimensions directly on the ` ` tag using **`width`** and **`height`** attributes: ```html ``` Values are in **pixels** by default when written as plain numbers. A few important points: - Always specify both `width` and `height` when possible. This tells the browser how much space to reserve before the image loads, **reducing layout shift** — a key factor in Core Web Vitals scores. - Resizing an image via HTML attributes doesn't reduce the file size — a 5MB image scaled down in the browser still loads at 5MB. For performance, resize images at the source. - For responsive design, most developers rely on **CSS** rather than HTML attributes to control image sizing (e.g., `max-width: 100%`). ## Image File Formats and When They Matter 🖼️ Different image formats serve different purposes: | Format | Best For | Supports Transparency | |--------|----------|-----------------------| | JPEG / JPG | Photos, complex images | No | | PNG | Graphics, logos, screenshots | Yes | | GIF | Simple animations | Partial | | WebP | Photos and graphics (modern) | Yes | | SVG | Icons, logos, scalable graphics | Yes | **WebP** is increasingly the format of choice for web use — it delivers smaller file sizes than JPEG or PNG at comparable quality. However, your target audience's browser support should guide format decisions. ## Adding a Title and Linking an Image The **`title` attribute** adds a tooltip when a user hovers over the image: ```html ``` To make an image a clickable link, wrap it in an ` ` tag: ```html ``` This is a straightforward pattern used for logo links, banners, and image-based navigation. ## Responsive Images: `srcset` and `sizes` For modern web development, basic ` ` tags often aren't enough. The **`srcset` attribute** lets you provide multiple image versions for different screen resolutions or viewport sizes: ```html ``` This tells the browser: - What image files are available and their widths - How wide the image will display at different viewport sizes - The browser then picks the most appropriate file This matters significantly for **mobile performance** — serving a 1200px image to a 375px phone screen wastes bandwidth and slows load times. ## Common Mistakes to Avoid - **Missing `alt` text** — hurts accessibility and SEO - **Using display-size attributes to resize large files** — always optimize images before uploading - **Broken relative paths** — double-check your folder structure if images aren't loading - **Hotlinking without permission** — linking to images hosted on another site without authorization can get your access blocked and raises ethical concerns - **No `width`/`height` attributes** — leads to layout shift during page load ## What Determines the Right Approach for Your Project The way you implement images in HTML depends heavily on your specific situation: - **Static personal sites** may only need basic ` ` tags with relative paths - **Performance-focused projects** benefit from `srcset`, WebP format, and lazy loading (`loading="lazy"`) - **CMS-driven sites** (WordPress, etc.) often handle responsive images automatically - **Accessibility-first projects** require thoughtful alt text for every image — not just filenames - **Developers using frameworks** like React or Vue work with image components that abstract some of this, but the underlying HTML attributes still apply The technical skill level involved ranges from dropping in a single ` ` tag (genuinely beginner-friendly) to managing full responsive image pipelines with multiple formats and breakpoints. Which end of that spectrum fits your project depends on what you're building, who your audience is, and how much control you have over your hosting environment. 🧩