Función @picture para Blogger

<b:includable id='@picture'>
  <b:comment>
  Create a responsive custom picture tag using native Blogger image sizing.
  @author zkreations
  @param {image} src - Image URL or Blogger image object
  @param {number[]} [sourceSet=[700,400]] - Array of widths for the responsive sources
  @param {Number} [width] - Explicit image width for the fallback img
  @param {Number} [height] - Explicit image height for the fallback img
  @param {String} [ratio] - Aspect ratio (e.g., "16:9", "1:1")
  @param {String} [id] - Unique identifier for the img tag
  @param {String} [class] - Additional CSS classes for the img tag
  @param {String} [imgClass] - CSS classes for the fallback img tag
  @param {string} [sizes] - Sizes attribute
  @param {string} [loading] - Loading attribute
  @param {string} [fetchpriority] - Fetch priority attribute
  @param {string} [crossorigin] - Cross-origin attribute
  @param {string} [decoding] - Decoding attribute
  @param {string} [referrerpolicy] - Referrer policy attribute
  @param {string} [alt] - Alt text
  @param {string} [params] - Additional parameters for proxy images
  </b:comment>
  <b:if cond='data:src'>
    <picture>
      <b:class cond='data:class' expr:name='data:class'/>
      <b:with value='data:src.isYoutube
        ? data:src.youtubeMaxResDefaultUrl
        : data:src' var='baseImage'>
        <b:with value='data:sourceSet ?: [700, 400]' var='availableSizes'>
          <b:with value='[
            "com/img/a/",
            "com/blogger_img_proxy"
          ] any (server => server in data:baseImage)' var='isProxyImg'>
            <b:with value='data:params and data:isProxyImg ? ("-" + data:params) : ""' var='params'>
              <b:loop index='i' values='data:availableSizes' var='size'>
                <b:if cond='data:i + 1 != data:availableSizes.length'>
                  <b:with value='resizeImage(data:baseImage, data:size, data:ratio)' var='sourceUrl'>
                    <source expr:media='"(min-width: " + data:size + "px)"' expr:srcset='data:sourceUrl + data:params'/>
                  </b:with>
                </b:if>
              </b:loop>
              <b:with value='data:availableSizes.last ?: 600' var='fallbackSize'>
                <b:with value='resizeImage(data:baseImage, data:fallbackSize, data:data:ratio)' var='fallbackUrl'>
                  <b:tag name='img'>
                    <b:attr name='b:whitespace' value='remove'/>
                    <b:class cond='data:imgClass' expr:name='data:imgClass'/>
                    <b:loop values='["id","sizes","loading","fetchpriority","crossorigin","decoding","referrerpolicy","alt"]' var='attr'>
                      <b:with expr:value='+("data:",data:attr)' var='value'>
                        <b:attr expr:name='data:attr' expr:value='data:value'/>
                      </b:with>
                    </b:loop>
                    <b:attr name='width' expr:value='data:width ?: data:fallbackUrl.width'/>
                    <b:attr name='height' expr:value='data:height ?: data:fallbackUrl.height'/>
                    <b:attr name='src' expr:value='data:fallbackUrl + data:params'/>
                  </b:tag>
                </b:with>
              </b:with>
            </b:with>
          </b:with>
        </b:with>
      </b:with>
    </picture>
  <b:else/>
    <b:comment render='true'>Parameter [src] is required.</b:comment>
  </b:if>
</b:includable>