Generate Srcset / Sizes Attributes for Responsive Images

[sunnymui]

Images are currently just plain img tags ie
<img src="source.jpg" >

For full responsiveness, all images should be utilizing srcset and sizes attributes to do responsive image scaling so it loads the appropriate resolution image for the size of space it will be occupying. That also impacts page speed, since the browser no longer needs to download a higher resolution image than necessary for the fetching screen size.

<img src="one.png"
     srcset="two.png 100w, three.png 500w, four.png 1000w"

     sizes="<media condition> <width>,
            <media condition> <width>,
            <optional default image width>">

I believe the C4SJ site uses jekyll, which has a plugin to autogenerate the necessary markup:
https://github.com/wildlyinaccurate/jekyll-responsive-image

Tutorial to implement here:
https://medium.com/ivo-valchev/jekyll-responsive-images-with-srcset-5da131415d0f