Fix image sizing

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',
         }),
       })
     );

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}"
       />

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]',