<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        img{
          max-width: 100%;
          height: auto;
          width: 100%;
        }
      </style>
       
       {% assign image_url = section.settings.heroBanner %}
          <picture>
            <!-- Fallback Source for Browsers Without WebP Support -->
            <img 
              src="{{ image_url | img_url: '320x' }}" 
              srcset="
                {{ image_url | img_url: '320x' }} 320w,
                {{ image_url | img_url: '640x' }} 640w,
                {{ image_url | img_url: '1280x' }} 1280w,
                {{ image_url | img_url: '1920x' }} 1920w,
                {{ image_url | img_url: '2560x' }} 2560w,
                {{ image_url | img_url: '3840x' }} 3840w
              " 
              sizes="
                (max-width: 480px) 320px, /* Mobile */
                (max-width: 768px) 640px, /* Tablet */
                (max-width: 1280px) 800px, /* Small desktops */
                (max-width: 1920px) 1280px, /* Regular desktops */
                1600px /* For larger/4K displays */
              " 
              alt="{{ section.settings.alt_text | escape }}" 
              width="320" 
              height="399" 
              loading="lazy" 
              decoding="async"
            />
          </picture>
          
          {% schema %}
          {
            "name": "Responsive Image",
            "settings": [
              {
                "type": "image_picker",
                "id": "heroBanner",
                "label": "Image",
              },
              {
                "type": "text",
                "id": "alt_text",
                "label": "Alt Text",
              }
            ],
            "presets": [
      {
      "name": "Responsive Image",
      }
              ]
          }
          {% endschema %}
</body>
</html>