Images further compressed

assets/js/script.js

-(function() {
-  var following_bar = document.querySelector(".following.bar");
-  var update_top_bar = function() {
+document.body.classList.remove("noscript");
+
+const following_bar = document.querySelector(".following.bar");
+const update_top_bar = function () {
   following_bar.classList.toggle("qd", window.scrollY !== 0);
 };
 
 document.addEventListener("scroll", update_top_bar);
 update_top_bar();
-})();
+
\ No newline at end of file
+function preloadImage(element) {
+  element.src = element.dataset["src"];
+  element.srcset = element.dataset["srcset"];
+}
+
+function onIntersection(entries) {
+  // Loop through the entries
+  entries.forEach(entry => {
+    // Are we in viewport?
+    if (entry.intersectionRatio > 0) {
+      // Stop watching and load the image
+      observer.unobserve(entry.target);
+      preloadImage(entry.target);
+    }
+  });
+}
+
+// Get all of the images that are marked up to lazy load
+const images = document.querySelectorAll('img[data-src]');
+const config = {
+  // If the image gets within 50px in the Y axis, start the download.
+  rootMargin: '50px 0px',
+  threshold: 0.01
+};
+
+// The observer for the images on the page
+let observer = new IntersectionObserver(onIntersection, config);
+images.forEach(image => {
+  observer.observe(image);
+});
\ No newline at end of file

index.pug

@@ -39,10 +39,10 @@ html(lang="en")
     link(rel="stylesheet" href="assets/css/semantic.css")
     link(rel="stylesheet" href="assets/css/fonts.css")
     link(rel="stylesheet" href="assets/css/style.css")
-  body#page-index
+  body#page-index.noscript
     .pusher
       .full.height
-        .following.bar.qd
+        .following.bar
           .ui.container
             .ui.large.secondary.menu.inverted
               a.view-ui.item.active
@@ -78,8 +78,11 @@ html(lang="en")
             .row
               .wide.column
                 #image_container
-                  img#phone(src="assets/images/phone@400.png" sizes="(max-height: 800px) calc(50vw + 100px), (max-width: 800px) calc(50vw + 100px), 33vw" srcset="assets/images/phone@220.png 220w, assets/images/phone@300.png 300w, assets/images/phone@400.png 400w, assets/images/phone@520.png 520w, assets/images/phone@640.png 640w, assets/images/phone@800.png 800w, assets/images/phone@1000.png 1000w, assets/images/phone@1220.png 1220w")
-                  img#tablet(src="assets/images/tablet@1090.png" sizes="33vw" srcset="assets/images/tablet@545.png 545w, assets/images/tablet@640.png 640w, assets/images/tablet@720.png 720w, assets/images/tablet@800.png 800w, assets/images/tablet@880.png 880w, assets/images/tablet@960.png 960w, assets/images/tablet@1090.png 1090w, assets/images/tablet@1635.png 1635w, assets/images/tablet@2180.png 2180w")
+                  noscript
+                    img.phone(src="assets/images/phone@400.png" sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" srcset="assets/images/phone@220.png 220w, assets/images/phone@300.png 300w, assets/images/phone@400.png 400w, assets/images/phone@520.png 520w, assets/images/phone@640.png 640w, assets/images/phone@800.png 800w, assets/images/phone@1000.png 1000w, assets/images/phone@1220.png 1220w")
+                    img.tablet(src="assets/images/tablet@1090.png" sizes="calc(33vw + 1px)" srcset="assets/images/tablet@545.png 545w, assets/images/tablet@640.png 640w, assets/images/tablet@720.png 720w, assets/images/tablet@800.png 800w, assets/images/tablet@880.png 880w, assets/images/tablet@960.png 960w, assets/images/tablet@1090.png 1090w, assets/images/tablet@1635.png 1635w, assets/images/tablet@2180.png 2180w")
+                  img.phone(data-src="assets/images/phone@400.png" sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" data-srcset="assets/images/phone@220.png 220w, assets/images/phone@300.png 300w, assets/images/phone@400.png 400w, assets/images/phone@520.png 520w, assets/images/phone@640.png 640w, assets/images/phone@800.png 800w, assets/images/phone@1000.png 1000w, assets/images/phone@1220.png 1220w")
+                  img.tablet(data-src="assets/images/tablet@1090.png" sizes="calc(33vw + 1px)" data-srcset="assets/images/tablet@545.png 545w, assets/images/tablet@640.png 640w, assets/images/tablet@720.png 720w, assets/images/tablet@800.png 800w, assets/images/tablet@880.png 880w, assets/images/tablet@960.png 960w, assets/images/tablet@1090.png 1090w, assets/images/tablet@1635.png 1635w, assets/images/tablet@2180.png 2180w")
         .ui.vertical.stripe.intro.segment
           .ui.stackable.very.relaxed.center.aligned.grid.container
 
@@ -101,7 +104,9 @@ html(lang="en")
                 .ui.one.doubling.cards
                   .card
                     .image
-                      img(src="assets/images/desktop@590.png" sizes="(max-width: 767px) 100vw, (max-width: 991px) 363px, (max-width: 1199px) 474px, 590px" srcset="assets/images/desktop@363.png 363w, assets/images/desktop@474.png 474w, assets/images/desktop@590.png 590w, assets/images/desktop@726.png 726w, assets/images/desktop@948.png 948w, assets/images/desktop@1180.png 1180w")
+                      noscript
+                        img(src="assets/images/desktop@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" srcset="assets/images/desktop@363.png 363w, assets/images/desktop@474.png 474w, assets/images/desktop@590.png 590w, assets/images/desktop@726.png 726w, assets/images/desktop@948.png 948w, assets/images/desktop@1180.png 1180w")
+                      img(data-src="assets/images/desktop@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" data-srcset="assets/images/desktop@363.png 363w, assets/images/desktop@474.png 474w, assets/images/desktop@590.png 590w, assets/images/desktop@726.png 726w, assets/images/desktop@948.png 948w, assets/images/desktop@1180.png 1180w")
             .ui.divider
             .computer.reversed.row
               .seven.wide.column.left.aligned
@@ -115,7 +120,9 @@ html(lang="en")
                 .ui.one.doubling.cards
                   .card
                     .image
-                      img(src="assets/images/notifications@590.png" sizes="(max-width: 767px) 100vw, (max-width: 991px) 362px, (max-width: 1199px) 474px, 590px" srcset="assets/images/notifications@363.png 363w, assets/images/notifications@474.png 474w, assets/images/notifications@590.png 590w")
+                      noscript
+                        img(src="assets/images/notifications@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" srcset="assets/images/notifications@363.png 363w, assets/images/notifications@474.png 474w, assets/images/notifications@590.png 590w")
+                      img(data-src="assets/images/notifications@590.png" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" data-srcset="assets/images/notifications@363.png 363w, assets/images/notifications@474.png 474w, assets/images/notifications@590.png 590w")
             .ui.divider
             .row
               .seven.wide.column.left.aligned
@@ -133,32 +140,42 @@ html(lang="en")
                 .ui.one.doubling.cards
                   .card
                     .image
-                      img(src="assets/images/themes@1180.png 1180w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 362px, (max-width: 1199px) 474px, 590px" srcset="assets/images/themes@363.png 363w, assets/images/themes@474.png 474w, assets/images/themes@590.png 590w, assets/images/themes@726.png 726w, assets/images/themes@948.png 948w, assets/images/themes@1180.png 1180w")
+                      noscript
+                        img(src="assets/images/themes@1180.png 1180w" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" srcset="assets/images/themes@363.png 363w, assets/images/themes@474.png 474w, assets/images/themes@590.png 590w, assets/images/themes@726.png 726w, assets/images/themes@948.png 948w, assets/images/themes@1180.png 1180w")
+                      img(data-src="assets/images/themes@1180.png 1180w" sizes="(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px" data-srcset="assets/images/themes@363.png 363w, assets/images/themes@474.png 474w, assets/images/themes@590.png 590w, assets/images/themes@726.png 726w, assets/images/themes@948.png 948w, assets/images/themes@1180.png 1180w")
             .ui.divider
             .row.centered
               .wide.column
                 .ui.four.doubling.cards
                   .card
                     .image
-                      img(src="assets/images/quassel_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em), (max-width: 991px) 335px, (max-width: 1199px) 220px, 266px" srcset="assets/images/quassel_dark@220.png 220w, assets/images/quassel_dark@266.png 266w, assets/images/quassel_dark@335.png 335w, assets/images/quassel_dark@352.png 352w, assets/images/quassel_dark@532.png 532w")
+                      noscript
+                        img(src="assets/images/quassel_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="assets/images/quassel_dark@220.png 220w, assets/images/quassel_dark@266.png 266w, assets/images/quassel_dark@335.png 335w, assets/images/quassel_dark@352.png 352w, assets/images/quassel_dark@532.png 532w")
+                      img(src="assets/images/quassel_dark@16.png" data-src="assets/images/quassel_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="assets/images/quassel_dark@220.png 220w, assets/images/quassel_dark@266.png 266w, assets/images/quassel_dark@335.png 335w, assets/images/quassel_dark@352.png 352w, assets/images/quassel_dark@532.png 532w")
                     .content
                       .extra.
                         Quassel Dark
                   .card
                     .image
-                      img(src="assets/images/quassel_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em), (max-width: 991px) 335px, (max-width: 1199px) 220px, 266px" srcset="assets/images/quassel_light@220.png 220w, assets/images/quassel_light@266.png 266w, assets/images/quassel_light@335.png 335w, assets/images/quassel_light@352.png 352w, assets/images/quassel_light@532.png 532w")
+                      noscript
+                        img(src="assets/images/quassel_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="assets/images/quassel_light@220.png 220w, assets/images/quassel_light@266.png 266w, assets/images/quassel_light@335.png 335w, assets/images/quassel_light@352.png 352w, assets/images/quassel_light@532.png 532w")
+                      img(src="assets/images/quassel_light@16.png" data-src="assets/images/quassel_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="assets/images/quassel_light@220.png 220w, assets/images/quassel_light@266.png 266w, assets/images/quassel_light@335.png 335w, assets/images/quassel_light@352.png 352w, assets/images/quassel_light@532.png 532w")
                     .content
                       .extra.
                         Quassel Light
                   .card
                     .image
-                      img(src="assets/images/solarized_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em), (max-width: 991px) 335px, (max-width: 1199px) 220px, 266px" srcset="assets/images/solarized_dark@220.png 220w, assets/images/solarized_dark@266.png 266w, assets/images/solarized_dark@335.png 335w, assets/images/solarized_dark@352.png 352w, assets/images/solarized_dark@532.png 532w")
+                      noscript
+                        img(src="assets/images/solarized_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="assets/images/solarized_dark@220.png 220w, assets/images/solarized_dark@266.png 266w, assets/images/solarized_dark@335.png 335w, assets/images/solarized_dark@352.png 352w, assets/images/solarized_dark@532.png 532w")
+                      img(src="assets/images/solarized_dark@16.png" data-src="assets/images/solarized_dark@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="assets/images/solarized_dark@220.png 220w, assets/images/solarized_dark@266.png 266w, assets/images/solarized_dark@335.png 335w, assets/images/solarized_dark@352.png 352w, assets/images/solarized_dark@532.png 532w")
                     .content
                       .extra.
                         Solarized Dark
                   .card
                     .image
-                      img(src="assets/images/solarized_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em), (max-width: 991px) 335px, (max-width: 1199px) 220px, 266px" srcset="assets/images/solarized_light@220.png 220w, assets/images/solarized_light@266.png 266w, assets/images/solarized_light@335.png 335w, assets/images/solarized_light@352.png 352w, assets/images/solarized_light@532.png 532w")
+                      noscript
+                        img(src="assets/images/solarized_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" srcset="assets/images/solarized_light@220.png 220w, assets/images/solarized_light@266.png 266w, assets/images/solarized_light@335.png 335w, assets/images/solarized_light@352.png 352w, assets/images/solarized_light@532.png 532w")
+                      img(src="assets/images/solarized_light@16.png" data-src="assets/images/solarized_light@266.png" sizes="(max-width: 767px) calc(50vw - 2em + 1px), (max-width: 991px) 336px, (max-width: 1199px) 221px, 267px" data-srcset="assets/images/solarized_light@220.png 220w, assets/images/solarized_light@266.png 266w, assets/images/solarized_light@335.png 335w, assets/images/solarized_light@352.png 352w, assets/images/solarized_light@532.png 532w")
                     .content
                       .extra.
                         Solarized Light