Reduce main page images filesize by 90% 🖼️ (#3258)

## Description:

Reduce main page images filesize by 90%
Converted to webp

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FloPinguin

index.html

@@ -127,20 +127,20 @@
         id="background-layer"
         class="absolute inset-0 bg-cover bg-center opacity-50 [filter:brightness(1.0)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.9)]"
         style="
-          background-image: url("/resources/images/background.png");
+          background-image: url("/resources/images/background.webp");
         "
       ></div>
       <div
         class="absolute inset-0 bg-center bg-no-repeat bg-contain hidden lg:block"
         style="
-          background-image: url(&quot;/resources/images/OpenFront.png&quot;);
+          background-image: url(&quot;/resources/images/OpenFront.webp&quot;);
           opacity: 0.25;
         "
       ></div>
       <div
         class="absolute inset-0 bg-center bg-no-repeat bg-contain lg:hidden"
         style="
-          background-image: url(&quot;/resources/images/OF.png&quot;);
+          background-image: url(&quot;/resources/images/OF.webp&quot;);
           opacity: 0.25;
         "
       ></div>