Eager-load first card pic

src/data/projects/great-ai.ts

@@ -11,6 +11,7 @@ export const greatAi: TimelineElementParameters = {
     image: greatAiPoster,
     alt: 'some example code using GreatAI',
     container: true,
+    isEagerLoaded: true,
   }),
   description:
     'I investigated an approach for increasing the adoption rate of ML deployment libraries and hence the overall quality of industrial deployments. I did this by simultaneously focusing on providing robust, automated implementations of best practices and an accessible API. One of the outcomes of my research is the GreatAI framework.',

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

@@ -8,12 +8,14 @@ export const Image = ({
   container = false,
   isIgnoredByImageViewer = false,
   sizes = null,
+  isEagerLoaded = false,
 }: {
   image: ResponsiveImage;
   alt: string;
   container?: boolean;
   isIgnoredByImageViewer?: boolean;
   sizes?: string | null;
+  isEagerLoaded?: boolean;
 }): html => `
   ${
     container
@@ -29,10 +31,12 @@ export const Image = ({
     >
       <img
         ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
-        loading="lazy"
+        ${isEagerLoaded ? '' : 'loading="lazy"'}
         srcset="${image.srcSet}"
         ${sizes ? `sizes="${sizes}"` : ''}
         src="${image.src}"
+        width="${image.width}"
+        height="${image.height}"
         alt="${alt}"
       />
     </div>