use webp in event

files/assets/event/css/blizzard.css

@@ -34,7 +34,7 @@
 body {
 	font-family: 'Burbank Small Medium', sans-serif;
 	background-color: rgb(var(--background)) !important;
-	background-image: url('/assets/event/images/pattern.png') !important;
+	background-image: url('/assets/event/images/pattern.webp') !important;
 	overflow-x: hidden;
 }
 
@@ -136,15 +136,15 @@ color: #7a7a7a !important;
 }
 
 body {
-    cursor: url(/assets/event/images/cursor.png?v=1), auto !important;
+    cursor: url(/assets/event/images/cursor.webp?v=1), auto !important;
 }
 
 textarea, input[type=textbox], input[type=search] {
-    cursor: url(/assets/event/images/text.png?v=1) 9 14, auto !important;
+    cursor: url(/assets/event/images/text.webp?v=1) 9 14, auto !important;
 }
 
 .btn, input[type=button], button, a {
-    cursor: url(/assets/event/images/pointer.png?v=1), auto !important;
+    cursor: url(/assets/event/images/pointer.webp?v=1), auto !important;
 }
 
 .fa-moon-over-sun:before{content:"\f74a"}
@@ -171,7 +171,7 @@ textarea, input[type=textbox], input[type=search] {
 	left: 0;
 	height: 57px;
 	width: 100%;
-	background: url('/assets/event/images/lights.png?v=1');
+	background: url('/assets/event/images/lights.webp?v=1');
 	animation: lights 1s infinite steps(2);
 	pointer-events: none;
   }
@@ -196,7 +196,7 @@ textarea, input[type=textbox], input[type=search] {
 .btn::after, .snow-cap::after {
 	content: '';
 	pointer-events: none;
-	background: url("/assets/event/images/snowcap.png?v=1") repeat-x;
+	background: url("/assets/event/images/snowcap.webp?v=1") repeat-x;
 	background-size: contain;
 	position: absolute;
 	bottom: -18px;

files/templates/event/awards.html

@@ -2,7 +2,7 @@
 	{% set gingerbread_count = p.award_count("gingerbread", v) * 2 if p.award_count("gingerbread", v) <= 10 else 20 %}
 	{% for i in range(gingerbread_count) %}
 		<div class="fall-snowflake">
-			<img src="/assets/event/images/awards/gingerbread.png?v=1" class="animate-spin object-contain" style="width: 40px; height: 40px;" alt="animate marsey gingerbread icon" />
+			<img src="/assets/event/images/awards/gingerbread.webp?v=1" class="animate-spin object-contain" style="width: 40px; height: 40px;" alt="animate marsey gingerbread icon" />
 		</div>
 	{% endfor %}
 
@@ -72,7 +72,7 @@
 			left: 0;
 			height: 57px;
 			width: 100%;
-			background: url('/assets/event/images/lights.png?v=1');
+			background: url('/assets/event/images/lights.webp?v=1');
 			animation: lights 1s infinite steps(2);
 			pointer-events: none;
 			z-index: 1;