diff --git a/src/lib/components/Picture.svelte b/src/lib/components/Picture.svelte
new file mode 100644
index 0000000..7e90995
--- /dev/null
+++ b/src/lib/components/Picture.svelte
@@ -0,0 +1,33 @@
+{#if src}
+  <picture>
+    {#if src?.sources}
+      {#each Object.entries(src.sources) as [ format, srcset ]}
+        <source {srcset} type={`image/${format}`}/>
+      {/each}
+    {/if}
+    
+    <Image
+      src={src?.img?.src || src}
+      width={src?.img?.w}
+      height={src?.img?.h}
+      {...others}
+    />
+  </picture>
+{/if}
+
+<script>
+  import { Image } from './Image.svelte'
+  
+  let {
+    src,
+    ...others
+  } = $props()
+</script>
+
+<style lang="scss">
+  picture {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/index.js b/src/lib/index.js
index dc083eb..5f23709 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1 +1,2 @@
-export { default as Image } from './components/Image.svelte'
\ No newline at end of file
+export { default as Image } from './components/Image.svelte'
+export { default as Picture } from './components/Picture.svelte'
\ No newline at end of file