From 2d05148e8c632eeafc71b8aa5c50e629a954433d Mon Sep 17 00:00:00 2001
From: John Doe <jamesjohndoe@protonmail.com>
Date: Tue, 13 Jul 2021 18:06:56 +0200
Subject: [PATCH] feat: Add responsive images to the further info links

Using the resolution switching problem approach
---
 index.html | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 2f69f58..2863150 100644
--- 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>