covert images to webp/compress where possible

client/src/views/home.html

@@ -24,7 +24,7 @@
     <div id="mobile-menu-background-overlay"></div>
     <div id="navbar"></div>
     <div id="home-page-top-section">
-        <img src="../images/logo_cropped.gif"/>
+        <img alt="Werewolf App Logo" src="../images/logo_cropped.gif"/>
         <h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
         <div id="create-join">
             <a href="/create">
@@ -44,19 +44,19 @@ <h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a r
     </div>
     <div id="about-container">
         <div>
-            <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.png"/>
+            <img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.webp"/>
             <h2>Join a game and have a role dealt to your device.</h2>
         </div>
         <div>
-            <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.png"/>
+            <img id="framed-phone-screenshot-2" alt="framed phone screenshot" src="../images/framed-phone-screenshot-2.webp"/>
             <h2>Create your own game with default or custom roles.</h2>
         </div>
     </div>
     <footer id="footer">
-        <a href="https://www.buymeacoffee.com/alecm33"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=333243&font_colour=ffffff&font_family=Lato&outline_colour=b1afcd&coffee_colour=b1afcd" /></a>
+        <a href="https://www.buymeacoffee.com/alecm33"><img alt="Buy Me a Coffee" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=333243&font_colour=ffffff&font_family=Lato&outline_colour=b1afcd&coffee_colour=b1afcd" /></a>
         <div>
-            <a href="https://github.com/AlecM33/Werewolf"><img src='/images/GitHub-Mark-Light-120px-plus.png'/></a>
-            <a href="mailto:[email protected]?Subject=Werewolf App" target="_top"><img src='/images/email.svg'/></a>
+            <a aria-label="view the project on Github" href="https://github.com/AlecM33/Werewolf"><img alt="Github" src='/images/GitHub-Mark-Light-120px-plus.png'/></a>
+            <a aria-label="email the creator with questions" href="mailto:[email protected]?Subject=Werewolf App" target="_top"><img alt="email" src='/images/email.svg'/></a>
         </div>
         <div>
             <p>Werewolf created by Andrew Plotkin</p>

client/src/views/how-to-use.html

@@ -97,7 +97,7 @@ <h1 class="how-to-use-header" id="being-the-moderator">Being the Moderator</h1>
     <div class="how-to-use-section">
         This is an example of what a <span class="emphasized">dedicated moderator</span> sees during the game:
         <br><br>
-        <img class='tutorial-image-small-portrait' src="../images/screenshots/dedicated_mod_inprogress_mobile.png"/>
+        <img class='tutorial-image-small-portrait' src="../images/screenshots/dedicated_mod_inprogress_mobile.webp"/>
         <br><br>
         They can see who is on which team and who has each role. The moderator kills and reveals players. They are
         separate actions - note the two buttons for each player. So if you want to play a game where people's roles are
@@ -115,7 +115,7 @@ <h1 class="how-to-use-header" id="being-the-moderator">Being the Moderator</h1>
         transfer their powers. Their powers will be transferred automatically to the first person they remove from the game
         (which can be themselves).
         <br><br>
-        <img class='tutorial-image-small-portrait' src="../images/screenshots/temp_mod_inprogress_mobile.png"/>
+        <img class='tutorial-image-small-portrait' src="../images/screenshots/temp_mod_inprogress_mobile.webp"/>
         <br><br>
         <h3>Transferring your moderator powers</h3>
         <br>