feat: Add responsive images to the further info links

Using the resolution switching problem approach
gabrielml · Jul 13, 2021 · 2d05148 · 2d05148
1 parent cea6d47
commit 2d05148
Showing 1 changed file with 31 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -147,16 +147,43 @@ <h2>Rocking the free web</h2>
       <div class="further-info">
         <!-- insert images with srcsets and sizes -->
         <a href="https://www.mozilla.org/en-US/firefox/new/">
-          <img />
+          <img
+            srcset="
+              images/firefox_logo-only_RGB120_tinified.png 120w,
+              images/firefox_logo-only_RGB400_tinified.png 400w
+            "
+            sizes="(max-width: 500px) 120px,
+            400px"
+            src="images/firefox_logo-only_RGB400_tinified.png"
+            alt="Firefox logo"
+          />
         </a>
         <a href="https://www.mozilla.org/">
-          <img />
+          <img
+            srcset="
+              images/mozilla-dinosaur-head120_tinified.png 120w,
+              images/mozilla-dinosaur-head400_tinified.png 400w
+            "
+            sizes="(max-width: 500px) 120px,
+            400px"
+            src="images/mozilla-dinosaur-head400_tinified.png"
+            alt="Mozilla dinosaur head"
+          />
         </a>
         <a href="https://addons.mozilla.org/">
-          <img />
+          <img
+            srcset="
+              images/firefox-addons120_tinified.jpg 120w,
+              images/firefox-addons400_tinified.jpg 400w
+            "
+            sizes="(max-width: 500px) 120px,
+            400px"
+            src="images/firefox-addons400_tinified.jpg"
+            alt="Firefox addons"
+          />
         </a>
         <a href="https://developer.mozilla.org/en-US/">
-          <img />
+          <img src="images/mdn.svg" alt="Developer Mozilla logo" />
         </a>
         <div class="clearfix"></div>
       </div>