Switch image assets to AVIF format for improved performance

Replaced various PNG and JPEG assets with AVIF versions in the `index.html` file and added the corresponding new AVIF files. This change reduces file sizes, resulting in faster loading times and better optimization for the web. Updated all relevant image paths to reflect the new format.
Andres6936 · Jan 4, 2025 · 6f40865 · 6f40865
1 parent bbbf158
commit 6f40865
Show file tree

Hide file tree

Showing 6 changed files with 5 additions and 5 deletions.
diff --git a/img/Background.avif b/img/Background.avif
diff --git a/img/DE.avif b/img/DE.avif
diff --git a/img/FP.avif b/img/FP.avif
diff --git a/img/Kantons.avif b/img/Kantons.avif
diff --git a/img/SafeInet.avif b/img/SafeInet.avif
diff --git a/index.html b/index.html
@@ -66,11 +66,11 @@
     </style>
 </head>
 <body id="root"
-      class="font:sans flex flex:col justify-content:center align-items:center py:1rem@md bg:#FFF|url('img/Background.jpg')|no-repeat|center|fixed bg:cover color:white">
+      class="font:sans flex flex:col justify-content:center align-items:center py:1rem@md bg:#FFF|url('img/Background.avif')|no-repeat|center|fixed bg:cover color:white">
 <div class="max-w:md@lg max-w:lg@xl flex flex:col justify-content:center align-items:center p:1rem bg:rgba(0,0,0,0.4) r:0.5rem">
     <div class="flex flex:1 w:full flex:row justify-content:space-around align-items:center gap:1rem my:0.5rem">
         <div class="aspect-ratio:1/1 w:7rem w:9rem@md">
-            <img alt="Deutsch" src="img/DE.png" class="w:full">
+            <img alt="Deutsch" src="img/DE.avif" class="w:full">
         </div>
         <div class="aspect-ratio:1/1 w:7rem w:9rem@md">
             <img alt="Department of Justice" src="img/DoJ.png" class="w:full">
@@ -95,7 +95,7 @@ <h3 class="font-size:3.5vw text:right mx:1rem font:light py:1rem pb:3rem@md lh:1
             The analysis of the seized data and the international investigations regarding the operators and users of
             the network will be continued.
         </p>
-        <img alt="Safe Inet" src="img/SafeInet.png" width="300" height="300" class="my:1rem mx:auto">
+        <img alt="Safe Inet" src="img/SafeInet.avif" width="300" height="300" class="my:1rem mx:auto">
     </div>
 
     <footer class="flex flex:1 flex:col w:full mt:1rem bt:1px|solid|white">
@@ -114,10 +114,10 @@ <h3 class="font-size:3.5vw text:right mx:1rem font:light py:1rem pb:3rem@md lh:1
 
         <div class="flex flex:row justify-content:space-around align-items:center gap:1rem mb:1rem">
             <div class="aspect-ratio:1/1 w:7rem">
-                <img alt="Kantons" src="img/Kantons.png" class="w:full">
+                <img alt="Kantons" src="img/Kantons.avif" class="w:full">
             </div>
             <div class="aspect-ratio:1/1 w:7rem">
-                <img alt="FP" src="img/FP.png" class="w:full">
+                <img alt="FP" src="img/FP.avif" class="w:full">
             </div>
             <div class="aspect-ratio:1/1 w:7rem">
                 <img alt="SDLCC" src="img/SDLCC.png" class="w:full">