feat: optimize static image loading

.github/workflows/ci.yml

@@ -23,6 +23,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
+          cache-dependency-path: package-lock.json
 
       - name: Cache node_modules
         id: cache-node-modules

components/atoms/author-info/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import styles from './style.module.css'
 import Image, { StaticImageData } from 'next/image'
 
@@ -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} sizes="36px" alt={`${author} avatar`} />
       <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}
+        sizes="(max-width: 768px) calc(100vw - 4rem), 642px"
+        className={styles.projectImage}
+        alt="Planetary open-source photography project"
+      />
       <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

components/organisms/campaign/style.module.css

@@ -3,3 +3,8 @@
   display: flex;
   flex-direction: column;
 }
+
+.projectImage {
+  width: 100%;
+  height: auto;
+}