dc-accelerators-content-rendering-service/src/banner/templates/acc-template-banner-image.html

Amplience DC Frontend modules, using HTML Service

<picture class="amp-dc-image">
    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}.webp?w=1600&{{> acc-template-banner-poi name=image.name w=1000 h=300 aspect='16:9'}}{{> acc-template-banner-roundel}} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
            image.name}}{{#if seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=3200&{{> acc-template-banner-poi name=image.name w=2000 h=600
                                                                                             aspect='16:9'}}{{> acc-template-banner-roundel ratio='0.1'}} 2x"
            media="(min-width: 769px)"
            type="image/webp">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}?w=1600&{{> acc-template-banner-poi name=image.name w=1000 h=300 aspect='16:9'}}{{> acc-template-banner-roundel}} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}?w=3200&{{> acc-template-banner-poi name=image.name w=2000 h=600
                                                                      aspect='16:9'}}{{> acc-template-banner-roundel ratio='0.1'}} 2x"
            media="(min-width: 769px)">
    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}.webp?w=768&{{> acc-template-banner-poi name=image.name name=image.name}}{{> acc-template-banner-roundel}} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
            image.name}}{{#if seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=1536&{{> acc-template-banner-poi name=image.name w=1536 h=1536}}{{> acc-template-banner-roundel}} 2x"
            media="(max-width: 768px)"
            type="image/webp">
    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}?w=768&{{> acc-template-banner-poi name=image.name name=image.name}}{{> acc-template-banner-roundel}} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}?w=1536&{{> acc-template-banner-poi name=image.name w=1536 h=1536}}{{> acc-template-banner-roundel}} 2x"
            media="(max-width: 768px)">

    <img src="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}?w=1600&{{> acc-template-banner-poi name=image.name}}{{> acc-template-banner-roundel}}"
         srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{#if seoText}}/{{encodeURI image.name}}{{encodeURI
                 seoText}}{{/if}}.webp?w=1600&{{> acc-template-banner-poi name=image.name}}{{> acc-template-banner-roundel}} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
                 image.name}}{{#if seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=3200&{{> acc-template-banner-poi
                 name=image.name}}{{> acc-template-banner-roundel}} 2x,
             //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
                 seoText}}{{/if}}?w=1600&{{> acc-template-banner-poi name=image.name}}{{> acc-template-banner-roundel}} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
                 image.name}}{{#if seoText}}/{{encodeURI seoText}}{{/if}}?w=3200&{{> acc-template-banner-poi
                 name=image.name}}{{> acc-template-banner-roundel}} 2x"
         class="amp-dc-image-pic" {{#if imageAltText}} alt="{{imageAltText}}" {{/if}}/>
</picture>