Added Support for WebP image Format for smaller file sizes and faster load...

Added Support for WebP image Format for smaller file sizes and faster load speeds with fallback to .png for unsupported browers like Safari and Internet Explorer

index.html

@@ -10,7 +10,8 @@ features:
     h1_content: Music. Control on Phone.
     h2_content: >
       Listenening to your favourite album on your Desktop? Now control it from your phone.
-    image1: assets/img/music.png
+    image2: assets/img/music.png
+    image1: assets/img/music_webp.webp
     linkref: https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver
 
   - class_name: feature ring
@@ -20,7 +21,8 @@ features:
     h2_content: >
       Want to get Phone notifications on your PC while working on that latest project? Got a message from mom and want to reply without picking up your phone. Do it all with Connect.
     linkref: https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver
-    image1: assets/img/Notifications.png
+    image1: assets/img/Notifications_webp.webp
+    image2: assets/img/Notifications.png
 
   - class_name: feature command dark
     h1_class: command
@@ -30,7 +32,8 @@ features:
       Want to shut down? Lock your keyboard or mice? Run pre-defined commands from
       your connected device or make and run your own commands. Your wish.
     linkref: https://userbase.kde.org/KDEConnect#Run_Commands
-    image1: assets/img/command.png
+    image1: assets/img/command_webp.webp
+    image2: assets/img/command.png
 
   - class_name: feature browse dark
     h1_class: browse
@@ -41,7 +44,8 @@ features:
       party or share the link to a cool shopping offer? Now do it easily. Browse
       your phone files too.
     linkref: https://userbase.kde.org/KDEConnect#Share_and_Receive
-    image1: assets/img/files.png
+    image1: assets/img/files_webp.webp
+    image2: assets/img/files.png
   - class_name: feature ring
     h1_class: ring
     h2_class: ring-desc
@@ -51,13 +55,15 @@ features:
       where it is. Also check your phones battery level from your Desktop. How
       cool is that?
     linkref: https://userbase.kde.org/KDEConnect#Ring_My_Phone
-    image1: assets/img/ring.png
+    image1: assets/img/ring_webp.webp
+    image2: assets/img/ring.png
   - class_name: feature more dark
     h1_class: more
     h2_class: more-desc
     h1_content: Presentation Remote. Virtual Trackpad. More.
     linkref: https://userbase.kde.org/KDEConnect#Virtual_Input
-    image1: assets/img/more.png
+    image1: assets/img/more_webp.webp
+    image2: assets/img/more.png
     h2_content: >
       Forgot your presentation remote but have an important presentation to do?
       Want to use your phone as a trackpad? We all have been in these situations
@@ -68,21 +74,24 @@ Boxes:
     h4_content: >
       Control Content on Browser. Tabs.Youtube.More.
     linkref: https://community.kde.org/Plasma/Browser_Integration
-    image1: assets/img/plasmaint.png
+    image1: assets/img/plasmaint_webp.webp
+    image2: assets/img/plasmaint.png
 
   - class_name: product-in plugin dark
     h3_content: Plugins
     h4_content: >
       Make your Own Plugins and Build. Power to You.
     linkref: https://userbase.kde.org/KDEConnect#Available_Plugins
-    image1: assets/img/plugin.png
+    image1: assets/img/plugin_webp.webp
+    image2: assets/img/plugin.png
 
   - class_name: product-in OpenVpn
     h3_content: OpenVPN Support
     h4_content: >
       Left home and want to run a command? Or want to give a presenassets/img/wiki.png
     linkref: https://community.kde.org/KDEConnect#Running_KDE_Connect_over_OpenVPN
-    image1: assets/img/ovpn.png
+    image1: assets/img/ovpn_webp.webp
+    image2: assets/img/ovpn.png
 
   - class_name: product-in wiki
     h3_content: Wiki. Everything you Need.
@@ -90,7 +99,8 @@ Boxes:
       Documentation for Everything.
 
     linkref: https://community.kde.org/KDEConnect
-    image1: assets/img/wiki.png
+    image1: assets/img/wiki_webp.webp
+    image2: assets/img/wiki.png
 ---
 
 <!-- To Expand this page add the new feature on top with required attributes. Also add the required css for each class. -->
@@ -114,7 +124,12 @@ Boxes:
       </button>
     </a>
   </div>
-  <img class="img-fluid" src="assets/img/hero_main.png" />
+
+  <picture>
+    <source srcset="assets/img/hero_main_webp.webp" type="image/webp" />
+    <source srcset="assets/img/hero_main.png" type="image/png" />
+    <img class="img-fluid" src="assets/img/hero_main.png" alt="Alt Text!" />
+  </picture>
 </section>
 
 <!-- Loop that loops through features.-->
@@ -131,7 +146,11 @@ Boxes:
       </button>
     </a>
   </div>
-  <img class="img-fluid" src="{{feature.image1}}" />
+  <picture>
+    <source srcset="{{feature.image1}}" type="image/webp" />
+    <source srcset="{{feature.image2}}" type="image/png" />
+    <img class="img-fluid" src="{{feature.image2}}" alt="Alt Text!" />
+  </picture>
 </section>
 {% endfor %}
 
@@ -153,7 +172,16 @@ Boxes:
       </button>
     </a>
   </div>
-  <img class="img-fluid" src="assets/img/madebyyou.png" />
+
+  <picture>
+    <source srcset="assets/img/madebyyou.png" type="image/webp" />
+    <source srcset="assets/img/madebyyou_webp.webp" type="image/png" />
+    <img
+      class="img-fluid"
+      src="assets/img/madebyyou_webp.webp"
+      alt="Alt Text!"
+    />
+  </picture>
 </section>
 
 <div class="row no-gutters grid">
@@ -170,7 +198,12 @@ Boxes:
           </button>
         </a>
       </div>
-      <img class="img-fluid prodim" src="{{box.image1}}" />
+
+      <picture>
+        <source srcset="{{box.image1}}" type="image/webp" />
+        <source srcset="{{box.image2}}" type="image/png" />
+        <img class="img-fluid prodim" src="{{box.image2}}" alt="Alt Text!" />
+      </picture>
     </div>
   </div>
   {% endfor %}