feat(perf): optimize image loading with WebP conversion and next/imag…

components/atoms/author-info/index.tsx

@@ -11,7 +11,7 @@ export interface AuthorInfoProps {
 export function AuthorInfo({ image, author, dateTime }: AuthorInfoProps) {
   return (
     <div className={styles.content}>
-      <Image src={image} width={36} height={36} alt="avatar" />
+      <Image src={image} width={36} height={36} alt="avatar" sizes="36px" />
       <div className={styles.author}>
         <span>{dateTime}</span>
         <br />

components/organisms/campaign/index.tsx

@@ -1,17 +1,24 @@
 import React from 'react'
 import styles from './style.module.css'
 import Image from 'next/image'
-import picture from '../../../assets/example.png'
+import picture from '../../../assets/example.webp'
 import { AuthorInfo } from '../../atoms'
-import avatar from '../../../assets/avatar.png'
+import avatar from '../../../assets/avatar.webp'
 
 export function Campaign() {
   return (
     <div className={styles.content}>
       <h6>Starfund #821</h6>
       <h1>Planetary open-source photography</h1>
       <AuthorInfo author="Sam Stroop" dateTime="21 hours ago" image={avatar} />
-      <Image src={picture} width={642} height={294} alt="project image" />
+      <Image
+        src={picture}
+        width={642}
+        height={294}
+        alt="project image"
+        sizes="(max-width: 768px) 100vw, 642px"
+        priority
+      />
       <p>
         Hello! My name is Sam and I’m working with a team of three other
         passionate individuals to take photos of the planets in our solar system

next.config.js

@@ -13,6 +13,13 @@ const nextConfig = {
     locales: ['en', 'es'],
     defaultLocale: 'en',
   },
+  images: {
+    // Serve WebP (and AVIF where supported) instead of the original format.
+    formats: ['image/avif', 'image/webp'],
+    // Breakpoints used when generating responsive srcsets.
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
 };
 
 setupDevPlatform();