Use native lazy loading and a two-column pictures grid

_plugins/lazy_images.rb

@@ -0,0 +1,11 @@
+require 'nokogiri'
+
+module LazyImages
+  def lazy_images(content)
+    fragment = Nokogiri::HTML::DocumentFragment.parse(content)
+    fragment.css('img').each { |image| image['loading'] = 'lazy' }
+    fragment.to_html
+  end
+end
+
+Liquid::Template.register_filter(LazyImages)

_sass/_layout.scss

@@ -219,6 +219,35 @@ hr {
   display: block;
 }
 
+.art .post-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: $spacing-unit;
+  align-items: start;
+
+  > li {
+    min-width: 0;
+    margin-top: 0;
+  }
+
+  .post-content > p:last-child {
+    margin-bottom: 0;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin: 0;
+    // Reserve space before lazy images load, then use their natural proportions.
+    aspect-ratio: auto 3 / 2;
+  }
+
+  @include media-query($on-palm) {
+    grid-template-columns: 1fr;
+  }
+}
+
 .art .image-details {
   position: absolute;
   top: 10px;

art.html

@@ -33,19 +33,11 @@ layout: default
         {% continue %}
       {% endif %}
       <li class='lang-{% if post.lang %}{{ post.lang }}{% else %}en{% endif %}'>
-        <h2>
-          <!--<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>-->
-
-          <!--<p class="post-meta">
-            <span>{{ post.date | date: "%b %-d, %Y" }}</span>
-            {% if post.meta %} • <span>{{ post.meta }}</span>{% endif %}
-          </p>-->
-
         <article class='post-content'>
           {% if post.anchor %}
           <span id='{{ post.title }}'></span>
           {% endif %}
-          {{ post.content | markdownify }}
+          {{ post.content | markdownify | lazy_images }}
         </article>
       </li>
     {% endfor %}