From 77d12b2e241ae0fb283b808c2dee12632326d4ab Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Wed, 2 Nov 2022 15:38:15 +0000
Subject: [PATCH] commit to ask Q about img srcset and sizes on slack

---
 .../skilled-elearning-landing-page/index.html | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
index c1cb744..a2a2373 100644
--- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
+++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
@@ -36,8 +36,39 @@
       <a href="">Get Started</a>
 
       <picture>
-        <source media="(min-width: )" srcset="" sizes="">
-        <img src="assets/image-hero-mobile.png" alt="">
+        <!-- <source media="(min-width: 1440px)"
+          srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
+        <source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
+        <source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.webp 2x, assets/image-hero-tablet.webp"
+          type="image/webp">
+        <source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.png 2x, assets/image-hero-tablet.png">
+        <source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.webp 2x, assets/image-hero-mobile.webp"
+          type="image/webp">
+        <source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.png 2x, assets/image-hero-mobile.png"> -->
+        <!-- // fallback in different sizes, as well as regular src. -->
+        <!-- mobile image 435x409, page 327x301
+            x2 870x818
+          tablet: 695x723, on page 640.71x640
+            x2 1390x1446
+          desktop: 1046x938, page 991.63x936.92
+            x2 2092x1876
+         -->
+
+        <!-- either widths, or pixel density -->
+        <img srcset="
+        assets/image-hero-mobile.png 435w,
+        assets/image-hero-tablet.png 695w,
+        assets/image-hero-desktop.png 1046w,
+            " sizes="
+              (max-width: 767px) 327px,
+              (max-width: 1439px) 640px,
+              870px,
+                " src="assets/image-hero-mobile.png"
+          alt="Woman blowing onto a mug. Top right of her is a box indicating 29k Members. On the bottom right is a box indicating 1,451 Course Hours."
+          class="">
+
+
+
       </picture>
 
     </section>