diff --git a/build.sh b/build.sh
index c85b161..3ef80e3 100755
--- a/build.sh
+++ b/build.sh
@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 COMMIT="$(git rev-parse HEAD)"
-sed -i "s/css?=\w*/css?=${COMMIT}/g" index.html
+sed -i "s/css?=\w*/css?v=${COMMIT}/g" index.html
diff --git a/images/calculator.png b/images/calculator.png
deleted file mode 100644
index 696b035..0000000
Binary files a/images/calculator.png and /dev/null differ
diff --git a/images/calculator.webp b/images/calculator.webp
new file mode 100644
index 0000000..62fea3f
Binary files /dev/null and b/images/calculator.webp differ
diff --git a/images/card.png b/images/card.png
deleted file mode 100644
index ef27631..0000000
Binary files a/images/card.png and /dev/null differ
diff --git a/images/card.webp b/images/card.webp
new file mode 100644
index 0000000..2ebb0ba
Binary files /dev/null and b/images/card.webp differ
diff --git a/images/cv.png b/images/cv.png
deleted file mode 100644
index ef68f07..0000000
Binary files a/images/cv.png and /dev/null differ
diff --git a/images/cv.webp b/images/cv.webp
new file mode 100644
index 0000000..4dbfdb0
Binary files /dev/null and b/images/cv.webp differ
diff --git a/images/gopaper.png b/images/gopaper.png
deleted file mode 100644
index 9050963..0000000
Binary files a/images/gopaper.png and /dev/null differ
diff --git a/images/gopaper.webp b/images/gopaper.webp
new file mode 100644
index 0000000..fdda747
Binary files /dev/null and b/images/gopaper.webp differ
diff --git a/images/movie-explorer-mobile-2.png b/images/movie-explorer-mobile-2.png
deleted file mode 100644
index b6b08cf..0000000
Binary files a/images/movie-explorer-mobile-2.png and /dev/null differ
diff --git a/images/movie-explorer-mobile-2.webp b/images/movie-explorer-mobile-2.webp
new file mode 100644
index 0000000..b967ba5
Binary files /dev/null and b/images/movie-explorer-mobile-2.webp differ
diff --git a/images/movie-explorer-mobile.png b/images/movie-explorer-mobile.png
deleted file mode 100644
index 9001d25..0000000
Binary files a/images/movie-explorer-mobile.png and /dev/null differ
diff --git a/images/movie-explorer-mobile.webp b/images/movie-explorer-mobile.webp
new file mode 100644
index 0000000..b0bfb71
Binary files /dev/null and b/images/movie-explorer-mobile.webp differ
diff --git a/images/movie-explorer.png b/images/movie-explorer.png
deleted file mode 100644
index c031aed..0000000
Binary files a/images/movie-explorer.png and /dev/null differ
diff --git a/images/movie-explorer.webp b/images/movie-explorer.webp
new file mode 100644
index 0000000..69a8200
Binary files /dev/null and b/images/movie-explorer.webp differ
diff --git a/images/subman-mobile-2.png b/images/subman-mobile-2.png
deleted file mode 100644
index 8fe1ab5..0000000
Binary files a/images/subman-mobile-2.png and /dev/null differ
diff --git a/images/subman-mobile-2.webp b/images/subman-mobile-2.webp
new file mode 100644
index 0000000..75335ac
Binary files /dev/null and b/images/subman-mobile-2.webp differ
diff --git a/images/subman-mobile.png b/images/subman-mobile.png
deleted file mode 100644
index 6e3ede7..0000000
Binary files a/images/subman-mobile.png and /dev/null differ
diff --git a/images/subman-mobile.webp b/images/subman-mobile.webp
new file mode 100644
index 0000000..4146431
Binary files /dev/null and b/images/subman-mobile.webp differ
diff --git a/images/subman.png b/images/subman.png
deleted file mode 100644
index e9fcae0..0000000
Binary files a/images/subman.png and /dev/null differ
diff --git a/images/subman.webp b/images/subman.webp
new file mode 100644
index 0000000..93fb2eb
Binary files /dev/null and b/images/subman.webp differ
diff --git a/index.html b/index.html
index f0f0461..81f067a 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Andrzej Stepien : Coder for Hire</title>
-  <link rel="stylesheet" href="css/defaults.css?=79965b392eb4247ada3eaed20a8d12e6f8c34337" />
-  <link rel="stylesheet" href="css/styles.css?=79965b392eb4247ada3eaed20a8d12e6f8c34337" />
+  <link rel="stylesheet" href="css/defaults.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b" />
+  <link rel="stylesheet" href="css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b" />
 
   <meta http-equiv="pragma" content="no-cache" />
 
