#21: Optimizar imagenes de fondo

assets/static/css/styles.css

@@ -112,7 +112,7 @@
 }
 
 .speakers-section{
-  background: url(../img/general_resources/clouds-img.png),linear-gradient(180deg, rgba(255,97,191,1) 0%, rgba(255,193,48,1) 100%);
+  background: url(../img/general_resources/clouds-img.webp),linear-gradient(180deg, rgba(255,97,191,1) 0%, rgba(255,193,48,1) 100%);
   /*padding-bottom:50px;*/
 }
 .card-body a {
@@ -278,7 +278,7 @@
 
   .second-section{
     background-color:#1A2C74;
-    background-image: url(../img/general_resources/background-second-section.png);
+    background-image: url(../img/general_resources/background-second-section.webp);
     padding-top: 60px;
     padding-bottom: 60px;
     z-index:1;

templates/page.html

@@ -11,13 +11,13 @@
 <div class="first-section">
 
   <div class="balloon-left  d-none d-xl-block" data-aos="fade-right">
-    <img src="{{ '/static/img/general_resources/left-globe.png'|url }}" alt="Welcome to a new dimension">
+    <img loading="lazy" src="{{ '/static/img/general_resources/left-globe.png'|url }}" alt="Welcome to a new dimension">
   </div>
   <div class="balloon-right d-none d-xl-block" data-aos="fade-left">
-    <img src="{{ '/static/img/general_resources/right-globe.png'|url }}" alt="Welcome to a new dimension">
+    <img loading="lazy" src="{{ '/static/img/general_resources/right-globe.png'|url }}" alt="Welcome to a new dimension">
   </div>
   <div class="block-right d-none d-xl-block" data-aos="fade-left">
-    <img src="{{ '/static/img/general_resources/right-globe2.png'|url }}" alt="Welcome to a new dimension"
+    <img loading="lazy" src="{{ '/static/img/general_resources/right-globe2.png'|url }}" alt="Welcome to a new dimension"
       style="margin-top:500px;">
   </div>
   <div class="container" data-aos="zoom-in">
@@ -26,7 +26,7 @@
       <div class="row section-container justify-content-center">
         <div class="principal-logo col-sm-8" style="margin-top:100px">
           <h1>
-            <img src="{{ '/static/img/general_resources/logo_main.png'|url }}" alt="Pycon Colombia 2023">
+            <img loading="lazy" src="{{ '/static/img/general_resources/logo_main.webp'|url }}" alt="Pycon Colombia 2023">
             <span>Bogotá, Colombia</span>
             <span>June 9, 10 and 11</span>
           </h1>
@@ -51,18 +51,18 @@ <h1>
               <div class="carousel-inner img-fluid">
                 <div class="carousel-item active">
                   <a href="https://www.eventbrite.com/e/pycon-colombia-2023-tickets-574821024157" target="blank">
-                    <img src="{{ '/static/img/carousel/carousel-section-1.png'|url }}" class="img-fluid d-block w-auto" alt="..." style="margin:auto">
+                    <img loading="lazy" src="{{ '/static/img/carousel/carousel-section-1.png'|url }}" class="img-fluid d-block w-auto" alt="..." style="margin:auto">
                   </a>
                 </div>
                 <!--
                 <div class="carousel-item">
                   <a href="https://docs.google.com/forms/d/e/1FAIpQLSfnC1Hnvep1FVUQXVK_kWFOfoHkQHiz2MMXYgS7rn7g49aKBw/viewform" target="blank">
-                    <img src="{{ '/static/img/carousel/carousel-section-2.png'|url }}" class="img-fluid d-block w-auto" alt="..." style="margin:auto">
+                    <img loading="lazy" src="{{ '/static/img/carousel/carousel-section-2.png'|url }}" class="img-fluid d-block w-auto" alt="..." style="margin:auto">
                   </a>
                 </div>
 
                 <div class="carousel-item">
-                  <img src="{{ '/static/img/carousel/carousel-section-1.png'|url }}" class="img-fluid d-block w-auto" alt="..." style="margin:auto">
+                  <img loading="lazy" src="{{ '/static/img/carousel/carousel-section-1.png'|url }}" class="img-fluid d-block w-auto" alt="..." style="margin:auto">
                 </div>
                 -->
               </div>
@@ -85,7 +85,7 @@ <h1>
                 <p>
                   <span>7th edition of the Python Colombian</span>
                   <span>conference</span>
-                  <img id="arrow" src="{{ '/static/img/general_resources/arrow.webp'|url }}">
+                  <img loading="lazy" id="arrow" src="{{ '/static/img/general_resources/arrow.webp'|url }}">
                 </p>
               </div>
             </div>
@@ -116,7 +116,7 @@ <h1>
 
           <div class="keynote-img col-xl-4 col-sm-12 d-flex justify-content-center align-items-center">
             <a href="" data-bs-toggle="modal" data-bs-target="#fabioModal">
-              <img src="{{ '/static/img/keynotes/1x/flabio-keynote.webp'|url }}">
+              <img loading="lazy" src="{{ '/static/img/keynotes/1x/flabio-keynote.webp'|url }}">
             </a>
           </div>
 
@@ -142,7 +142,7 @@ <h2>
         <div class="row keynote-container col-sm-10 col-xs-10" style="margin-top:50px;">
           <div class="keynote-img col-xl-4 col-sm-12 d-flex justify-content-center align-items-center order-xl-last">
             <a href="" data-bs-toggle="modal" data-bs-target="#catherinModal">
-              <img src="{{ '/static/img/keynotes/1x/catherine-keynote.webp'|url }}">
+              <img loading="lazy" src="{{ '/static/img/keynotes/1x/catherine-keynote.webp'|url }}">
             </a>
           </div>
           <div class="keynote-description col-xl-8 col-sm-12 d-flex justify-content-center">
@@ -165,7 +165,7 @@ <h2 class="text-end">
         <div class="row keynote-container col-sm-10 col-xs-10" style="margin-top:50px;">
           <div class="keynote-img col-xl-4 col-sm-12 d-flex justify-content-center align-items-center">
             <a href="" data-bs-toggle="modal" data-bs-target="#lukaszModal">
-              <img src="{{ '/static/img/keynotes/1x/lukassz-langa-keynote.webp'|url }}">
+              <img loading="lazy" src="{{ '/static/img/keynotes/1x/lukassz-langa-keynote.webp'|url }}">
             </a>
           </div>
 
@@ -189,7 +189,7 @@ <h2>
         <div class="row keynote-container col-sm-10 col-xs-10" style="margin-top:50px;">
           <div class="keynote-img col-xl-4 col-sm-12 d-flex justify-content-center align-items-center order-xl-last">
             <a href="" data-bs-toggle="modal" data-bs-target="#gabrielaModal">
-              <img src="{{ '/static/img/keynotes/1x/gabriela-keynote.webp'|url }}">
+              <img loading="lazy" src="{{ '/static/img/keynotes/1x/gabriela-keynote.webp'|url }}">
             </a>
           </div>
           <div class="keynote-description col-xl-8 col-sm-12 d-flex justify-content-center">
@@ -212,7 +212,7 @@ <h2 class="text-end">
         <div class="row keynote-container col-sm-10 col-xs-10" style="margin-top:50px;">
           <div class="keynote-img col-xl-4 col-sm-12 d-flex justify-content-center align-items-center">
             <a href="" data-bs-toggle="modal" data-bs-target="#debModal">
-              <img src="{{ '/static/img/keynotes/1x/deb-keynote.webp'|url }}">
+              <img loading="lazy" src="{{ '/static/img/keynotes/1x/deb-keynote.webp'|url }}">
             </a>
           </div>
 
@@ -237,7 +237,7 @@ <h2>
         <div class="row keynote-container col-sm-10 col-xs-10" style="margin-top:50px;">
           <div class="keynote-img col-xl-4 col-sm-12 d-flex justify-content-center align-items-center order-xl-last">
             <a href="" data-bs-toggle="modal" data-bs-target="#travisModal">
-              <img src="{{ '/static/img/keynotes/1x/travis-keynote.webp'|url }}">
+              <img loading="lazy" src="{{ '/static/img/keynotes/1x/travis-keynote.webp'|url }}">
             </a>
           </div>
           <div class="keynote-description col-xl-8 col-sm-12 d-flex justify-content-center">
@@ -276,7 +276,7 @@ <h2 class="text-end">
 <div class="sponsor-section">
 
   <div>
-    <img src="{{ '/static/img/general_resources/sponsors-mask.png'|url }}" class="img-fluid" alt="...">
+    <img loading="lazy" src="{{ '/static/img/general_resources/sponsors-mask.webp'|url }}" class="img-fluid" alt="...">
   </div>
   <div class="container">
     <div class="row" style="margin-top:50px">
@@ -289,99 +289,99 @@ <h2 class="text-end">
     <div class="row d-flex justify-content-center">
       <div class="col-4 d-flex justify-content-center">
         <a href="https://www.javeriana.edu.co/inicio" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/javeriana-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/javeriana-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly" style="margin-top:0px">
       <div class="col-4">
         <a href="" data-bs-toggle="modal" data-bs-target="#elasticModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/elastic-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/elastic-sponsor.png'|url }}">
         </a>
       </div>
       <div class="col-4">
         <a data-bs-toggle="modal" data-bs-target="#endavaModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/endava-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/endava-sponsor.png'|url }}">
         </a>
       </div>
       <div class="col-4">
         <a href="https://bold.co" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/bold-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/bold-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly" style="margin-top:0px">
       <div class="col-4">
         <a data-bs-toggle="modal" data-bs-target="#softserveModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/softserve-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/softserve-sponsor.png'|url }}">
         </a>
       </div>
       <div class="col-4">
         <a data-bs-toggle="modal" data-bs-target="#monokuModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/monoku-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/monoku-sponsor.png'|url }}">
         </a>
       </div>
       <div class="col-4">
         <a data-bs-toggle="modal" data-bs-target="#heinsohnModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/heinsohn-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/heinsohn-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly"style="margin-top:0px">
       <div class="col-4">
         <a href="https://www.python.org/psf-landing/" target="_blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/psf-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/psf-sponsor.png'|url }}">
         </a>
       </div>
       <div class="col-4">
         <a data-bs-toggle="modal" data-bs-target="#teamModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/team-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/team-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly"style="margin-top:0px">
       <div class="col-4">
         <a data-bs-toggle="modal" data-bs-target="#monadicalModal">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/monadical-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/monadical-sponsor.png'|url }}">
         </a>
       </div>
 
       <div class="col-4">
         <a href="" data-bs-toggle="modal" data-bs-target="#addiModal" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/addi-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/addi-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly" style="margin-top:0px">
       <div class="col-4">
         <a href="" data-bs-toggle="modal" data-bs-target="#nearsureModal" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/nearsure-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/nearsure-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly" style="margin-top:0px">
       <div class="col-4">
         <a href="https://www.tecu.co/" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/tecu-sponsor.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/tecu-sponsor.png'|url }}">
         </a>
       </div>
     </div>
 
     <div class="d-flex flex-row justify-content-evenly" style="margin-top:0px">
       <div class="col-4">
         <a href="https://vanhack.com/" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/vanhack-partner.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/vanhack-partner.png'|url }}">
         </a>
       </div>
       <div class="col-4">
         <a href="https://www.enter.co/" target="blank">
-          <img class="img-fluid" src="{{ '/static/img/Sponsors/enter-partner.png'|url }}">
+          <img loading="lazy" class="img-fluid" src="{{ '/static/img/Sponsors/enter-partner.png'|url }}">
         </a>
       </div>
     </div>
@@ -391,6 +391,6 @@ <h2 class="text-end">
 <!--END SPONSORS SECTION-->
 <!--FORMS SECTION-->
 <div class="form-section">
-  <img class="img-fluid" src="{{ '/static/img/general_resources/background-third-section.png'|url }}" alt="..." style="margin-top:px">
+  <img loading="lazy" class="img-fluid" src="{{ '/static/img/general_resources/background-third-section.png'|url }}" alt="..." style="margin-top:px">
 </div>
 {% endblock %}

templates/scripts.html

@@ -1,9 +1,7 @@
 <script>
     $(document).ready(function () {
-        console.log("loaded")
         const iframe = $(".iframe-docs");
         const height = $(window).height();
-        console.log(height);
 
         iframe.height((height * 75) / 100);
     });

templates/shared/footer.html

@@ -7,7 +7,7 @@
             <div class="row">
                 <div class="col-xs-12 col-sm-6 col-md-4">
                     <div class="footer-logo-container">
-                        <img src="{{ '/static/img/general_resources/logo_main.png'|url }}" alt="Pycon Colombia 2023"
+                        <img src="{{ '/static/img/general_resources/logo_main.webp'|url }}" alt="Pycon Colombia 2023"
                             class="logo-footer">
                     </div>
                     <div class="row">