Fix responsive images

src/helper/last.ts

@@ -1,2 +0,0 @@
-export const last = <T>(list: ArrayLike<T>): T | undefined =>
-  list.length >= 1 ? list[list.length - 1] : undefined;

src/page/header/header.ts

@@ -25,7 +25,6 @@ export class Header extends PageElement {
           photo: Image({
             image,
             alt: imageAltText,
-            imageScreenRatio: 0.2,
           }),
         })
       )

src/page/image-viewer/image/image.html.ts

@@ -1,4 +1,3 @@
-import { last } from '../../../helper/last';
 import { html } from '../../../types/html';
 import { ResponsiveImage } from '../../../types/responsive-image';
 import './image.scss';
@@ -8,13 +7,11 @@ export const Image = ({
   alt,
   container = false,
   isIgnoredByImageViewer = false,
-  imageScreenRatio = 0.8,
 }: {
   image: ResponsiveImage;
   alt: string;
   container?: boolean;
   isIgnoredByImageViewer?: boolean;
-  imageScreenRatio?: number;
 }): html => `
   ${
     container
@@ -28,28 +25,15 @@ export const Image = ({
       style="background-size: cover; background-image: url('${image.placeholder}')"
       ${isIgnoredByImageViewer ? '' : 'tabindex="0"'}
     >
-      <picture loading="lazy">
-        <source
-          srcset="${image.srcSet}" 
-          sizes="${getSizes(image, imageScreenRatio)}"
-          type="image/"
-        />
-        <img
-          ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
-         
-          loading="lazy"
-          width="${image.width}"
-          height="${image.height}"
-          src="${last(image.images)?.path}" 
-          alt="${alt}"
-        />
-      </picture>
+      <img
+        ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
+        loading="lazy"
+        width="${image.width}"
+        height="${image.height}"
+        srcset="${image.srcSet}"
+        src="${image.src}"
+        alt="${alt}"
+      />
     </div>
   ${container ? '</div>' : ''}
 `;
-
-const getSizes = (image: ResponsiveImage, imageScreenRatio: number): string =>
-  image.images
-    .slice(0, -1)
-    .map((d) => `(max-width: ${d.width / imageScreenRatio}px) ${d.width}px,`)
-    .join('\n') + `\n${last(image.images)!.width}px`;