diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index efce1f5..c7ee810 100644
--- a/.github/workflows/ci.yml
+++ b/.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
diff --git a/assets/avatar.png b/assets/avatar.png
deleted file mode 100644
index d85a4d1..0000000
Binary files a/assets/avatar.png and /dev/null differ
diff --git a/assets/avatar.webp b/assets/avatar.webp
new file mode 100644
index 0000000..4659e15
Binary files /dev/null and b/assets/avatar.webp differ
diff --git a/assets/example.png b/assets/example.png
deleted file mode 100644
index d849f24..0000000
Binary files a/assets/example.png and /dev/null differ
diff --git a/assets/example.webp b/assets/example.webp
new file mode 100644
index 0000000..f349e0a
Binary files /dev/null and b/assets/example.webp differ
diff --git a/components/atoms/author-info/index.tsx b/components/atoms/author-info/index.tsx
index 456f5f7..74f7d0a 100644
--- a/components/atoms/author-info/index.tsx
+++ b/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 />
diff --git a/components/organisms/campaign/index.tsx b/components/organisms/campaign/index.tsx
index 3a87451..0f5ba5a 100644
--- a/components/organisms/campaign/index.tsx
+++ b/components/organisms/campaign/index.tsx
@@ -1,9 +1,9 @@
 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 (
@@ -11,7 +11,14 @@ export function Campaign() {
       <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
diff --git a/components/organisms/campaign/style.module.css b/components/organisms/campaign/style.module.css
index b16b3d8..24f9aee 100644
--- a/components/organisms/campaign/style.module.css
+++ b/components/organisms/campaign/style.module.css
@@ -3,3 +3,8 @@
   display: flex;
   flex-direction: column;
 }
+
+.projectImage {
+  width: 100%;
+  height: auto;
+}