Lazy load media

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}"
   />

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>

src/styles.scss

@@ -63,6 +63,7 @@ html {
     position: relative;
     z-index: -2;
     width: 100%;
+    height: auto;
   }
 }