Lazy loading of images

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

@@ -12,7 +12,7 @@ div class="flex-initial w-full"
   div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100"
     div class="grid gap-4 grid-flow-row grid-cols-4 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"]
 
   p class="text-sm text-blue-400"
     a href="/post/#{post.slug}"

slices/main/templates/podcasts/index.html.slim

@@ -21,7 +21,7 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:
       - podcasts.each do |podcast|
         tr
           td
-            img class="w-14 m-0 p-0 rounded" src="#{Hanami.app.settings.micropub_site_url}/media/podcast_art/#{podcast.overcast_id}.jpg"
+            img loading="lazy" class="w-14 m-0 p-0 rounded" src="#{Hanami.app.settings.micropub_site_url}/media/podcast_art/#{podcast.overcast_id}.jpg"
           td class="p-0 align-middle"
             a class="block" href="#{podcast.url}"
               = podcast.name

slices/main/templates/posts/show.html.slim

@@ -11,7 +11,7 @@ article class="h-entry"
             svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
               path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
         div class="p-2 text-center w-full"
-          img class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc"
+          img loading="lazy"  class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc"
           p x-text="imgModalDesc" class="text-center text-white"
   div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
     h1 class="p-name mb-2"
@@ -31,7 +31,7 @@ article class="h-entry"
       - if post.photos?
         - post.photos.each_with_index do |photo, idx|
           figure id="photo-#{idx}"
-            img class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
+            img loading="lazy" class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
             figcaption
               = photo["alt"]
       - if post.videos?
@@ -44,14 +44,14 @@ article class="h-entry"
 
 
       - if post.location
-        img class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
+        img loading="lazy" class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
     -if post.webmentions && post.webmentions.count > 0
       div class="mt-12"
         h3 #{post.webmentions.count} Comment#{post.webmentions.count != 1 ? "s" : ""}
         - post.webmentions.each do |mention|
           div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle"
             div class="flex h-8"
-              img class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
+              img loading="lazy" class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
               a class="block text-orange-700 dark:text-violet-300 no-underline hover:underline" href=mention.author_url
                 = mention.author_name
             div class="prose dark:prose-invert dark:text-indigo-250 prose-a:text-orange-700 dark:prose-a:text-violet-300 prose-a:no-underline hover:prose-a:underline"
@@ -77,7 +77,7 @@ article class="h-entry"
             - past_movies.map do |movie|
               a href=movie.url
                 figure class="w-24"
-                  img class="rounded hover:opacity-80" src=movie.poster
+                  img loading="lazy" class="rounded hover:opacity-80" src=movie.poster
                   / figcaption= movie.title
           hr
       - if text_posts.count > 0 || photo_posts.count > 0

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"

slices/main/templates/site/home.html.slim

@@ -12,7 +12,7 @@ div class="mb-8 max-w-screen-md mx-auto border-t border-solid border-gray-200 da
       a class="u-url block my-auto hover:underline decoration-wavy" href=latest_status.permalink
         span class="e-content status-body"
           - if latest_status.key_image
-            img class="float-start max-w-32 rounded mr-2" src=latest_status.key_image
+            img loading="lazy" class="float-start max-w-32 rounded mr-2" src=latest_status.key_image
           p
             == latest_status.raw_content
       - latest_status.syndicated_to.each do |loc|

slices/main/templates/timemachine/show.html.slim

@@ -26,7 +26,7 @@ div class="max-w-screen-md mx-auto px-4 m-4 h-max"
                   - if post.photos.count > 0
                     - post.photos.each do |photo|
                       a href="/post/#{post.slug}"
-                        img class="mb-0 rounded" src="#{photo["value"]}"
+                        img loading="lazy" class="mb-0 rounded" src="#{photo["value"]}"
                         = post.name
       - else
         p No posts