Switch to uing <picture> for responsive images

Author: alshedivat

_config.yml

@@ -232,6 +232,7 @@ jekyll-diagrams:
     # configuration, see https://github.com/zhustec/jekyll-diagrams.
     # feel free to comment out this section if not using jekyll diagrams.
 
+
 # -----------------------------------------------------------------------------
 # Optional Features
 # -----------------------------------------------------------------------------
@@ -249,6 +250,7 @@ enable_project_categories:  true   # enables categorization of projects into
                                    # multiple categories
 enable_medium_zoom:         true   # enables image zoom feature (as on medium.com)
 
+
 # -----------------------------------------------------------------------------
 # Library versions
 # -----------------------------------------------------------------------------

_includes/responsive_img.html

@@ -1,8 +1,6 @@
-{% assign largest = resized | sort: 'width' | last %}
-{% capture srcset %}
-{% for i in resized %}
-    {{ i.path | relative_url }} {{ i.width }}w,
-{% endfor %}
-{% endcapture %}
-
-<img {% if class %}class="{{ class }}"{% endif %}  src="{{ largest.path | relative_url }}" srcset="{{ srcset | strip_newlines }} {{ path | relative_url }} {{ original.width }}w" {% if alt %}alt="{{ alt }}"{% endif %} {% if title %}title="{{ title }}"{% endif %} {% if zoomable %}data-zoomable{% endif %}/>
+<picture>
+    {% for i in resized %}
+    <source media="(max-width: {{ i.width }}px)" srcset="{{ i.path | relative_url }}">
+    {% endfor %}
+    <img {% if class %}class="{{ class }}"{% endif %} src="{{ path | relative_url }}" {% if alt %}alt="{{ alt }}"{% endif %} {% if title %}title="{{ title }}"{% endif %} {% if zoomable %}data-zoomable{% endif %} />
+</picture>