Add webp

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

@@ -5,24 +5,36 @@ import { html } from '../../../types/html';
 
 export const generate = ({
   sizes,
-  image,
+  imageWebP,
+  imageJpeg,
   alt,
   container,
 }: {
   sizes: string;
-  image: ResponsiveImage;
+  imageWebP: ResponsiveImage;
+  imageJpeg: ResponsiveImage;
   alt: string;
   container: boolean;
 }): 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}"
-  />
+  <picture loading="lazy">
+    <source
+      srcset="${imageWebP.srcSet}" 
+      sizes="${sizes}"
+      width="${imageWebP.width}"
+      height="${imageWebP.height}"
+      alt="${alt}"
+    />
+    <img
+    tabindex="0"
+      loading="lazy"
+      srcset="${imageJpeg.srcSet}" 
+      sizes="${sizes}"
+      width="${imageJpeg.width}"
+      height="${imageJpeg.height}"
+      src="${last(imageJpeg.images)?.path}" 
+      alt="${alt}"
+    />
+  </picture>
   ${container ? `</div>` : ''}
 `;

src/page/basics/image/image.ts

@@ -7,9 +7,22 @@ import { ResponsiveImage } from '../../../types/responsive-image';
 export class Image extends PageElement {
   private static readonly imageScreenRatio = 0.8;
 
-  public constructor(image: ResponsiveImage, alt: string, container = true) {
+  public constructor(
+    imageWebP: ResponsiveImage,
+    imageJpeg: ResponsiveImage,
+    alt: string,
+    container = true
+  ) {
     super(
-      createElement(generate({ image, alt, container, sizes: Image.getSizes(image) }))
+      createElement(
+        generate({
+          imageWebP,
+          imageJpeg,
+          alt,
+          container,
+          sizes: Image.getSizes(imageWebP),
+        })
+      )
     );
   }
 

src/page/basics/preview/preview.ts

@@ -6,10 +6,15 @@ import { ResponsiveImage } from '../../../types/responsive-image';
 import { OnLoadEvent } from '../../../events/concrete-events/on-load-event';
 
 export class Preview extends PageElement {
-  public constructor(poster: ResponsiveImage, private readonly url: string, alt: string) {
+  public constructor(
+    posterWebP: ResponsiveImage,
+    posterJpeg: ResponsiveImage,
+    private readonly url: string,
+    alt: string
+  ) {
     super(createElement(generate({ alt })));
     this.url += '?portfolioView';
-    this.attachElementByReplacing('.poster', new Image(poster, alt));
+    this.attachElementByReplacing('.poster', new Image(posterWebP, posterJpeg, alt));
     this.query('.load-button').addEventListener('click', this.loadContent.bind(this));
   }