convert images to webp

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

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>