Beyond src and alt, the img element supports several attributes that control how images are displayed and loaded. Understanding these attributes helps you create faster, more accessible websites.
Width and Height Attributes
The width and height attributes specify the dimensions of the image in pixels.
<img src="photo.jpg" alt="Landscape photo" width="800" height="600">
<img src="logo.png" alt="Company Logo" width="200" height="100">Why Specify Dimensions?
Defining width and height is important for several reasons:
- Prevents layout shift: Browser reserves space before image loads
- Improves performance: Better Core Web Vitals scores
- Better user experience: Page doesn't jump around while loading
- Accessibility: Screen readers can announce image dimensions
💡 Best Practice:
Always specify width and height attributes, even if you'll resize images with CSS. The browser uses these to calculate aspect ratio and prevent layout shift.
Maintaining Aspect Ratio
When you specify both width and height, modern browsers automatically maintain the aspect ratio:
<!-- Original image is 1200x800 pixels -->
<img src="photo.jpg"
alt="Mountain landscape"
width="1200"
height="800">
<!-- CSS can resize while maintaining aspect ratio -->
<style>
img {
max-width: 100%;
height: auto;
}
</style>Responsive Image Sizing
<!-- Set HTML dimensions to actual file size -->
<img src="large-photo.jpg"
alt="Sunset"
width="2000"
height="1500">
<!-- Use CSS to make it responsive -->
<style>
img {
max-width: 100%;
height: auto;
}
</style>The Title Attribute
The title attribute provides additional information that appears as a tooltip when users hover over the image:
<img src="artwork.jpg"
alt="Abstract painting with blue and red colors"
title="Created by Jane Smith, 2024"
width="600"
height="800">
<img src="chart.png"
alt="Sales growth chart"
title="Click to view detailed report"
width="800"
height="400">⚠️ Important Note:
Don't rely on the title attribute for critical information. It's not accessible to keyboard users or touch screen users, and screen readers may not announce it consistently. Use title for supplementary information only.
The Loading Attribute (Lazy Loading)
The loading attribute controls when the browser loads the image. This is crucial for page performance!
Loading Values
<!-- Load immediately (default) -->
<img src="hero.jpg" alt="Hero image" loading="eager">
<!-- Lazy load (load when near viewport) -->
<img src="footer-image.jpg" alt="Footer decoration" loading="lazy">
<!-- Let browser decide (default if omitted) -->
<img src="content.jpg" alt="Content image">When to Use Lazy Loading
✅ Use loading="lazy" for:
- Images below the fold (not immediately visible)
- Images in long articles or blog posts
- Gallery images
- Product thumbnails in lists
- Images at the bottom of the page
❌ Don't use loading="lazy" for:
- Above-the-fold images (visible without scrolling)
- Hero images or banners
- Logos in the header
- Critical images needed immediately
- Very small images (not worth the optimization)
Lazy Loading Example
<!DOCTYPE html>
<html>
<body>
<!-- Hero image - load immediately -->
<img src="hero.jpg"
alt="Welcome banner"
width="1920"
height="600"
loading="eager">
<!-- Content images - lazy load -->
<article>
<img src="photo1.jpg"
alt="Article photo 1"
width="800"
height="600"
loading="lazy">
<img src="photo2.jpg"
alt="Article photo 2"
width="800"
height="600"
loading="lazy">
</article>
</body>
</html>The Decoding Attribute
The decoding attribute provides a hint to the browser about how to decode the image:
<!-- Sync: Block rendering until image is decoded -->
<img src="critical.jpg" alt="Critical image" decoding="sync">
<!-- Async: Don't block rendering (default) -->
<img src="photo.jpg" alt="Photo" decoding="async">
<!-- Auto: Let browser decide -->
<img src="image.jpg" alt="Image" decoding="auto">In most cases, you can omit this attribute or use decoding="async" for better performance.
Practical Examples
Optimized Hero Image
<header>
<img src="hero-banner.jpg"
alt="Modern office workspace with laptops and coffee"
width="1920"
height="800"
loading="eager"
decoding="sync">
</header>Blog Article with Images
<article>
<h1>10 Tips for Better Photography</h1>
<!-- Featured image - loads immediately -->
<img src="featured.jpg"
alt="Professional camera on tripod"
width="1200"
height="800"
loading="eager">
<p>Lorem ipsum dolor sit amet...</p>
<!-- Content images - lazy load -->
<img src="tip1.jpg"
alt="Camera settings display showing aperture and shutter speed"
width="800"
height="600"
loading="lazy">
<img src="tip2.jpg"
alt="Photographer adjusting lens in golden hour light"
width="800"
height="600"
loading="lazy">
</article>Product Gallery
<section class="product-gallery">
<h2>Product Images</h2>
<!-- Main product image -->
<img src="product-main.jpg"
alt="Blue ceramic coffee mug - front view"
width="800"
height="800"
loading="eager">
<!-- Thumbnail images - lazy load -->
<div class="thumbnails">
<img src="product-side.jpg"
alt="Blue ceramic coffee mug - side view"
width="200"
height="200"
loading="lazy">
<img src="product-top.jpg"
alt="Blue ceramic coffee mug - top view"
width="200"
height="200"
loading="lazy">
<img src="product-handle.jpg"
alt="Blue ceramic coffee mug - handle detail"
width="200"
height="200"
loading="lazy">
</div>
</section>Complete Image with All Attributes
<img src="/images/products/laptop.jpg"
alt="Silver MacBook Pro laptop with 16-inch display"
width="1200"
height="800"
loading="lazy"
decoding="async"
title="MacBook Pro - Click to view details">Performance Tips
🚀 Image Performance Checklist:
- Always specify width and height to prevent layout shift
- Use loading="lazy" for below-the-fold images
- Optimize and compress images before uploading
- Use appropriate image formats (we'll cover this next lesson)
- Serve responsive images for different screen sizes
- Consider using a CDN for faster delivery
- Use modern formats like WebP when possible
Common Mistakes
❌ Common mistakes:
- Not specifying width and height (causes layout shift)
- Using loading="lazy" on above-the-fold images
- Setting dimensions that don't match image aspect ratio
- Relying on title attribute for important information
- Using enormous image files without compression
- Not testing image loading on slow connections
Browser Support
The loading attribute is supported in all modern browsers (Chrome 77+, Firefox 75+, Safari 15.4+, Edge 79+). For older browsers, images will simply load normally without lazy loading.
Best Practices Summary
- Always include: src, alt, width, height
- For better performance: Add loading="lazy" to below-the-fold images
- Maintain aspect ratio: Use correct width/height values
- Use CSS for responsive sizing: max-width: 100%; height: auto;
- Test thoroughly: Check on different devices and connection speeds
- Monitor performance: Use tools like Lighthouse to check image optimization
Key Takeaways
widthandheightprevent layout shift and improve performancetitleprovides tooltip text but shouldn't contain critical infoloading="lazy"defers loading images until they're needed- Use lazy loading for below-the-fold images only
decoding="async"improves rendering performance- Always specify dimensions even if using CSS for sizing
- Image optimization is crucial for web performance
What's Next?
Now that you understand image attributes, you're ready to learn about different image formats. In the next lesson, we'll explore JPG, PNG, GIF, SVG, and WebP—and when to use each format for best results.