Add placeholder images

src/page/basics/image/image.html.ts

@@ -5,13 +5,11 @@ import './image.scss';
 
 export const Image = ({
   imageWebP,
-  imageJpeg,
   alt,
   container = false,
   isIgnoredByImageViewer = false,
 }: {
   imageWebP: ResponsiveImage;
-  imageJpeg: ResponsiveImage;
   alt: string;
   container?: boolean;
   isIgnoredByImageViewer?: boolean;
@@ -19,37 +17,31 @@ export const Image = ({
   ${
     container
       ? `<div class="figure-container" style="padding-top:${
-          (imageJpeg.height / imageJpeg.width) * 100
+          (imageWebP.height / imageWebP.width) * 100
         }%">`
       : ''
   }
-    <picture loading="lazy">
+    <div
-      <source
+      class="image"
-        srcset="${imageWebP.srcSet}" 
+      style="background-size: cover; background-image: url('${imageWebP.placeholder}')",
-        sizes="${getSizes(imageWebP)}"
+    }}>
-        width="${imageWebP.width}"
+      <picture loading="lazy">
-        height="${imageWebP.height}"
+        <source
-        type="image/webp"
+          srcset="${imageWebP.srcSet}" 
-        alt="${alt}"
+          sizes="${getSizes(imageWebP)}"
-      />
+          type="image/webp"
-      <source
+        />
-        srcset="${imageJpeg.srcSet}" 
+        <img
-        sizes="${getSizes(imageJpeg)}"
+          ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
-        width="${imageJpeg.width}"
+          tabindex="0"
-        height="${imageJpeg.height}"
+          loading="lazy"
-        type="image/jpeg"
+          width="${imageWebP.width}"
-        alt="${alt}"
+          height="${imageWebP.height}"
-      />
+          src="${last(imageWebP.images)?.path}" 
-      <img
+          alt="${alt}"
-        ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
+        />
-        tabindex="0"
+      </picture>
-        loading="lazy"
+    </div>
-        width="${imageJpeg.width}"
-        height="${imageJpeg.height}"
-        src="${last(imageJpeg.images)?.path}" 
-        alt="${alt}"
-      />
-    </picture>
   ${container ? `</div>` : ''}
 `;
 

src/page/basics/image/image.scss

@@ -1,4 +1,9 @@
-picture,
+.image {
-picture * {
   font-size: 0;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }

src/page/footer/footer.scss

@@ -26,7 +26,6 @@ footer#footer {
         padding-top: var(--line-height);
       }
 
-      img,
       svg {
         @include square(var(--icon-size));
         margin-right: calc(var(--small-margin) / 2);

src/page/header/header.scss

@@ -15,12 +15,12 @@
 
   $img-size: 125px;
   h1,
-  img,
+  .image,
   .placeholder {
     @include title-font();
   }
 
-  img {
+  .image {
     @include square($img-size);
     border-radius: 100%;
     cursor: pointer;
@@ -50,7 +50,7 @@
     position: relative;
     border-radius: var(--border-radius);
 
-    img {
+    .image {
       @include square($img-size);
       position: absolute;
       left: 0;

src/page/timeline/timeline-element/timeline-element.scss

@@ -93,7 +93,7 @@
 
     @include blurred-background();
 
-    img,
+    .image,
     video,
     iframe {
       border-radius: var(--border-radius) var(--border-radius) 0 0;

src/styles.scss

@@ -86,7 +86,7 @@ noscript {
     pointer-events: auto;
   }
 
-  img,
+  .image,
   video,
   iframe {
     z-index: -1;
@@ -104,7 +104,7 @@ iframe {
   transform: translate3d(0, 0, 0.00001px);
 }
 
-img,
+.image,
 video,
 iframe {
   user-select: none;