HTML 10 💻 picture, source element and favicon - KandZ

Modern web development requires handling different screen sizes, resolutions, and device capabilities. The <picture> and <source> elements provide a responsive solution, while favicons help with brand recognition in browsers.

The Picture Element `<picture>` and Source Element `<source>`

The <picture> element allows you to provide multiple versions of an image, and the browser automatically selects the most appropriate one based on device screen size, resolution, or format support.

Basic Syntax:

<picture>
  <source srcset="cat-small.jpg" media="(max-width: 768px)">
  <source srcset="cat-medium.jpg" media="(min-width: 769px) and (max-width: 1024px)">
  <source srcset="cat-large.jpg" media="(min-width: 1025px)">
  <img src="cat-default.jpg" alt="A picture of a cat">
</picture>

How It Works:

The browser evaluates each <source> element in order
It selects the first <source> that matches the media condition
If none match, it falls back to the <img> element
The <img> element is required as a fallback

Attributes:

Attribute	Purpose	Example
`srcset`	Specifies the image URL	`srcset="image-small.jpg"`
`media`	Defines media query conditions	`media="(max-width: 768px)"`
`type`	Specifies image MIME type	`type="image/webp"`

Responsive Images Examples

1. Screen Size-Based Selection:

<picture>
  <!-- Mobile: small image -->
  <source srcset="banner-mobile.jpg" media="(max-width: 480px)">

  <!-- Tablet: medium image -->
  <source srcset="banner-tablet.jpg" media="(max-width: 1024px)">

  <!-- Desktop: large image -->
  <source srcset="banner-desktop.jpg" media="(min-width: 1025px)">

  <!-- Fallback for older browsers -->
  <img src="banner-default.jpg" alt="Website banner">
</picture>

2. Format Selection with Fallback:

<picture>
  <!-- Modern browsers: WebP format (smaller file size) -->
  <source srcset="photo.webp" type="image/webp">

  <!-- Other browsers: JPEG format -->
  <source srcset="photo.jpg" type="image/jpeg">

  <!-- Fallback -->
  <img src="photo.jpg" alt="A beautiful landscape">
</picture>

3. Combining Size and Format Selection:

<picture>
  <!-- Mobile WebP -->
  <source srcset="photo-mobile.webp" media="(max-width: 480px)" type="image/webp">

  <!-- Desktop WebP -->
  <source srcset="photo-desktop.webp" media="(min-width: 481px)" type="image/webp">

  <!-- Mobile JPEG fallback -->
  <source srcset="photo-mobile.jpg" media="(max-width: 480px)" type="image/jpeg">

  <!-- Desktop JPEG fallback -->
  <source srcset="photo-desktop.jpg" media="(min-width: 481px)" type="image/jpeg">

  <!-- Final fallback -->
  <img src="photo-default.jpg" alt="A beautiful landscape">
</picture>

4. Art Direction:

<picture>
  <!-- Mobile: crop to show main subject -->
  <source srcset="portrait-mobile.jpg" media="(max-width: 768px)">

  <!-- Desktop: show full image -->
  <source srcset="portrait-desktop.jpg" media="(min-width: 769px)">

  <img src="portrait-default.jpg" alt="Team portrait">
</picture>

5. High-DPI Displays:

<picture>
  <!-- Retina display: 2x resolution -->
  <source srcset="logo-2x.png" media="(-webkit-min-device-pixel-ratio: 2)">

  <!-- Standard display: 1x resolution -->
  <source srcset="logo-1x.png" media="(-webkit-min-device-pixel-ratio: 1)">

  <img src="logo-1x.png" alt="Company logo">
</picture>

The Favicon

A favicon (favorites icon) is a small icon that represents a website. It appears in browser tabs, bookmarks, and address bars.

Basic Syntax:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Complete Favicon Setup:

<head>
  <!-- Standard favicon for older browsers -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- PNG format for modern browsers -->
  <link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">

  <!-- Apple touch icon for iOS devices -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">

  <!-- Android Chrome icons -->
  <link rel="manifest" href="site.webmanifest">

  <!-- Microsoft Windows tiles -->
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
</head>

Favicon Formats:

