perf(images): reduce image sizes

argos-ci · Dec 27, 2023 · f15170f · f15170f
1 parent ffab821
commit f15170f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/app/home/integrations/Integrations.tsx b/app/home/integrations/Integrations.tsx
@@ -40,8 +40,8 @@ export function Integrations() {
           <div className="flex w-full" style={{ aspectRatio: "1/1" }}>
             <Image
               src={integrationsLight.src}
-              width={1224}
-              height={1224}
+              width={544}
+              height={544}
               style={{
                 width: "100%",
                 height: "auto",
@@ -51,8 +51,8 @@ export function Integrations() {
             />
             <Image
               src={integrationsDark.src}
-              width={1224}
-              height={1224}
+              width={544}
+              height={544}
               style={{
                 width: "100%",
                 height: "auto",

diff --git a/components/Post.tsx b/components/Post.tsx
@@ -24,7 +24,7 @@ export const MainImage = ({
         {...props}
         priority
         fill
-        sizes="(max-width: 1024px) 100vw, 50vw"
+        sizes="(max-width: 900px) 100vw, 832px"
         alt="Staircase / eye in library — Photo by Petri Heiskanen"
         style={{
           objectFit: "cover",

diff --git a/components/PostCard.tsx b/components/PostCard.tsx
@@ -35,7 +35,11 @@ export const PostCardImage = ({
       <Image
         {...props}
         fill
-        sizes="(max-width: 1024px) 100vw, 50vw"
+        sizes={
+          extended
+            ? "(max-width: 768px) 100vw, 1100px"
+            : "(max-width: 768px) 100vw, 510px"
+        }
         priority={Boolean(extended)}
         alt={alt}
         style={{