diff --git a/src/data/portfolio.ts b/src/data/portfolio.ts
index 8f99ebb..3341d72 100644
--- a/src/data/portfolio.ts
+++ b/src/data/portfolio.ts
@@ -30,6 +30,7 @@ export const create = (): Array<PageElement> => [
       photo: Image({
         imageWebP: meWebP,
         alt: `a picture of me`,
+        imageScreenRatio: 0.3,
       }),
       about: [
         `
diff --git a/src/page/basics/image/image.html.ts b/src/page/basics/image/image.html.ts
index 3cac53f..dff6bc2 100644
--- a/src/page/basics/image/image.html.ts
+++ b/src/page/basics/image/image.html.ts
@@ -8,11 +8,13 @@ export const Image = ({
   alt,
   container = false,
   isIgnoredByImageViewer = false,
+  imageScreenRatio = 0.8,
 }: {
   imageWebP: ResponsiveImage;
   alt: string;
   container?: boolean;
   isIgnoredByImageViewer?: boolean;
+  imageScreenRatio?: number;
 }): html => `
   ${
     container
@@ -28,7 +30,7 @@ export const Image = ({
       <picture loading="lazy">
         <source
           srcset="${imageWebP.srcSet}" 
-          sizes="${getSizes(imageWebP)}"
+          sizes="${getSizes(imageWebP, imageScreenRatio)}"
           type="image/webp"
         />
         <img
@@ -45,9 +47,8 @@ export const Image = ({
   ${container ? `</div>` : ''}
 `;
 
-const IMAGE_SCREEN_RATIO = 0.8;
-const getSizes = (image: ResponsiveImage): string =>
+const getSizes = (image: ResponsiveImage, imageScreenRatio: number): string =>
   image.images
     .slice(0, -1)
-    .map((d) => `(max-width: ${d.width / IMAGE_SCREEN_RATIO}px) ${d.width}px,`)
+    .map((d) => `(max-width: ${d.width / imageScreenRatio}px) ${d.width}px,`)
     .join('\n') + `\n${last(image.images)!.width}px`;