From babda527797eccae79ce16db2b53a6ddb9006ea1 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sun, 25 Sep 2022 21:43:02 +0200
Subject: [PATCH] Fix image sizing

---
 src/page/header/header.ts                 | 1 +
 src/page/image-viewer/image/image.html.ts | 5 +++--
 webpack.config.js                         | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/page/header/header.ts b/src/page/header/header.ts
index bfb45ae..e127a6c 100644
--- a/src/page/header/header.ts
+++ b/src/page/header/header.ts
@@ -23,6 +23,7 @@ export class Header extends PageElement {
         photo: Image({
           image,
           alt: imageAltText,
+          sizes: '(max-width: 924px) 125px, 190px',
         }),
       })
     );
diff --git a/src/page/image-viewer/image/image.html.ts b/src/page/image-viewer/image/image.html.ts
index b3a482e..e5de12c 100644
--- a/src/page/image-viewer/image/image.html.ts
+++ b/src/page/image-viewer/image/image.html.ts
@@ -7,11 +7,13 @@ export const Image = ({
   alt,
   container = false,
   isIgnoredByImageViewer = false,
+  sizes = null,
 }: {
   image: ResponsiveImage;
   alt: string;
   container?: boolean;
   isIgnoredByImageViewer?: boolean;
+  sizes?: string | null;
 }): html => `
   ${
     container
@@ -28,9 +30,8 @@ export const Image = ({
       <img
         ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
         loading="lazy"
-        width="${image.width}"
-        height="${image.height}"
         srcset="${image.srcSet}"
+        ${sizes ? `sizes="${sizes}"` : ''}
         src="${image.src}"
         alt="${alt}"
       />
diff --git a/webpack.config.js b/webpack.config.js
index 3f2bbe9..1f4a90f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -59,10 +59,10 @@ module.exports = (env, argv) => ({
         loader: 'responsive-loader',
         options: {
           adapter: require('responsive-loader/sharp'),
-          sizes: [200, 500, 1200, 1920],
+          sizes: [200, 500, 900, 1400, 1920],
           placeholder: true,
           placeholderSize: 64,
-          quality: 90,
+          quality: 85,
           format: 'webp',
           progressive: true,
           name: '[hash:8].[ext]',