# 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 shape its behavior — makes a real difference in how your pages look and perform. ## The Core Syntax: The ` ` Tag HTML images use a **self-closing tag** called ` `. Unlike most HTML elements, it has no closing tag. The minimum you need to display an image looks like this: ```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 hurts accessibility and SEO, and modern HTML validators will flag it. ## Local vs. External Image Paths The value you put in `src` depends on where your image lives. **Local images** are files stored in your own project folder. The path is relative to your HTML file: ```html ``` If the image is in the same folder as your HTML file, just use the filename directly. If it's in a subfolder, include the folder name. If it's one level up, use `../`: ```html ``` **External images** are hosted on another server. Use the full URL: ```html ``` Be careful with external images — if that server goes down or moves the file, your image breaks. Hosting your own images gives you more control. ## Controlling Size: Width and Height Attributes You can set image dimensions directly in HTML: ```html ``` Values are in **pixels** by default. Including both `width` and `height` is considered best practice because it helps the browser **reserve space** for the image before it loads, reducing layout shift — a factor that affects both user experience and Core Web Vitals scores. If you only set one dimension, the browser will scale the other proportionally to avoid distortion. That said, most developers today prefer to control size with **CSS** rather than HTML attributes, which gives more flexibility across different screen sizes. ## Supported Image Formats Not all image formats behave the same way in a browser. 🖼️ | Format | Best For | Notes | |--------|----------|-------| | **JPEG / JPG** | Photos, complex images | Small file size, lossy compression | | **PNG** | Logos, transparency | Lossless, larger files | | **GIF** | Simple animations | Limited to 256 colors | | **SVG** | Icons, illustrations | Scales without quality loss | | **WebP** | General use | Modern format, excellent compression | | **AVIF** | High-quality photos | Very efficient, newer browser support | For most modern websites, **WebP** offers a strong balance of quality and file size. SVG is the go-to for logos and icons because it stays sharp at any resolution. ## Adding a Title and Linking an Image You can add a **tooltip** that appears on hover using the `title` attribute: ```html ``` To make an image clickable — linking somewhere when clicked — wrap it in an anchor tag: ```html ``` This is a standard pattern for linked logos and banner ads. ## Responsive Images: Serving the Right Size ✅ A single large image loaded on a small phone wastes bandwidth and slows things down. HTML provides tools to serve different images for different screen sizes. **The `srcset` attribute** lets you offer multiple image versions: ```html ``` The browser picks the most appropriate version based on the device's screen width and pixel density. The `src` acts as a fallback for older browsers. **The ` ` element** gives even finer control, letting you specify entirely different images for different conditions: ```html ``` This pattern is useful for serving modern formats like WebP while maintaining JPEG as a fallback. ## Lazy Loading for Performance For images below the fold — ones the user doesn't see until they scroll — you can defer loading with the `loading` attribute: ```html ``` **`loading="lazy"`** tells the browser to wait until the image is about to enter the viewport. This speeds up initial page load without any JavaScript required. For above-the-fold images (especially a hero image or logo), use **`loading="eager"`** or omit the attribute entirely — lazy loading those can actually slow down the perceived load time. ## Variables That Affect Your Implementation How you implement images in HTML isn't one-size-fits-all. Several factors shape the right approach: - **Project scale** — a single static page has different needs than a large CMS-driven site - **Performance targets** — sites chasing fast Core Web Vitals scores need responsive images and lazy loading - **Browser support requirements** — using AVIF or WebP requires fallbacks if older browsers matter to your audience - **CMS or framework** — platforms like WordPress or Next.js often handle image optimization differently, sometimes abstracting the raw HTML entirely - **Image content type** — photography, icons, illustrations, and UI graphics each suit different formats and compression strategies A developer building a personal portfolio has very different constraints than someone optimizing a high-traffic e-commerce product gallery. The same HTML attributes are available to both — but which ones matter, and how much effort to invest in optimization, depends entirely on the context of the project.