optimize image

assets/js/script.js

@@ -13,8 +13,6 @@ document.addEventListener("DOMContentLoaded", () => {
     images: document.querySelectorAll("img"),
   };
 
-  console.log(nodes.images);
-
   // Listeners
   nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
   nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
@@ -23,15 +21,17 @@ document.addEventListener("DOMContentLoaded", () => {
     jsLink.addEventListener("click", () => (location.href = to));
   });
 
-  nodes.images.forEach((image) => {
-    if (image.complete) {
-      show(image);
-    } else {
-      image.addEventListener("load", () => {
+  setTimeout(() => {
+    nodes.images.forEach((image) => {
+      if (image.complete) {
         show(image);
-      });
-    }
-  });
+      } else {
+        image.addEventListener("load", () => {
+          show(image);
+        });
+      }
+    });
+  }, 100);
 
   // Key shortcuts
   window.addEventListener("keyup", (event) => {

site/config/config.php

@@ -5,28 +5,15 @@ return [
   'thumbs' => [
       'quality' => 80,
       'presets' => [
+          'grid' => 400,
           'default' => [
               'width' => 1024, 'format' => 'webp'
           ],
-          'full' => 2048, 'format' => 'webp'
+          'full' => 2048, 
+          'format' => 'webp'
       ],
       'srcsets' => [
-          'default' => [
-              '200w'  => ['width' => 400],
-              '400w'  => ['width' => 800],
-              '800w'  => ['width' => 1600],
-              '1024w' => ['width' => 2048],
-              '1440w' => ['width' => 2880],
-              '2048w' => ['width' => 4096]
-          ],
-          'webp' => [
-              '200w'  => ['width' => 400, 'format' => 'webp'],
-              '400w'  => ['width' => 800, 'format' => 'webp'],
-              '800w'  => ['width' => 1600, 'format' => 'webp'],
-              '1024w' => ['width' => 2048, 'format' => 'webp'],
-              '1440w' => ['width' => 2880, 'format' => 'webp'],
-              '2048w' => ['width' => 4096, 'format' => 'webp']
-          ]
+          'default' => [200, 400, 600, 800, 1024, 1440, 2048],
       ],
   ],
   'panel' => [

site/snippets/event-card.php

@@ -3,20 +3,21 @@
   <div class="image-wrapper">
   <?php if ($event->gallery()->toFiles()->count() > 1): ?>
     <?php snippet('picture', [
-      'file' => $event->gallery()->toFiles()->first(), 
-      'class' => 'image-cover'
+      'file' => $event->gallery()->toFiles()->first()->thumb('grid'), 
+      'class' => 'image-cover',
+      'size' => (100 / (12 / $span) - 10)
     ]) ?>
   <?php endif ?>
   <?php 
     $file = $event->gallery()->toFiles()->count() > 1 ? $event->gallery()->toFiles()->nth(1) : $event->gallery()->toFiles()->first();
-    snippet('picture', ["file" => $file]);
+    snippet('picture', ["file" => $file, 'size' => (100 / (12 / $span) - 10)]);
   ?>
   </div>
   <div class="event-card__infos">
     <div>
       <h5><?= $event->title() ?></h5>
       <?php if ($event->isMapadoEvent() == 'true'): ?>
-        <?php snippet('ticket', ['link' => option('ticketingUrl') . 'event/' . $event->mapadoSlug()]) ?>
+        <?php snippet('ticket', ['link' => option('ticketingUrl') . 'event/' . $event->mapadoSlug(), 'size' => (100 / (12 / $span) - 10)]) ?>
       <?php endif ?>
     </div>
     <div>

site/snippets/picture.php

@@ -1,6 +1,6 @@
 <?php if (isset($file)): ?>
     <?php
-        $sizes = '(min-width: 1200px) 25vw, (min-width: 900px) 33vw, (min-width: 600px) 50vw, 100vw';
+        $sizes = isset($size) ? '(min-width: 800px) ' . $size . 'vw, 100vw' : '(min-width: 800px) 50vw, 100vw';
         $alt = $file->alt();
         $crop = $crop ?? false;
 
@@ -10,6 +10,7 @@
         $width = $crop === 'banner' ? $file->crop(1600, 800)->width() : $file->resize(1800)->width();
         $height = $crop === 'banner' ? $file->crop(1600, 800)->height() : $file->resize(1800)->height();
         $class = isset($class) ? 'class="' . $class . '"': '';
+        $lazy = $lazy ?? true;
     ?>
 
 
@@ -25,7 +26,7 @@
             width="<?= $width ?>"
             height="<?= $height ?>"
             alt="<?= $alt?>"
-            loading="lazy"
+            <?= e($lazy, 'loading="lazy"') ?>
         >
         <div class="loader"></div>
     </picture>

site/templates/home.php

@@ -9,10 +9,10 @@
   <div class="hero__image" style="--color: var(--color-season)">
     <?php if ($site->heroLinkUrl()->isNotEmpty() == 'true'): ?>
       <a href="<?= $site->heroLinkUrl()->toUrl() ?>" title="en savoir plus">
-        <?php snippet('picture', ['file' => $site->heroImage()->toFile()]) ?>
+        <?php snippet('picture', ['file' => $site->heroImage()->toFile(), 'lazy' => false, 'size' => 50]) ?>
       </a>
     <?php else: ?>
-      <?php snippet('picture', ['file' => $site->heroImage()->toFile()]) ?>
+      <?php snippet('picture', ['file' => $site->heroImage()->toFile()->thumb(), 'lazy' => false, 'size' => 50]) ?>
     <?php endif ?>
   </div>
 </section>