dc-accelerators-content-rendering-service/src/image/templates/acc-template-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-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=3200{{> acc-template-roundel }} 2x"
            media="(min-width: 1280px)" type="image/webp">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}?w=1600{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}?w=3200{{> acc-template-roundel }} 2x"
            media="(min-width: 1280px)">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}.webp?w=1280{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=2560{{> acc-template-roundel }} 2x"
            media="(min-width: 1024px)" type="image/webp">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}?w=1280{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}?w=2560{{> acc-template-roundel }} 2x"
            media="(min-width: 1024px)">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}.webp?w=1024{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=2048{{> acc-template-roundel }} 2x"
            media="(min-width: 768px)" type="image/webp">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}?w=1024{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}?w=2048{{> acc-template-roundel }} 2x"
            media="(min-width: 768px)">

    <source srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
            seoText}}{{/if}}.webp?w=768{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}.webp?w=1536{{> acc-template-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-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if
            seoText}}/{{encodeURI seoText}}{{/if}}?w=1536{{> acc-template-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-roundel }}"
            srcset="//{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI image.name}}{{#if seoText}}/{{encodeURI
                    seoText}}{{/if}}.webp?w=1600{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
                    image.name}}{{#if seoText}}/{{encodeURI
                    seoText}}{{/if}}.webp?w=3200{{> acc-template-roundel }} 2x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
                    image.name}}{{#if seoText}}/{{encodeURI
                    seoText}}{{/if}}?w=1600{{> acc-template-roundel }} 1x, //{{image.defaultHost}}/i/{{image.endpoint}}/{{encodeURI
                    image.name}}{{#if seoText}}/{{encodeURI seoText}}{{/if}}?w=3200{{> acc-template-roundel }} 2x"
            class="amp-dc-image-pic" {{#if imageAltText}} alt="{{imageAltText}}" {{/if}}/>

</picture>