Easy Responsive Images in ExpressionEngine with CE Image

lazy-loaded-markup.html

<div class="module__image image--lazy"
     data-image-src="Tim-Smith_220x140_220_140_int_c1.jpg"></div>

lazy-loaded-result.html

<div class="module__image image--lazy"
    data-image-src="Tim-Smith_220x140_220_140_int_c1.jpg"
    data-image-loaded=""
    >
    <img alt="" src="Tim-Smith_220x140_220_140_int_c1.jpg">
</div>

lazy-loaded-srcset.html

<div class="module__image image--lazy"
     data-image="about_480_320_int_c1_small.jpg"
     data-image-srcset="about_480_320_int_c1_small.jpg 480w,
                      about_800_350_int_c1_medium.jpg 800w,
                      about_940_343_int_s_c1_full.jpg 940w"></div>

lazy-loading.html

{if testimonial_photo}
    {exp:ce_img:pair
        src="{testimonial_photo}"
        width="223"
        height="140"
        allow_scale_larger="yes"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        }
        <div class="module__image image--lazy" data-image-src="{made}"></div>
    {/exp:ce_img:pair}
{/if}

picture-element.html

<picture class="page__image-header__photo">
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    {exp:ce_img:pair
        src="{content_focal_image}"
        filename_suffix="_full"
        width="940"
        allow_scale_larger="yes"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        }
        <source srcset="{made}" media="(min-width: 40em)">
    {/exp:ce_img:pair}
    {exp:ce_img:pair
        src="{content_focal_image}"
        filename_suffix="_medium"
        width="800"
        height="600"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        }
        <source srcset="{made}" media="(min-width: 20em)">
    {/exp:ce_img:pair}
    {exp:ce_img:pair
        src="{content_focal_image}"
        filename_suffix="_small"
        width="480"
        height="360"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        }
        <source srcset="{made}">
        <!--[if IE 9]></video><![endif]-->
        <img src="{made}" alt="">
    {/exp:ce_img:pair}
</picture>

picture-excerpt.html

{exp:ce_img:pair
    src="{content_focal_image}"
    filename_suffix="_full"
    width="940"
    allow_scale_larger="yes"
    crop="yes"
    interlace="yes"
    cache_dir="/"
    }
    <source srcset="{made}" media="(min-width: 40em)">
{/exp:ce_img:pair}

picture-result.html

<picture class="page__image-header__photo">
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="about_940_343_int_s_c1_full.jpg" media="(min-width: 40em)">
    <source srcset="about_800_350_int_c1_medium.jpg" media="(min-width: 20em)">
    <source srcset="about_480_350_int_c1_small.jpg">
    <!--[if IE 9]></video><![endif]-->
    <img src="{made}" alt="">
</picture>

simple-resize.html

<img class="page__image-header__photo" alt=""
    {exp:ce_img:pair
        src="{embed:image}"
        filename_suffix="_small"
        width="480"
        height="320"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        } 
        src="{made}"
        srcset="{made} 480w,
    {/exp:ce_img:pair}
    {exp:ce_img:pair
        src="{embed:image}"
        filename_suffix="_medium"
        width="800"
        height="600"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        }
        {made} 800w,
    {/exp:ce_img:pair}
    {exp:ce_img:pair
        src="{embed:image}"
        filename_suffix="_full"
        width="940"
        allow_scale_larger="yes"
        crop="yes"
        interlace="yes"
        cache_dir="/"
        }
        {made} 940w"
    {/exp:ce_img:pair}
    >

srcset-result.html

<img class="page__image-header__photo" alt=""
     src="about_480_320_int_c1_small.jpg"
     srcset="about_480_320_int_c1_small.jpg 480w,
             about_800_350_int_c1_medium.jpg 800w,
             about_940_343_int_s_c1_full.jpg 940w">