Example for Katie

katie.html

<picture>
    <!-- 
    The 1x and 2x images are the same
    I think it's serving the 2x image and because it assumes it's 2x, it's squeezing it to 400
    Hook.jpg?itok=91w8zfuB is 800x600 
    -->
    <source srcset="http://www.howdoiwebdesign.com/sites/default/files/styles/article_large/public/inline-images/Hook.jpg?itok=91w8zfuB 1x, http://www.howdoiwebdesign.com/sites/default/files/styles/article_large/public/inline-images/Hook.jpg?itok=91w8zfuB 2x" media="(min-width: 1200px)" type="image/jpeg">

    <!-- This source uses the same image as the above source - redundant? -->
    <source srcset="http://www.howdoiwebdesign.com/sites/default/files/styles/article_large/public/inline-images/Hook.jpg?itok=91w8zfuB 1x, http://www.howdoiwebdesign.com/sites/default/files/styles/article_large/public/inline-images/Hook.jpg?itok=91w8zfuB 2x" media="(min-width: 768px)" type="image/jpeg">

    <!-- Hook.jpg?itok=s70sJowA is 400x400 -->
    <source srcset="http://www.howdoiwebdesign.com/sites/default/files/styles/article_mobile/public/inline-images/Hook.jpg?itok=s70sJowA 1x, http://www.howdoiwebdesign.com/sites/default/files/styles/article_mobile/public/inline-images/Hook.jpg?itok=s70sJowA 2x" media="(min-width: 0px)" type="image/jpeg">

    <!-- Hook.jpg is 602 x 403 -->
    <img data-entity-type="file" data-entity-uuid="8495ad2a-c4d6-495d-ae62-36c2a59098ce" data-responsive-image-style="article_image" src="http://www.howdoiwebdesign.com/sites/default/files/inline-images/Hook.jpg" alt="Brightly colored background with work hook" typeof="foaf:Image" class="align-center">
</picture>