jQuery Auto Add SRCSET to img tag

This script when added to a Blogger site template will apply a srcset attribute to all images in the the Blog div element. This can be useful since Blogger does not currently automatically apply this tag when it adds images to a post using its UI.

by dimaslanjaka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="Blog">
    <img src="https://3.bp.blogspot.com/-cve1x-x7c4g/VtEPcrXa1SI/AAAAAAAALZU/BfZ5BqpZZ6U/s320/IMGP1775.JPG" alt="" />
</div>

JavaScript

$(function() {
    $('.Blog img').each(function(index, value) {
        var resolutions = [320, 640, 1200, 1600, 3200];
        var source = $(this).attr('src');
        var sourceArray = source.split('/');
        var output = [];
        $.each(resolutions, function(resolutionIndex, resolutionValue) {
            sourceArray[7] = 's' + resolutionValue;
            var url = sourceArray.join('/') + ' ' + resolutionValue + 'w';
            output.push(url);
        });
        $(value).prop('srcset', output.join(', '));
    });
});