Enhance trivia image loading with responsive srcset and lazy loading

Author: Claudio-Emmolo

resources/views/trivia.blade.php

@@ -10,17 +10,25 @@ class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[100%] md:-transl
 
     <div class="relative">
         <div class="absolute inset-0 z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
-        <img src="{{ $trivia->cover_image }}" alt="{{ $trivia->topic }}"
-            class="w-full aspect-[9/12] md:aspect-[16/9] object-cover group-hover:scale-105 group-hover:translate-y-1 transition-all duration-500">
+        <img src="{{ $trivia->cover_image }}?width=991"
+             srcset="
+                 {{ $trivia->cover_image }}?width=607 640w,
+                 {{ $trivia->cover_image }}?width=735 768w,
+                 {{ $trivia->cover_image }}?width=991 1024w,
+                 {{ $trivia->cover_image }}?width=834 1025w,
+             "
+             loading="lazy"
+             alt="{{ $trivia->topic }}"
+             class="w-full aspect-[9/12] md:aspect-[16/9] object-cover group-hover:scale-105 group-hover:translate-y-1 transition-all duration-500">
 
         {{-- Timer Badge --}}
         <div class="absolute z-20 space-y-1 top-4 right-4 text-end">
             <div
                 class="inline-flex items-center gap-2 px-3 py-1 text-sm font-semibold text-white bg-red-500 rounded-full">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
+                     stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                 </svg>
                 {{ $trivia->answers_count }} domande
             </div>
@@ -29,9 +37,9 @@ class="inline-flex items-center gap-2 px-3 py-1 text-sm font-semibold text-white
                 <div
                     class="flex items-center gap-1 px-3 py-1 text-sm font-semibold text-white rounded-full bg-white/20 backdrop-blur-sm">
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
+                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                     </svg>
                     {{ $trivia->timer }}s per domanda
                 </div>
@@ -61,9 +69,9 @@ class="text-3xl md:text-4xl font-bold after:!hidden !m-0 leading-tight transitio
                     <span>Metti alla prova le tue conoscenze!</span>
                     <span class="flex items-center gap-1 pl-4 border-l border-white/10">
                         <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
+                             stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                         </svg>
                         {{ $trivia->played_count ?? 0 }} partecipazioni
                     </span>