Make WebP the default image format

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

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

src/page/basics/preview/preview.html.ts

@@ -7,14 +7,14 @@ import './preview.scss';
 
 export const generate = ({
   alt,
-  posterWebP,
+  poster,
 }: {
   alt: string;
-  posterWebP: ResponsiveImage;
+  poster: ResponsiveImage;
 }): html => `
   <div class="preview">
     ${Image({
-      imageWebP: posterWebP,
+      image: poster,
       alt,
       container: true,
       isIgnoredByImageViewer: true,

src/page/basics/preview/preview.ts

@@ -4,12 +4,8 @@ import { PageElement } from '../../page-element';
 import { generate } from './preview.html';
 
 export class Preview extends PageElement {
-  public constructor(
-    posterWebP: ResponsiveImage,
-    private readonly url: string,
-    alt: string
-  ) {
-    super(createElement(generate({ posterWebP, alt })));
+  public constructor(poster: ResponsiveImage, private readonly url: string, alt: string) {
+    super(createElement(generate({ poster, alt })));
     this.url += '?portfolioView';
     this.query('.start-button').addEventListener('click', this.loadContent.bind(this));
   }

src/page/basics/video/video-parameters.ts

@@ -4,6 +4,6 @@ import { url } from '../../../types/url';
 export interface VideoParameters {
   mp4: url;
   webm: url;
-  posterWebP: ResponsiveImage;
+  poster: ResponsiveImage;
   invertButton?: boolean;
 }

src/page/basics/video/video.html.ts

@@ -5,17 +5,12 @@ import { Image } from '../../basics/image/image.html';
 import { VideoParameters } from './video-parameters';
 import './video.scss';
 
-export const generate = ({
-  webm,
-  mp4,
-  posterWebP,
-  invertButton,
-}: VideoParameters): html => `
+export const generate = ({ webm, mp4, poster, invertButton }: VideoParameters): html => `
   <div class="figure-container video-container" style="padding-top:${
-    (posterWebP.height / posterWebP.width) * 100
+    (poster.height / poster.width) * 100
   }%">
     ${Image({
-      imageWebP: posterWebP,
+      image: poster,
       alt: `thumbnail for the video`,
       isIgnoredByImageViewer: true,
     })}

src/page/header/header.ts

@@ -8,12 +8,12 @@ import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
 export class PageHeader extends PageElement {
   public constructor({
     name,
-    imageWebP,
+    image,
     imageAltText,
     about,
   }: {
     name: string;
-    imageWebP: ResponsiveImage;
+    image: ResponsiveImage;
     imageAltText: string;
     about: Array<string>;
   }) {
@@ -23,7 +23,7 @@ export class PageHeader extends PageElement {
           name,
           about,
           photo: Image({
-            imageWebP,
+            image,
             alt: imageAltText,
             imageScreenRatio: 0.2,
           }),