diff --git a/client/src/images/framed-phone-screenshot-2.png b/client/src/images/framed-phone-screenshot-2.png
deleted file mode 100644
index 4ad6746..0000000
Binary files a/client/src/images/framed-phone-screenshot-2.png and /dev/null differ
diff --git a/client/src/images/framed-phone-screenshot-2.webp b/client/src/images/framed-phone-screenshot-2.webp
new file mode 100644
index 0000000..c5fa17c
Binary files /dev/null and b/client/src/images/framed-phone-screenshot-2.webp differ
diff --git a/client/src/images/framed-phone-screenshot.png b/client/src/images/framed-phone-screenshot.png
deleted file mode 100644
index f4928ba..0000000
Binary files a/client/src/images/framed-phone-screenshot.png and /dev/null differ
diff --git a/client/src/images/framed-phone-screenshot.webp b/client/src/images/framed-phone-screenshot.webp
new file mode 100644
index 0000000..d4973a7
Binary files /dev/null and b/client/src/images/framed-phone-screenshot.webp differ
diff --git a/client/src/images/screenshots/dedicated_mod_inprogress_mobile.png b/client/src/images/screenshots/dedicated_mod_inprogress_mobile.png
deleted file mode 100644
index f3a865b..0000000
Binary files a/client/src/images/screenshots/dedicated_mod_inprogress_mobile.png and /dev/null differ
diff --git a/client/src/images/screenshots/dedicated_mod_inprogress_mobile.webp b/client/src/images/screenshots/dedicated_mod_inprogress_mobile.webp
new file mode 100644
index 0000000..10dd35c
Binary files /dev/null and b/client/src/images/screenshots/dedicated_mod_inprogress_mobile.webp differ
diff --git a/client/src/images/screenshots/dedicated_mod_lobby_mobile.png b/client/src/images/screenshots/dedicated_mod_lobby_mobile.png
deleted file mode 100644
index 9d2ad70..0000000
Binary files a/client/src/images/screenshots/dedicated_mod_lobby_mobile.png and /dev/null differ
diff --git a/client/src/images/screenshots/player_inprogress_mobile.png b/client/src/images/screenshots/player_inprogress_mobile.png
deleted file mode 100644
index e5960e7..0000000
Binary files a/client/src/images/screenshots/player_inprogress_mobile.png and /dev/null differ
diff --git a/client/src/images/screenshots/temp_mod_inprogress_mobile.png b/client/src/images/screenshots/temp_mod_inprogress_mobile.png
deleted file mode 100644
index 581c877..0000000
Binary files a/client/src/images/screenshots/temp_mod_inprogress_mobile.png and /dev/null differ
diff --git a/client/src/images/screenshots/temp_mod_inprogress_mobile.webp b/client/src/images/screenshots/temp_mod_inprogress_mobile.webp
new file mode 100644
index 0000000..673ef28
Binary files /dev/null and b/client/src/images/screenshots/temp_mod_inprogress_mobile.webp differ
diff --git a/client/src/images/screenshots/views.png b/client/src/images/screenshots/views.png
deleted file mode 100644
index 9bee8d2..0000000
Binary files a/client/src/images/screenshots/views.png and /dev/null differ
diff --git a/client/src/images/tutorial/add-role-to-deck.gif b/client/src/images/tutorial/add-role-to-deck.gif
index 884a7f3..38d3ebf 100644
Binary files a/client/src/images/tutorial/add-role-to-deck.gif and b/client/src/images/tutorial/add-role-to-deck.gif differ
diff --git a/client/src/images/tutorial/create-custom-role.gif b/client/src/images/tutorial/create-custom-role.gif
index 7043beb..61f4f99 100644
Binary files a/client/src/images/tutorial/create-custom-role.gif and b/client/src/images/tutorial/create-custom-role.gif differ
diff --git a/client/src/images/tutorial/dedicated-mod.PNG b/client/src/images/tutorial/dedicated-mod.PNG
deleted file mode 100644
index 7d966c1..0000000
Binary files a/client/src/images/tutorial/dedicated-mod.PNG and /dev/null differ
diff --git a/client/src/images/tutorial/dedicated-mod.webp b/client/src/images/tutorial/dedicated-mod.webp
new file mode 100644
index 0000000..70249d2
Binary files /dev/null and b/client/src/images/tutorial/dedicated-mod.webp differ
diff --git a/client/src/images/tutorial/mod-transfer.gif b/client/src/images/tutorial/mod-transfer.gif
index 7018c1c..e2fd2a5 100644
Binary files a/client/src/images/tutorial/mod-transfer.gif and b/client/src/images/tutorial/mod-transfer.gif differ
diff --git a/client/src/images/tutorial/moderation-option.png b/client/src/images/tutorial/moderation-option.png
deleted file mode 100644
index 2763a47..0000000
Binary files a/client/src/images/tutorial/moderation-option.png and /dev/null differ
diff --git a/client/src/images/tutorial/player-view.gif b/client/src/images/tutorial/player-view.gif
index fafa5ee..66424b6 100644
Binary files a/client/src/images/tutorial/player-view.gif and b/client/src/images/tutorial/player-view.gif differ
diff --git a/client/src/images/tutorial/temporary-mod.PNG b/client/src/images/tutorial/temporary-mod.PNG
deleted file mode 100644
index a433c00..0000000
Binary files a/client/src/images/tutorial/temporary-mod.PNG and /dev/null differ
diff --git a/client/src/images/tutorial/temporary-mod.webp b/client/src/images/tutorial/temporary-mod.webp
new file mode 100644
index 0000000..2ae62f0
Binary files /dev/null and b/client/src/images/tutorial/temporary-mod.webp differ
diff --git a/client/src/views/home.html b/client/src/views/home.html
index d52d038..793fcee 100644
--- a/client/src/views/home.html
+++ b/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 @@
     </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:play.werewolf.contact@gmail.com?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:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top"><img alt="email" src='/images/email.svg'/></a>
         </div>
         <div>
             <p>Werewolf created by Andrew Plotkin</p>
diff --git a/client/src/views/how-to-use.html b/client/src/views/how-to-use.html
index 8f28bb4..464f313 100644
--- a/client/src/views/how-to-use.html
+++ b/client/src/views/how-to-use.html
@@ -97,7 +97,7 @@
     <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 @@
         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>