Lazy loading of images

slices/main/templates/shared/_photo_post.html.slim

@@ -2,8 +2,8 @@
   - post.photos.each_with_index do |photo, idx|
     div class="rounded max-w-xs"
       a href="#{post.permalink}#photo-#{idx}"
-        img class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}"
+        img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}"
 - else
   div class="rounded max-w-xs"
     a href="#{post.permalink}"
-      img class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}"
+      img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}"

slices/main/templates/shared/_post.html.slim

@@ -6,7 +6,7 @@ div class="mb-8 h-entry"
     == post.excerpt
     div class="grid gap-4 grid-flow-row grid-cols-#{post.photos.count} grid-rows-1"
       -post.photos.each do |photo|
-        img class="w-44 h-44 object-cover rounded" src=photo["value"]
+        img loading="lazy" class="w-44 h-44 object-cover rounded" src=photo["value"]
   / == render "shared/tags", tags: post.tags
 
   p class="text-sm text-blue-400 dark:text-indigo-400"

slices/main/templates/shared/_status.html.slim

@@ -4,7 +4,7 @@ div class="mb-8 h-entry border border-gray-200 m-2 p-4 bg-gray-50 hover:bg-gray-
       == " 💬 #{post.raw_content}"
       div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1"
         -post.photos.each do |photo|
-          img class="w-32 h-32 object-cover rounded" src=photo["value"]
+          img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"]
     == render "shared/tags", tags: post.tags
 
   div class="mb-8"