<img>, src, alt, and AttributesHTML images enhance the visual design and user experience of web pages. Images are inserted into HTML documents using the self-closing <img> tag, which embeds graphic files such as WebP, PNG, JPEG, SVG, and GIF.
The <img> tag is an inline, empty tag (it has no closing tag). It relies on key attributes to define the source file, fallback text, and dimensions.
<img src="developer-desktop.webp" alt="Developer workstation with dual monitors" width="800" height="500" loading="lazy">
Key attributes for <img>:
src (Source): Specifies the absolute URL or relative file path to the image asset.alt (Alternative Text): Required text description rendered if the image fails to load and read aloud by screen readers for accessibility.width & height: Explicit width and height values in pixels to preserve aspect ratio and prevent Cumulative Layout Shift (CLS).loading="lazy": Defers loading off-screen images until the user scrolls near them, improving initial page load speed.Selecting the right image format ensures optimal visual quality and fast page load performance:
flowchart TD
A["Web Image Formats"] --> B["Vector Graphics"]
A --> C["Raster / Bitmap Images"]
B --> B1["SVG (.svg): Scalable graphics, icons & logos"]
C --> C1["WebP (.webp): Modern standard, high compression & transparency"]
C --> C2["PNG (.png): Lossless compression with alpha transparency"]
C --> C3["JPEG (.jpg): Photographic images with lossy compression"]
C --> C4["AVIF (.avif): Next-gen format with superior compression"]
<picture> and srcsetFor responsive layouts across mobile and desktop viewports, use the <picture> element or srcset attribute to serve optimal image sizes or modern formats dynamically:
<picture>
<!-- Serve WebP for modern browsers -->
<source srcset="hero-dark.webp" type="image/webp" media="(prefers-color-scheme: dark)">
<source srcset="hero-mobile.webp" media="(max-width: 640px)">
<!-- Fallback default img tag -->
<img src="hero-default.jpg" alt="Developer learning dashboard hero banner" width="1200" height="600" loading="eager">
</picture>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Images Practical Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h1>Product Showcase</h1>
<!-- Image container card -->
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 12px; max-width: 600px; border: 1px solid #334155;">
<h2>Modern Developer Workspace</h2>
<!-- HTML Image with responsive styling and accessibility -->
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
alt="Laptop displaying web development code on screen"
width="550"
height="350"
style="width: 100%; height: auto; border-radius: 8px; display: block;"
loading="lazy">
<p style="color: #94a3b8; font-size: 0.95rem; margin-top: 1rem; line-height: 1.5;">
A clean modern developer workspace setup with syntax-highlighted code editor on screen.
</p>
</div>
</body>
</html>
alt text: Screen readers rely on alt attributes for web accessibility (WCAG compliance). Use empty alt="" only for decorative assets.width and height attributes: Providing layout dimensions prevents layout shifts (CLS) when images render asynchronously.loading="lazy" for below-the-fold assets: Defer loading non-critical offscreen images to speed up initial page speed metrics (LCP).Create an HTML image tag for a user profile avatar. Include proper src, alt, explicit width and height attributes, and style it as a rounded circle using CSS border radius!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.