Simplified the lazy loading of post images.

_includes/lozad.html

@@ -1,7 +1,7 @@
-<!-- image lazy load -->
+<!-- image lazy load: https://github.com/ApoorvSaxena/lozad.js -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
-
 <script type="text/javascript">
-  const observer = lozad();
+  const el = document.querySelectorAll('#post-wrapper img');
+  const observer = lozad(el);
   observer.observe();
 </script>

_layouts/post.html

@@ -64,19 +64,13 @@ layout: default
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+
         {% if page.image %}
           <img src="{{ page.image }}">
         {% endif %}
-        <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-        {% if content contains '<img src=' %}
-          {% capture loading %}
-           {{ "/assets/img/commons/loading.png" | relative_url }}
-          {% endcapture %}
-          {% assign replacement = '<img class="lozad" src=' | append: loading | append: ' data-src=' %}
-          {{ content | replace: '<img src=', replacement }}
-        {% else %}
+
         {{ content }}
-        {% endif %}
+
       </div>
 
       <div class="post-tail-wrapper text-muted">

assets/css/post.scss

@@ -31,18 +31,18 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   @include semi-bold;
 }
 
-.post img {
+.post {
+  img {
+    max-width: 100%;
     margin-top: .5rem;
     margin-bottom: 1.5rem;
-  max-width: 100%;
-  height: auto;
-  // filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
     position: relative;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
   }
+}
 
 .post-tail-wrapper {
   margin-top: 4rem;