From 848ccf0ff35529c00a2f39cd1c589ea8f94fb820 Mon Sep 17 00:00:00 2001
From: schmelczerandras <schmelczer.andras@simonyi.bme.hu>
Date: Thu, 19 Nov 2020 13:49:15 +0100
Subject: [PATCH] Lazy load media

---
 src/page/basics/image/image.html.ts | 3 +++
 src/page/basics/video/video.html.ts | 2 +-
 src/styles.scss                     | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/page/basics/image/image.html.ts b/src/page/basics/image/image.html.ts
index bb7965f..b9648e0 100644
--- a/src/page/basics/image/image.html.ts
+++ b/src/page/basics/image/image.html.ts
@@ -16,8 +16,11 @@ export const generate = ({
 }): html => `
   ${container ? `<div class="figure-container">` : ''}
   <img tabindex="0"
+    loading="lazy"
     srcset="${image.srcSet}" 
     sizes="${sizes}"
+    width="${image.width}"
+    height="${image.height}"
     src="${last(image.images)?.path}" 
     alt="${alt}"
   />
diff --git a/src/page/basics/video/video.html.ts b/src/page/basics/video/video.html.ts
index 53fec91..818d08e 100644
--- a/src/page/basics/video/video.html.ts
+++ b/src/page/basics/video/video.html.ts
@@ -16,7 +16,7 @@ export const generate = ({
   container: boolean;
 }): html => `
   ${container ? `<div class="figure-container">` : ''}
-    <video ${options} ${poster ? `poster="${poster}` : ''}" >
+    <video loading="lazy" ${options} ${poster ? `poster="${poster}` : ''}" >
         <source src="${webm}" type="video/webm"/>
         <source src="${mp4}" type="video/mp4"/>
     </video>
diff --git a/src/styles.scss b/src/styles.scss
index f16b35b..d6f16b5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -63,6 +63,7 @@ html {
     position: relative;
     z-index: -2;
     width: 100%;
+    height: auto;
   }
 }