Format	Support	Best For
`.ico`	All browsers	Legacy and universal support
`.png`	Modern browsers	High-quality icons
`.svg`	Modern browsers	Scalable vector icons
`.gif`	Most browsers	Animated icons
`.jpg`	Most browsers	Photographic icons

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Images and Favicon</title>

    <!-- ====== FAVICON ====== -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32">
    <link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">
    <link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">

    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 { color: #333; }
        .example {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .example img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <h1>Responsive Images & Favicon</h1>

    <!-- ====== EXAMPLE 1: BASIC RESPONSIVE IMAGE ====== -->
    <div class="example">
        <h2>1. Responsive Image (Screen Size)</h2>

        <picture>
            <!-- Mobile: 0-768px -->
            <source srcset="https://via.placeholder.com/400x300/007bff/ffffff?text=Mobile" 
                    media="(max-width: 768px)">

            <!-- Tablet: 769-1024px -->
            <source srcset="https://via.placeholder.com/800x400/28a745/ffffff?text=Tablet" 
                    media="(min-width: 769px) and (max-width: 1024px)">

            <!-- Desktop: 1025px+ -->
            <source srcset="https://via.placeholder.com/1200x500/dc3545/ffffff?text=Desktop" 
                    media="(min-width: 1025px)">

            <!-- Fallback -->
            <img src="https://via.placeholder.com/800x400/6c757d/ffffff?text=Default" 
                 alt="Responsive image example">
        </picture>
        <p><small>Resize your browser to see different images</small></p>
    </div>

    <!-- ====== EXAMPLE 2: FORMAT SELECTION ====== -->
    <div class="example">
        <h2>2. Format Selection (WebP vs JPEG)</h2>

        <picture>
            <!-- Modern: WebP format -->
            <source srcset="https://via.placeholder.com/600x300/17a2b8/ffffff?text=WebP" 
                    type="image/webp">

            <!-- Fallback: JPEG -->
            <source srcset="https://via.placeholder.com/600x300/17a2b8/ffffff?text=JPEG" 
                    type="image/jpeg">

            <img src="https://via.placeholder.com/600x300/6c757d/ffffff?text=Fallback" 
                 alt="Format selection example">
        </picture>
        <p><small>Your browser selects the best format it supports</small></p>
    </div>

    <!-- ====== EXAMPLE 3: ART DIRECTION ====== -->
    <div class="example">
        <h2>3. Art Direction (Different Crops)</h2>

        <picture>
            <!-- Mobile: Cropped image -->
            <source srcset="https://via.placeholder.com/400x400/ffc107/343a40?text=Cropped" 
                    media="(max-width: 768px)">

            <!-- Desktop: Full image -->
            <source srcset="https://via.placeholder.com/800x300/ffc107/343a40?text=Full" 
                    media="(min-width: 769px)">

            <img src="https://via.placeholder.com/600x300/6c757d/ffffff?text=Default" 
                 alt="Art direction example">
        </picture>
        <p><small>Mobile shows a cropped version; desktop shows the full image</small></p>
    </div>

    <!-- ====== EXAMPLE 4: MULTIPLE SOURCES ====== -->
    <div class="example">
        <h2>4. Multiple Sources (Size + Format)</h2>

        <picture>
            <!-- Mobile WebP -->
            <source srcset="https://via.placeholder.com/400x200/6610f2/ffffff?text=Mobile+WebP" 
                    media="(max-width: 768px)" 
                    type="image/webp">

            <!-- Desktop WebP -->
            <source srcset="https://via.placeholder.com/1000x300/6610f2/ffffff?text=Desktop+WebP" 
                    media="(min-width: 769px)" 
                    type="image/webp">

            <!-- Mobile Fallback -->
            <source srcset="https://via.placeholder.com/400x200/6610f2/ffffff?text=Mobile+JPEG" 
                    media="(max-width: 768px)" 
                    type="image/jpeg">

            <!-- Desktop Fallback -->
            <source srcset="https://via.placeholder.com/1000x300/6610f2/ffffff?text=Desktop+JPEG" 
                    media="(min-width: 769px)" 
                    type="image/jpeg">

            <!-- Final fallback -->
            <img src="https://via.placeholder.com/600x200/6c757d/ffffff?text=Fallback" 
                 alt="Multiple sources example">
        </picture>
    </div>

    <!-- ====== EXAMPLE 5: HIGH-DPI DISPLAYS ====== -->
    <div class="example">
        <h2>5. High-DPI Display Support</h2>

        <picture>
            <!-- Retina display (2x) -->
            <source srcset="https://via.placeholder.com/800x200/20c997/ffffff?text=Retina+2x" 
                    media="(-webkit-min-device-pixel-ratio: 2)">

            <!-- Standard display (1x) -->
            <source srcset="https://via.placeholder.com/400x200/20c997/ffffff?text=Standard+1x" 
                    media="(-webkit-min-device-pixel-ratio: 1)">

            <img src="https://via.placeholder.com/400x200/6c757d/ffffff?text=Default" 
                 alt="High-DPI display example">
        </picture>
    </div>

    <!-- ====== EXAMPLE 6: FAVICON INFORMATION ====== -->
    <div class="example">
        <h2>6. Favicon Information</h2>

        <p>This page uses a favicon. Look at the browser tab!</p>

        <h3>Recommended Favicon Sizes:</h3>
        <ul>
            <li>favicon.ico — 16x16 (legacy browsers)</li>
            <li>favicon-16x16.png — 16x16 (modern browsers)</li>
            <li>favicon-32x32.png — 32x32 (modern browsers)</li>
            <li>apple-touch-icon.png — 180x180 (iOS)</li>
            <li>android-chrome-192x192.png — 192x192 (Android)</li>
            <li>android-chrome-512x512.png — 512x512 (Android)</li>
        </ul>

        <h3>How to Create a Favicon:</h3>
        <ol>
            <li>Design your icon (square recommended)</li>
            <li>Export to multiple sizes</li>
            <li>Add the <code>&lt;link&gt;</code> elements to your HTML</li>
            <li>Create a <code>site.webmanifest</code> file for PWA support</li>
        </ol>

        <h3>Example site.webmanifest:</h3>
        <pre>
{
  "name": "My Website",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}
        </pre>
    </div>

</body>
</html>

Quick Reference

Element/Attribute	Purpose	Example
`<picture>`	Container for multiple image sources	`<picture>...</picture>`
`<source>`	Alternative image version	`<source srcset="img.webp" type="image/webp">`
`srcset`	Image URL for the source	`srcset="photo.jpg"`
`media`	Media query condition	`media="(max-width: 768px)"`
`type`	Image MIME type	`type="image/webp"`
`<link rel="icon">`	Defines favicon	`<link rel="icon" href="favicon.ico">`

Best Practices

✅ Do This:

<!-- Always include the img element as fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

<!-- Use WebP format for better compression -->
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">

<!-- Include multiple favicon sizes -->
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">

<!-- Use meaningful media queries -->
<source srcset="mobile.jpg" media="(max-width: 767px)">
<source srcset="tablet.jpg" media="(min-width: 768px) and (max-width: 1023px)">
<source srcset="desktop.jpg" media="(min-width: 1024px)">

❌ Don’t Do This:

<!-- Don't forget the img element -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- Missing fallback img -->
</picture>

<!-- Don't use overly complex media queries -->
<source srcset="image.jpg" media="(min-width: 768px) and (max-width: 850px) and (orientation: portrait)">

<!-- Don't use only one favicon format -->
<link rel="icon" href="favicon.ico">
<!-- Missing PNG versions for modern browsers -->

<!-- Don't use large, unoptimized favicons -->
<link rel="icon" href="favicon-2000x2000.png" sizes="2000x2000">

Performance Tips

Choose the right format:

WebP: Best for modern browsers (smaller file size)
JPEG: Best for photographs
PNG: Best for images with transparency
SVG: Best for logos and icons

Use appropriate sizes:

Mobile: Smaller images save bandwidth
Desktop: Larger images for better quality
Retina: 2x images for high-DPI displays

Lazy loading:

   <img src="image.jpg" alt="Description" loading="lazy">

Set width and height:

   <img src="image.jpg" alt="Description" width="800" height="600">

Pro Tip: Use online tools like RealFaviconGenerator to generate all favicon sizes and formats at once. For responsive images, consider using a CDN or image service that automatically resizes and formats images based on the request.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

The Picture Element <picture> and Source Element <source>

Basic Syntax:

How It Works:

Attributes:

Responsive Images Examples

1. Screen Size-Based Selection:

2. Format Selection with Fallback:

3. Combining Size and Format Selection:

4. Art Direction:

5. High-DPI Displays:

The Favicon

Basic Syntax:

Complete Favicon Setup:

Favicon Formats:

Complete Example

Quick Reference

Best Practices

Performance Tips

Ads Blocker Detected!!!

The Picture Element `<picture>` and Source Element `<source>`