Merge pull request #30 from rchillard/6-lazy-loading-images

Add lazy loading to all images below the fold on all pages

index.html

@@ -66,7 +66,7 @@ <h2 lang="de">Haus</h2>
                 (min-width: 1200px) 50vw, 100vw" srcset="img/haus-600.jpg 600w,
                   img/haus-900.jpg 900w,
                   img/haus-1800.jpg 1800w,
-                  img/haus-2700.jpg 2700w" alt="Large white rural house by Jesse Roberts on Unsplash">
+                  img/haus-2700.jpg 2700w" loading="lazy" alt="Large white rural house by Jesse Roberts on Unsplash">
     <p>
       HTML.Haus is your home for learning how to build websites using HTML by starting with the foundation, the
       structure, the bones of

learn.html

@@ -155,7 +155,7 @@ <h3>Block Elements</h3>
                img/brickwall-900.jpg 900w,
                img/brickwall-1800.jpg 1800w,
                img/brickwall-2700.jpg 2700w"
-      alt="Red bricks peaking through white stucco wall by Gabriele Diwald on Unsplash">
+               loading="lazy" alt="Red bricks peaking through white stucco wall by Gabriele Diwald on Unsplash">
     <p>
       I lied before because the p tag should really be the first building block in your world of new materials. See how
       the p tag is creating a new
@@ -277,7 +277,7 @@ <h2>Story</h2>
                img/wooden-frame-900.jpg 900w,
                img/wooden-frame-1800.jpg 1800w,
                img/wooden-frame-2700.jpg 2700w"
-      alt="Japanese building with red wooden frame and white roof by T.H. Chia on Unsplash">
+               loading="lazy" alt="Japanese building with red wooden frame and white roof by T.H. Chia on Unsplash">
     <h3>Inline Elements</h3>
     <p>
       In the House of Usher example above, you probably noticed that certain text appear in <i>italics</i> and other
@@ -292,7 +292,7 @@ <h3>Inline Elements</h3>
       might. That's because they're inline elements.
       Inline elements only effect text in the same line and do not alter the visual flow of the page or document.
     </p>
-    <img class="diagram" src="img/inline-block-combined.svg" alt="diagram of p block element and strong inline element"
+    <img class="diagram" src="img/inline-block-combined.svg" loading="lazy" alt="diagram of p block element and strong inline element"
       height="160">
     <p>The book is an <strong>American Gothic masterwork</strong></p>
     <p>
@@ -403,7 +403,7 @@ <h3>Accessibility</h3>
                img/red-heart-brickwall-900.jpg 900w,
                img/red-heart-brickwall-1800.jpg 1800w,
                img/red-heart-brickwall-2700.jpg 2700w"
-      alt="Black heart drawn on red brick wall by Ashkan Forouzani on Unsplash">
+               loading="lazy" alt="Black heart drawn on red brick wall by Ashkan Forouzani on Unsplash">
     <p>
       You've learned how to write a story. You can build a basic house using HTML, and now you understand why it's
       important to build that house for everyone. Let's start learning
@@ -424,7 +424,7 @@ <h2>Attributes</h2>
       Here's a visual example showing an attribute called style which you can use to change how your element is
       displayed.
     </p>
-    <img class="diagram" src="img/attribute.svg" alt="diagram of html style attribute for paragraph tag" height="160">
+    <img class="diagram" src="img/attribute.svg" loading="lazy" alt="diagram of html style attribute for paragraph tag" height="160">
     <p>And here's how the actual HTML looks:</p>
     <p style="color: red">She's a brick haus!</p>
     <p>
@@ -529,7 +529,7 @@ <h2>Images</h2>
         <textarea><img src="img/red-house-150.jpg" alt="Red house on side of green hill"></textarea>
       </label>
     </p>
-    <img src="img/red-house-150.jpg" alt="Red house on side of green hill by Luke Stackpoole on Unsplash">
+    <img src="img/red-house-150.jpg" loading="lazy" alt="Red house on side of green hill by Luke Stackpoole on Unsplash">
     <p>
       The src="img/red-house-150.jpg" is referencing a file in relation to where my current HTML page that references
       the image is located. In this case, it's inside of a subfolder