diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
new file mode 100644
index 0000000..906dfe0
--- /dev/null
+++ b/src/lib/components/Image.svelte
@@ -0,0 +1,73 @@
+<noscript>
+  <img
+    {loading}
+    {...others}
+  />
+</noscript>
+
+{#if dynamic}
+  <img
+    {loading}
+    {...others}
+    bind:this={node}
+    class="dynamic"
+    class:visible
+  />
+{/if}
+
+<script>
+  let {
+    loading = 'lazy',
+    ...others
+  } = $props()
+
+  let node = $state()
+  let visible = $state(false)
+  let dynamic = $state(false)
+
+  $effect(() => {
+    dynamic = true
+  })
+
+  $effect(() => {
+    if (!node) {
+      return
+    }
+    
+    if (node.complete) {
+      visible = true
+    } else {
+      node.addEventListener('load', () => visible = true, { once: true })
+    }
+  })
+</script>
+
+<style lang="scss">
+  /* 
+    Ideally, <noscript> could use display: contents so it wouldn't create a block container.
+    However, due to a Chrome bug, we must set it to display: block to ensure proper layout.
+    This ensures that fallback images inside <noscript> scale correctly to the container width.
+    https://issues.chromium.org/issues/41179501
+  */
+  noscript,
+  img {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+  
+  img {
+    object-fit: cover;
+    object-position: top center;
+
+    &.dynamic {
+      transition: opacity 0.4s ease;
+      opacity: 0;
+
+      &.visible {
+        opacity: 1;
+      }
+    }
+  }
+</style>
\ No newline at end of file