@@ -16,7 +16,7 @@
   <meta name="twitter:title" content="Andrzej Stepien - Coder for Hire" />
   <meta name="twitter:description"
     content="My name is Andrzej. I am an experienced fullstack web developer from England, currently residing in Spain." />
-  <meta name="twitter:image" content="https://demos.ajstepien.xyz/images/cv.png" />
+  <meta name="twitter:image" content="https://demos.ajstepien.xyz/images/cv.webp" />
 
   <!-- Open graph meta -->
   <meta property="og:type" content="website" />
@@ -24,7 +24,7 @@
   <meta property="og:description"
     content="My name is Andrzej. I am an experienced fullstack web developer from England, currently residing in Spain." />
   <meta property="og:url" content="https://demos.ajstepien.xyz" />
-  <meta property="og:image" content="https://demos.ajstepien.xyz/images/cv.png" />
+  <meta property="og:image" content="https://demos.ajstepien.xyz/images/cv.webp" />
 
 </head>
 
@@ -36,7 +36,7 @@
     <section>
       <div class="container">
         <h3>Allow me to introduce myself...</h3>
-        <img src="images/cv.png" class="image" alt="A photo of myself, smiling to camera." />
+        <img src="images/cv.webp" class="image" alt="A photo of myself, smiling to camera." />
 
         <div id="intro">
           <p>
@@ -167,10 +167,10 @@
               <h3>Subman</h3>
             </a>
             <div class="gallery">
-              <a href="images/subman.png"><img src="images/subman.png" alt="A screenshot of subman in action."
+              <a href="images/subman.webp"><img src="images/subman.png" alt="A screenshot of subman in action."
                   class="desktop-screen" /></a>
-              <a href="images/subman-mobile.png"><img src="images/subman-mobile.png" class="mobile-screen"></a>
-              <a href="images/subman-mobile-2.png"><img src="images/subman-mobile-2.png" class="mobile-screen"></a>
+              <a href="images/subman-mobile.webp"><img src="images/subman-mobile.png" class="mobile-screen"></a>
+              <a href="images/subman-mobile-2.webp"><img src="images/subman-mobile-2.png" class="mobile-screen"></a>
             </div>
             <p>
               A self-hosted literary submission management system comprising a
@@ -187,11 +187,11 @@
               <h3>Movie-Explorer</h3>
             </a>
             <div class="gallery">
-              <a href="images/movie-explorer.png"><img src="images/movie-explorer.png"
+              <a href="images/movie-explorer.webp"><img src="images/movie-explorer.png"
                   alt="A screenshot of Movie-Explorer in action." class="desktop-screen"></a>
-              <a href="images/movie-explorer-mobile.png"><img src="images/movie-explorer-mobile.png"
+              <a href="images/movie-explorer-mobile.webp"><img src="images/movie-explorer-mobile.png"
                   alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
-              <a href="images/movie-explorer-mobile-2.png"><img src="images/movie-explorer-mobile-2.png"
+              <a href="images/movie-explorer-mobile-2.webp"><img src="images/movie-explorer-mobile-2.png"
                   alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
             </div>
             <p>
@@ -207,7 +207,7 @@
             <a href="https://projects.ajstepien.xyz/andrzej/gopaper">
               <h3>GoPaper</h3>
             </a>
-            <a href="images/gopaper.png"><img src="images/gopaper.png" alt="A screenshot of GoPaper in action."
+            <a href="images/gopaper.webp"><img src="images/gopaper.png" alt="A screenshot of GoPaper in action."
                 class="desktop-screen" /></a>
             <p>A cross-platform wallpaper demon, built to ensure color harmony, written in Go.</p>
             <div class="links-container">
@@ -230,7 +230,7 @@
             <a href="https://demos.ajstepien.xyz/calculator">
               <h3>Calculator</h3>
             </a>
-            <a href="images/calculator.png"><img src="images/calculator.png"
+            <a href="images/calculator.webp"><img src="images/calculator.png" png
                 alt="A screenshot of the calculator app in action." class="mobile-screen"></a>
             <p>A simple calculator app written in React and vanilla CSS. Scales responsively to look great on any
               screen.</p>