⚡️ Converted all imgs to webp (including gifs) with compression

index.html

@@ -44,7 +44,7 @@
             <div class="to-fade" id="about">
                 <h2>About</h2>
                 <div class="block">
-                    <img loading="lazy" class="to-grow" src="assets/imgs/FlorianSylvain.jpg">
+                    <img loading="lazy" class="to-grow" src="assets/imgs/FlorianSylvain.webp">
                     <p>
                         IT student at Gustave Eiffel University and R&D Developer Apprentice at WATT Earth, I've always been passionate about computer science. Web design, video games, and algorithms are my main spearhead in computer science.
                     </p>
@@ -144,7 +144,7 @@
             <!-- ---------- Articles contents ---------- -->
 
             <div id="pong2D" class="article-content ">
-                <img loading="lazy" src="assets/imgs/Pong2D.gif">
+                <img loading="lazy" src="assets/imgs/Pong2D-video.webp">
                 <h3>Pong2D</h3>
                 <p>
                     My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
@@ -156,7 +156,7 @@
             </div>
 
             <div id="pong3D" class="article-content">
-                <img loading="lazy" src="assets/imgs/Pong3D.gif">
+                <img loading="lazy" src="assets/imgs/Pong3D-video.webp">
                 <h3>Pong3D</h3>
                 <p>
                     My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
@@ -171,7 +171,7 @@
             </div>
 
             <div id="risitasBot" class="article-content">
-                <img loading="lazy" src="assets/imgs/RisitasBot.gif">
+                <img loading="lazy" src="assets/imgs/RisitasBot-video.webp">
                 <h3>Risitas Bot</h3>
                 <p>
                     Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games.
@@ -183,7 +183,7 @@
             </div>
 
             <div id="riverwood" class="article-content">
-                <img loading="lazy" src="assets/imgs/Riverwood.gif">
+                <img loading="lazy" src="assets/imgs/Riverwood-video.webp">
                 <h3>Riverwood</h3>
                 <p>
                     Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet.
@@ -195,7 +195,7 @@
             </div>
 
             <div id="thesesFr" class="article-content">
-                <img loading="lazy" src="assets/imgs/ThesesFr.gif">
+                <img loading="lazy" src="assets/imgs/ThesesFr-video.webp">
                 <h3>thèses.fr</h3>
                 <p>
                     The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map).

stylesheet.css

@@ -498,48 +498,48 @@ a {
 }
 
 .pong2D {
-    background: center / contain no-repeat url('assets/imgs/Pong2D.png'),
+    background: center / contain no-repeat url('assets/imgs/Pong2D.webp'),
-                center / cover url('assets/imgs/Pong2D_blur.png');
+                center / cover url('assets/imgs/Pong2D_blur.webp');
 }
 
 .pong2D:hover {
-    background: center / cover no-repeat url('assets/imgs/Pong2D.gif');
+    background: center / cover no-repeat url('assets/imgs/Pong2D-video.webp');
 }
 
 .pong3D {
-    background: center / contain no-repeat url('assets/imgs/Pong3D.png'),
+    background: center / contain no-repeat url('assets/imgs/Pong3D.webp'),
-                center / cover url('assets/imgs/Pong3D_blur.png');
+                center / cover url('assets/imgs/Pong3D_blur.webp');
 }
 
 .pong3D:hover {
-    background: center / cover no-repeat url('assets/imgs/Pong3D.gif');
+    background: center / cover no-repeat url('assets/imgs/Pong3D-video.webp');
 }
 
 .risitasBot {
-    background: center / contain no-repeat url('assets/imgs/RisitasBot.png'),
+    background: center / contain no-repeat url('assets/imgs/RisitasBot.webp'),
-                center / cover url('assets/imgs/RisitasBot_blur.png');
+                center / cover url('assets/imgs/RisitasBot_blur.webp');
 }
 
 .risitasBot:hover {
-    background: center / cover no-repeat url('assets/imgs/RisitasBot.gif');
+    background: center / cover no-repeat url('assets/imgs/RisitasBot-video.webp');
 }
 
 .riverwood {
-    background: center / contain no-repeat url('assets/imgs/Riverwood.png'),
+    background: center / contain no-repeat url('assets/imgs/Riverwood.webp'),
-                center / cover url('assets/imgs/Riverwood_blur.png');
+                center / cover url('assets/imgs/Riverwood_blur.webp');
 }
 
 .riverwood:hover {
-    background: center / cover no-repeat url('assets/imgs/Riverwood.gif');
+    background: center / cover no-repeat url('assets/imgs/Riverwood-video.webp');
 }
 
 .thesesFr {
-    background: center / contain no-repeat url('assets/imgs/ThesesFr.png'),
+    background: center / contain no-repeat url('assets/imgs/ThesesFr.webp'),
-                center / cover url('assets/imgs/ThesesFr_blur.png');
+                center / cover url('assets/imgs/ThesesFr_blur.webp');
 }
 
 .thesesFr:hover {
-    background: center / cover no-repeat url('assets/imgs/ThesesFr.gif');
+    background: center / cover no-repeat url('assets/imgs/ThesesFr-video.webp');
 }
 
 .degree {