Convert to webp all img

index.html

@@ -17,21 +17,27 @@
 		<meta name="description" content="FOSC, Hackerspace from Cartagena">
 		<meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss"> 
 		<meta name="author" content="FOSC">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    	<link rel="icon" href="img/Logo-invert.png" type="image/gif">
+    
+    <link rel="icon" href="img/Logo-invert.png" type="image/gif">
 		<link rel="stylesheet" type="text/css" href="cs.css">
 		<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
 		<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
 		<title>FOSC - Free Open Source Club</title>
 		<script src="js/main.js"></script>
-  	m<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
 
  <header>   
   <section class="navigation">
       <div class="nav-container">
         <div class="brand">
-          <img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
+          <picture>
+            <source type="image/webp" srcset="img/Logo-invert.webp">
+            <source type="image/jpeg" srcset="img/Logo-invert.png">
+            <img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
+          </picture>
+          
         </div>
         <nav>
           <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>