HTML <img> Element

Publish in HTML Tutorial el 24/05/2025 15:54

The <img> element is one of the most fundamental and widely used HTML elements. It embeds an image into a web page. Unlike other elements that wrap content, <img> is a self-closing (void) element that displays external image files or data URIs.

Key attributes include:

src: Specifies the image URL (required)
alt: Provides alternative text for accessibility (required)
width/height: Sets display dimensions
loading: Controls lazy loading behavior
srcset/sizes: Enables responsive images

Basic Syntax

Rendered Example

Play Code

      <img 
        src="https://placehold.co/300x200/png" 
        alt="Placeholder image" 
        width="400" 
        height="300">

Examples

1. Basic Image with Alt Text

Always include meaningful alt text for accessibility and SEO.

Play Code

      <img src="https://placehold.co/300x200/png" 
           alt="Example of proper alt text describing the image content"
           width="300"
           height="200">

2. Responsive Image with srcset

Serve different images based on device resolution and screen size.

Play Code

      <img src="https://placehold.co/300x200/png"
           srcset="https://placehold.co/300x200/png 500w, https://placehold.co/300x200/png 1000w, https://placehold.co/300x200/png 1500w"
           sizes="(max-width: 600px) 480px, 800px"
           alt="Responsive image example"
           loading="lazy">

3. Image with CSS Styling

Demonstrates how to style images with CSS.

Play Code

      <style>
        .rounded-img {
          border-radius: 50%;
          border: 3px solid #3498db;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          transition: transform 0.3s ease;
        }
        .rounded-img:hover {
          transform: scale(1.05);
        }
      </style>
      <img src="https://placehold.co/300x200/png" 
           alt="Styled circular image"
           class="rounded-img"
           width="150"
           height="150">

4. Image Swap with JavaScript

Click the image to toggle between two states.

Play Code

      <img id="toggleImg" 
           src="https://placehold.co/300x200/png?text=Click+Me" 
           alt="Toggleable image"
           onclick="toggleImage()"
           style="cursor: pointer;">
      <script>
        function toggleImage() {
          const img = document.getElementById('toggleImg');
          img.src = img.src.includes('3498db') 
            ? 'https://placehold.co/300x200/png?text=Clicked!' 
            : 'https://placehold.co/300x200/png?text=Click+Me';
        }
      </script>

5. Lazy Loading with Intersection Observer

Advanced lazy loading technique for better performance.

Play Code

      <img class="lazy" 
           data-src="https://placehold.co/300x200/png" 
           alt="Lazy loaded image"
           width="600"
           height="400">
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
          
          if ('IntersectionObserver' in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries) {
              entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                  let lazyImage = entry.target;
                  lazyImage.src = lazyImage.dataset.src;
                  lazyImage.classList.remove('lazy');
                  lazyImageObserver.unobserve(lazyImage);
                }
              });
            });
            
            lazyImages.forEach(function(lazyImage) {
              lazyImageObserver.observe(lazyImage);
            });
          }
        });
      </script>