HTML Images

Introduction to HTML Images

HTML provides several ways to include images, with the <img> tag being the most common. Modern HTML also includes features for responsive images, accessibility, and performance optimization.

Why Images Matter:

• Visual Appeal: Images make websites more engaging and visually appealing
• Information Delivery: Complex information can be conveyed more effectively with images
• SEO Benefits: Properly optimized images can improve search engine rankings
• User Experience: Images help guide users and improve content comprehension

<img src="image.jpg" alt="Description of the image" width="400" height="300">

The <img> Tag

The <img> tag is the primary element for embedding images in HTML. It's a self-closing tag (doesn't require a closing tag) and contains attributes that define the image source, dimensions, and alternative text.

Essential Attributes:

• src: Specifies the path to the image file (required)
• alt: Provides alternative text for accessibility (required)
• width/height: Defines the display dimensions of the image
• loading: Controls when the image loads (lazy/eager)
• srcset/sizes: For responsive images

Image Example with Essential Attributes:

This is a placeholder image demonstrating proper image implementation.

<img src="example.jpg" alt="A beautiful landscape with mountains" 
     width="800" height="600" loading="lazy" class="img-fluid">

Try It Yourself: Image Attributes

Experiment with different image attributes:

Alt Text:

Width (px): 400px

Notice how changing the width affects the image display while maintaining aspect ratio.

Image Formats

Choosing the right image format is crucial for web performance and quality. Different formats have different strengths and use cases.

JPEG

~45KB

Best for photographs with many colors

PNG

~80KB

Best for graphics with transparency

GIF

~120KB

Best for simple animations

WebP

~25KB

Modern format with better compression

SVG

~5KB

Vector format, perfect for icons

Responsive Images

Responsive images adapt to different screen sizes and resolutions, ensuring optimal viewing experiences across devices while minimizing bandwidth usage.

srcset and sizes Attributes

The srcset attribute allows you to specify multiple image sources with different resolutions, while the sizes attribute tells the browser how much space the image will take up in the layout.

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Responsive image example">

Picture Element

The <picture> element provides more control over image sources, allowing you to specify different images based on media queries or to serve different formats.

<picture>
    <source media="(min-width: 1000px)" srcset="large.jpg">
    <source media="(min-width: 600px)" srcset="medium.jpg">
    <source type="image/webp" srcset="image.webp">
    <img src="small.jpg" alt="Fallback image">
</picture>

Responsive Images in Action

Resize your browser window to see how the image below adapts:

On smaller screens, a smaller image file is loaded, saving bandwidth.

Image Accessibility

Making images accessible ensures that all users, including those using screen readers or with visual impairments, can understand the content and purpose of images on your website.

Alt Text Best Practices

• Be descriptive but concise: Describe the content and function of the image
• Context matters: The same image might need different alt text depending on context
• Don't include "image of" or "picture of": Screen readers already announce it as an image
• For decorative images: Use empty alt text (alt="")
• For complex images: Provide a longer description elsewhere or use the longdesc attribute

Figure and Figcaption

Use the <figure> and <figcaption> elements to associate images with captions, which improves both accessibility and semantic structure.

<figure>
    <img src="chart.jpg" alt="Bar chart showing quarterly sales growth">
    <figcaption>Figure 1: Quarterly sales growth for 2025</figcaption>
</figure>

Image Optimization

Optimizing images is crucial for web performance. Large, unoptimized images can significantly slow down page loading times, negatively impacting user experience and SEO.

Optimization Techniques

• Choose the right format: Select the most efficient format for each image type
• Compress images: Use tools to reduce file size without noticeable quality loss
• Resize images: Serve images at the exact dimensions needed
• Use responsive images: Serve different sizes to different devices
• Lazy loading: Defer loading of images until they're needed
• Content Delivery Network (CDN): Use CDNs for faster image delivery

Image Compression Tools

• Online tools: TinyPNG, Squoosh, Compressor.io
• Desktop applications: Adobe Photoshop, GIMP, ImageOptim
• Build tools: Webpack plugins, Gulp tasks

Compression Comparison

See how different compression levels affect image quality:

High Quality (120KB)

Medium Quality (60KB)

Low Quality (30KB)

Find the right balance between file size and visual quality for your use case.

SEO for Images

Properly optimized images can significantly improve your website's search engine visibility through image search results and overall page ranking factors.

Image SEO Best Practices

• Use descriptive file names: red-running-shoes.jpg instead of IMG_1234.jpg
• Write meaningful alt text: Describe the image content and context
• Optimize image size: Fast-loading pages rank better
• Use responsive images: Improve mobile user experience
• Create an image sitemap: Help search engines discover all your images
• Add structured data: Use schema markup for product images or recipes

<img src="IMG_1234.jpg" 
     alt="image" 
     width="600" height="400">

<img src="organic-coffee-beans.jpg" 
     alt="Fresh organic coffee beans from Colombia" 
     width="600" height="400"
     loading="lazy">

Advanced Image Techniques

Beyond basic image implementation, HTML and CSS offer advanced techniques for creating more engaging and interactive image experiences.

CSS Background Images

Use CSS to set images as backgrounds for elements, allowing for more design flexibility and control over image presentation.

.hero-section {
    background-image: url('hero-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Image Maps

Image maps allow you to define clickable areas within an image, creating interactive graphics.

<img src="world-map.jpg" alt="World map" usemap="#worldmap">
<map name="worldmap">
    <area shape="rect" coords="100,50,200,150" href="europe.html" alt="Europe">
    <area shape="circle" coords="300,200,50" href="asia.html" alt="Asia">
</map>

Lazy Loading

Native lazy loading defers image loading until they're about to enter the viewport, improving initial page load performance.

<img src="product-image.jpg" alt="Product photo" loading="lazy">

Lazy Loading Demonstration

Scroll down to see images load as they enter the viewport:

Scroll down to see images...

More content...

Even more content...

With lazy loading, images further down the page don't load until needed, improving initial page load performance.