From b9898830541f052b11e63c7046a3c67f90d426e8 Mon Sep 17 00:00:00 2001 From: Andre Cruz Date: Mon, 23 Mar 2026 21:58:32 -0500 Subject: [PATCH 1/5] added function but mobile still not optimized --- src/components/compress-image.tsx | 41 +++++++++++++++++++++++++++++++ src/components/page-header.tsx | 7 ++++++ src/components/profile-card.tsx | 2 ++ src/components/profile-modal.tsx | 2 ++ 4 files changed, 52 insertions(+) create mode 100644 src/components/compress-image.tsx diff --git a/src/components/compress-image.tsx b/src/components/compress-image.tsx new file mode 100644 index 0000000..ebdc0f6 --- /dev/null +++ b/src/components/compress-image.tsx @@ -0,0 +1,41 @@ +/** + * getCompressedImageProps + * + * Returns Next.js props that constrain the served image to the actual + * rendered size, preventing the browser from downloading a full-resolution + * file for a small display slot. + * + * Usage: + * {alt} + * + * @param displaySize - The largest dimension the image is rendered at (px) + * @param quality - Compression quality 1–100 (default: 75) + */ +/** + * getCompressedImageProps + * + * Returns Next.js props with responsive sizes and quality. + * Use with fill for correct responsive image delivery. + * + * Usage: + * {alt} + * + * @param displaySize - The largest dimension the image is rendered at (px) + * @param quality - Compression quality 1–100 (default: 50) + */ +export function getCompressedImageProps(displaySize: number, quality = 50) { + return { + sizes: `(max-width: 768px) 320px, ${displaySize}px`, + quality, + }; +} + +export function getBannerImageProps(quality = 75) { + return { + priority: true, + fetchPriority: 'high' as const, + loading: 'eager' as const, + sizes: '100vw', + quality, + }; +} diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx index f3fb98e..6fd3e55 100644 --- a/src/components/page-header.tsx +++ b/src/components/page-header.tsx @@ -1,4 +1,5 @@ import Image from 'next/image'; +import { getBannerImageProps } from './compress-image'; export default function PageHeader({ title, image }: { title: string; image: string }) { return ( @@ -10,6 +11,7 @@ export default function PageHeader({ title, image }: { title: string; image: str fill src={image} alt={title} + {...getBannerImageProps()} />
@@ -28,6 +30,11 @@ export default function PageHeader({ title, image }: { title: string; image: str fill src={image} alt={title} + sizes="100vw" + quality={75} + priority + fetchPriority="high" + loading="eager" />
diff --git a/src/components/profile-card.tsx b/src/components/profile-card.tsx index 34aa024..4a457c4 100644 --- a/src/components/profile-card.tsx +++ b/src/components/profile-card.tsx @@ -3,6 +3,7 @@ import Image from 'next/image'; import React from 'react'; import { motion } from 'framer-motion'; import { IProfile } from '@/data/team'; +import { getCompressedImageProps } from '@/components/compress-image'; export default function ProfileCard({ profile, @@ -28,6 +29,7 @@ export default function ProfileCard({ alt={profile?.name} fill className="object-cover" + {...getCompressedImageProps(208)} />
diff --git a/src/components/profile-modal.tsx b/src/components/profile-modal.tsx index 4b9ea96..56f628d 100644 --- a/src/components/profile-modal.tsx +++ b/src/components/profile-modal.tsx @@ -12,6 +12,7 @@ import { import Image from 'next/image'; import { IProfile } from '@/data/team'; import { useEffect, useState } from 'react'; +import { getCompressedImageProps } from '@/components/compress-image'; export default function ProfileModal({ profile, @@ -90,6 +91,7 @@ export default function ProfileModal({ alt={profile?.name} fill className="object-cover" + {...getCompressedImageProps(208)} />
From 3a37ef922264648101a8d3862239541c509f618c Mon Sep 17 00:00:00 2001 From: Ara Nicole Santos Date: Sat, 4 Apr 2026 05:46:08 -0500 Subject: [PATCH 2/5] Add images config to manage home Image component and optimization are handled --- next.config.mjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/next.config.mjs b/next.config.mjs index 4678774..0685333 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,10 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + imageSizes: [16, 32, 48, 64, 96, 128, 160, 208, 256, 320, 384, 416, 512], + deviceSizes: [320, 375, 393, 400, 430, 480, 512, 640, 750, 828, 1080, 1200, 1920, 2048, 3840], + qualities: [50, 75], + }, +}; export default nextConfig; From d89e370e6ad48ede5b259361a6f97de6c6e90de5 Mon Sep 17 00:00:00 2001 From: Ara Nicole Santos Date: Sat, 4 Apr 2026 18:47:31 -0500 Subject: [PATCH 3/5] Fix eslint --- next.config.mjs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/next.config.mjs b/next.config.mjs index 0685333..534c6b7 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -2,7 +2,9 @@ const nextConfig = { images: { imageSizes: [16, 32, 48, 64, 96, 128, 160, 208, 256, 320, 384, 416, 512], - deviceSizes: [320, 375, 393, 400, 430, 480, 512, 640, 750, 828, 1080, 1200, 1920, 2048, 3840], + deviceSizes: [ + 320, 375, 393, 400, 430, 480, 512, 640, 750, 828, 1080, 1200, 1920, 2048, 3840, + ], qualities: [50, 75], }, }; From f6ea5f2128df63f5aaf49d2b0a76e6ce6e5f517e Mon Sep 17 00:00:00 2001 From: Ara Nicole Santos Date: Sat, 4 Apr 2026 19:00:14 -0500 Subject: [PATCH 4/5] Remove duplicate method comment --- src/components/compress-image.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/components/compress-image.tsx b/src/components/compress-image.tsx index ebdc0f6..f737d0b 100644 --- a/src/components/compress-image.tsx +++ b/src/components/compress-image.tsx @@ -1,16 +1,3 @@ -/** - * getCompressedImageProps - * - * Returns Next.js props that constrain the served image to the actual - * rendered size, preventing the browser from downloading a full-resolution - * file for a small display slot. - * - * Usage: - * {alt} - * - * @param displaySize - The largest dimension the image is rendered at (px) - * @param quality - Compression quality 1–100 (default: 75) - */ /** * getCompressedImageProps * From cb3c79c128b3eb722e5d9f0b0fee3c2cae31c689 Mon Sep 17 00:00:00 2001 From: Kanna Kim Date: Fri, 24 Apr 2026 01:05:53 -0500 Subject: [PATCH 5/5] optimize image size --- src/components/compress-image.tsx | 21 +++++++++++++++------ src/components/page-header.tsx | 4 ++-- src/components/profile-card.tsx | 2 +- src/components/profile-modal.tsx | 2 +- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/compress-image.tsx b/src/components/compress-image.tsx index f737d0b..81057a3 100644 --- a/src/components/compress-image.tsx +++ b/src/components/compress-image.tsx @@ -5,24 +5,33 @@ * Use with fill for correct responsive image delivery. * * Usage: - * {alt} + * {alt} * - * @param displaySize - The largest dimension the image is rendered at (px) + * @param displaySizeDesktop - The largest dimension the image is rendered at (px) on desktop + * @param displaySizeMobile - The largest dimension the image is rendered at (px) on mobile * @param quality - Compression quality 1–100 (default: 50) */ -export function getCompressedImageProps(displaySize: number, quality = 50) { +export function getCompressedImageProps( + displaySizeDesktop: number, + displaySizeMobile: number, + quality = 50, +) { return { - sizes: `(max-width: 768px) 320px, ${displaySize}px`, + sizes: `(max-width: 768px) ${displaySizeMobile}px, ${displaySizeDesktop}px`, quality, }; } -export function getBannerImageProps(quality = 75) { +export function getCompressedBannerImageProps( + displaySizeDesktop: number, + displaySizeMobile: number, + quality = 75, +) { return { priority: true, fetchPriority: 'high' as const, loading: 'eager' as const, - sizes: '100vw', + sizes: `(max-width: 768px) ${displaySizeMobile}px, ${displaySizeDesktop}px`, quality, }; } diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx index 6fd3e55..59d5268 100644 --- a/src/components/page-header.tsx +++ b/src/components/page-header.tsx @@ -1,5 +1,5 @@ import Image from 'next/image'; -import { getBannerImageProps } from './compress-image'; +import { getCompressedBannerImageProps } from './compress-image'; export default function PageHeader({ title, image }: { title: string; image: string }) { return ( @@ -11,7 +11,7 @@ export default function PageHeader({ title, image }: { title: string; image: str fill src={image} alt={title} - {...getBannerImageProps()} + {...getCompressedBannerImageProps(1920, 200)} />
diff --git a/src/components/profile-card.tsx b/src/components/profile-card.tsx index 4a457c4..51bfd4a 100644 --- a/src/components/profile-card.tsx +++ b/src/components/profile-card.tsx @@ -29,7 +29,7 @@ export default function ProfileCard({ alt={profile?.name} fill className="object-cover" - {...getCompressedImageProps(208)} + {...getCompressedImageProps(208, 208)} />
diff --git a/src/components/profile-modal.tsx b/src/components/profile-modal.tsx index 56f628d..6308ce0 100644 --- a/src/components/profile-modal.tsx +++ b/src/components/profile-modal.tsx @@ -91,7 +91,7 @@ export default function ProfileModal({ alt={profile?.name} fill className="object-cover" - {...getCompressedImageProps(208)} + {...getCompressedImageProps(208, 208)} />