Add responsive and lazy image loading

src/lib/components/Photo.svelte

@@ -11,6 +11,12 @@
    */
   export let alt = undefined;
 
+  /**
+   * Whether the image is the first one in the viewport.
+   * @type {boolean}
+   */
+  export let firstViewport = false;
+
   /**
    * The click handler for the image.
    * @param {MouseEvent} event
@@ -21,10 +27,12 @@
   }
 </script>
 
-<a href="{src}" on:click={clickHandler}>
-  <figure class="photo">
-    <img src="{src}" alt="{alt}" />
-  </figure>
+<a href={src} on:click={clickHandler}>
+  <picture>
+    <source media="(min-width: 850px)" srcset="{src}/t/l" />
+    <source media="(min-width: 450px)" srcset="{src}/t/m" />
+    <img src="{src}/t" {alt} loading={firstViewport ? 'eager' : 'lazy'} />
+  </picture>
 </a>
 
 <style>