- What are HTML Images?
- Image Syntax
- src Attribute
- alt Attribute
- Image Sizing
- Responsive Images
- Image Formats
- Common Mistakes
- Try It
- FAQ
What are HTML Images?
The <img> tag embeds an image into a webpage. It's a void element — it has no closing tag and no content between tags. All the information is in its attributes: where to find the image (src), what it shows (alt), and how big it is (width/height).
Importantly, images aren't literally embedded in your HTML file. The browser reads your HTML, sees the src URL, makes a separate HTTP request to fetch the image file, and then displays it in the right place on the page. This is why a broken image shows a placeholder icon — the browser knows where to put it but couldn't fetch the file.
Image Syntax
<!-- Minimum required --> <img src="photo.jpg" alt="Mountain landscape at sunset" /> <!-- With dimensions (always recommended) --> <img src="photo.jpg" alt="Mountain landscape at sunset" width="800" height="600" />
The src Attribute
The src attribute is required and specifies the image URL or path. Three types of paths work:
<!-- From the web --> <img src="https://example.com/photo.jpg" alt="Photo"/> <!-- Same folder as your HTML file --> <img src="logo.png" alt="Logo"/> <!-- In a subfolder --> <img src="./images/hero.jpg" alt="Hero image"/> <!-- In a parent directory --> <img src="../assets/icon.svg" alt="Icon"/>
The alt Attribute
The alt attribute provides text that displays when the image fails to load, and is read aloud by screen readers. It's also indexed by search engines. Writing good alt text is one of the easiest things you can do for accessibility and SEO simultaneously.
<!-- GOOD: descriptive --> <img src="team.jpg" alt="Four developers sitting around a laptop at TipsInLearning office"/> <!-- BAD: useless --> <img src="team.jpg" alt="image"/> <!-- Decorative image: use empty alt --> <img src="divider.png" alt=""/>
Image Sizing
Always specify width and height — even when CSS controls the visual size. These intrinsic dimensions tell the browser how much layout space to reserve before the image loads, preventing page jump (Cumulative Layout Shift).
<!-- Set intrinsic size in HTML (prevents layout shift) --> <img src="photo.jpg" alt="Photo" width="800" height="600"/> <!-- Control visual size with CSS --> <style> img { width: 400px; height: auto; } </style>
Responsive Images
Use CSS to make images fluid, and srcset or <picture> to serve appropriately-sized files to different screen sizes:
<!-- Fluid: scales with container --> <style> img { max-width: 100%; height: auto; } </style> <!-- srcset: browser picks the right resolution --> <img src="photo-sm.jpg" srcset="photo-sm.jpg 480w, photo-md.jpg 800w, photo-lg.jpg 1200w" alt="Responsive photo" loading="lazy"/> <!-- picture: different crops for different screens --> <picture> <source media="(max-width: 600px)" srcset="portrait.jpg"/> <img src="landscape.jpg" alt="Photo"/> </picture>
Image Formats
Common Mistakes
Writing alt="image" is nearly as bad as no alt at all. Describe what the image actually shows. Screen readers read it, Google indexes it, and it appears when the image fails.
No dimensions means no reserved space. The page jumps as images load. This hurts your Core Web Vitals CLS score and the user experience on slow connections.
A 5MB photo scaled down to 300px with CSS is still a 5MB download. Compress images before uploading using TinyPNG, Squoosh, or ImageOptim — you can cut 60-80% of file size with no visible quality loss.
Questions & Answers
Common questions beginners ask about this topic:
Yes — and this matters more than most beginners realize. When you don't specify dimensions, the browser doesn't know how much space to reserve while the image loads. As the image arrives, the page layout shifts — text moves, buttons jump. Google's Core Web Vitals calls this Cumulative Layout Shift (CLS) and it hurts your search rankings. Specifying width and height in your HTML lets the browser reserve the right amount of space before the image downloads.
Describe what the image shows — as you'd explain it to someone who can't see it. For a photo of a dog: alt="Golden retriever running through a park with a tennis ball". For a chart: describe what the data shows. For a logo used as a link: describe where the link goes. For purely decorative images — dividers, spacers, backgrounds — use an empty alt: alt="". This tells screen readers to skip the image rather than reading out a confusing filename.
It depends on the image type. WebP is the best modern format — it's smaller than JPEG and PNG at the same quality and supports transparency. Use JPEG for photos when WebP isn't supported. Use PNG for graphics that need transparent backgrounds. Use SVG for icons, logos, and illustrations — they scale to any size without pixelation. For a practical approach: save as WebP first with a JPEG fallback using the <picture> element.
Both let you serve different images at different sizes, but for different reasons. srcset gives the browser a list of image files at different resolutions and lets it pick the best one for the screen — useful for serving smaller files on mobile. The <picture> element lets you serve completely different images at different breakpoints — for example, a wide landscape crop on desktop and a tighter portrait crop on mobile. Use srcset for resolution switching. Use picture for art direction (different compositions at different sizes).
Almost always a wrong file path in the src attribute. Check: is the filename spelled correctly including case? (image.jpg ≠ Image.jpg on Linux servers.) Is the file in the right folder relative to your HTML file? Are you using forward slashes not backslashes? Open browser DevTools (F12 → Network tab) and look at the failed image request — the exact URL the browser tried will be shown, making the problem immediately obvious.