feat: add thumbhashes to images closes #6

components/Image.tsx

@@ -6,20 +6,34 @@ const Image = (
     class: string;
     src: string;
     alt?: string;
+    thumbnail?: string;
     width?: number | string;
     height?: number | string;
     style?: CSS.HtmlAttributes;
   },
 ) => {
   return (
-    <img
-      alt={props.alt}
-      style={props.style}
-      src={asset(props.src)}
-      width={props.width}
-      height={props.height}
-      class={props.class}
-    />
+    <span
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        zIndex: -1,
+      }}
+      data-thumb={props.thumbnail}
+    >
+      <img
+        data-thumb={props.thumbnail}
+        data-thumb-img
+        loading="lazy"
+        alt={props.alt}
+        style={props.style}
+        src={asset(props.src)}
+        width={props.width}
+        height={props.height}
+        class={props.class}
+      />
+    </span>
   );
 };