Redo responsive img w/ new knowledge

Author: stedman

_includes/shortcodes/responsive-image.js

@@ -14,12 +14,9 @@ module.exports = async (src, alt, outputFormat = 'jpeg') => {
     });
 
     const lowestSrc = stats[outputFormat][0];
-    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');
+    const srcset = Object.values(stats).map((imageFormat) => `${imageFormat.map((entry) => `${entry.url} ${entry.width}w`).join(', ')}`).join('\n');
 
-    return `<picture class="image">
-      ${sourceBlock}
-      <img src="${lowestSrc.url}" width="${lowestSrc.width}" height="${lowestSrc.height}" alt="${alt}" loading="lazy">`;
+    return `<img src="${lowestSrc.url}" srcset="${srcset}" 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,7 +59,9 @@
     </div>
 
     {%- if page.url == '/' -%}
-      {% responsiveImage "./assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_min.jpg", "Austin Skyline by Carlos Alfonso on Unsplash" %}
+      <figure class="image">
+        {% responsiveImage "./assets/img/carlos-alfonso-AlBgcDfDG_s-unsplash_min.jpg", "Austin Skyline by Carlos Alfonso on Unsplash" %}
+      </figure>
     {%- endif -%}
   </header>