Revert "Redo responsive img w/ new knowledge"

This reverts commit 6f74ab3.

Author: stedman

_includes/shortcodes/responsive-image.js

@@ -14,9 +14,12 @@ module.exports = async (src, alt, outputFormat = 'jpeg') => {
     });
 
     const lowestSrc = stats[outputFormat][0];
-    const srcset = Object.values(stats).map((imageFormat) => `${imageFormat.map((entry) => `${entry.url} ${entry.width}w`).join(', ')}`).join('\n');
+    const sizes = '(max-width: 400px) 400px, (max-width: 800px) 800px, 100vw';
+    const sourceBlock = Object.values(stats).map((imageFormat) => `<source type="image/${imageFormat[0].format}" srcset="${imageFormat.map((entry) => `${entry.url} ${entry.width}w`).join(', ')}" sizes="${sizes}">`).join('\n');
 
-    return `<img src="${lowestSrc.url}" srcset="${srcset}" width="${lowestSrc.width}" height="${lowestSrc.height}" alt="${alt}" loading="lazy">`;
+    return `<picture class="image">
+      ${sourceBlock}
+      <img src="${lowestSrc.url}" width="${lowestSrc.width}" height="${lowestSrc.height}" alt="${alt}" loading="lazy">`;
   } catch (err) {
     // eslint-disable-next-line no-console
     console.error('Responsive Image: eleventy-img error:', err);

_layouts/base.liquid

@@ -59,9 +59,7 @@
     </div>
 
     {%- if page.url == '/' -%}
-      <figure class="image">
-        {% responsiveImage "./assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_min.jpg", "Austin Skyline by Carlos Alfonso on Unsplash" %}
-      </figure>
+      {% responsiveImage "./assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_min.jpg", "Austin Skyline by Carlos Alfonso on Unsplash" %}
     {%- endif -%}
   </header>