diff --git a/src/components/astro/utils/Picture.astro b/src/components/astro/utils/Picture.astro
new file mode 100644
index 0000000..63c8c92
--- /dev/null
+++ b/src/components/astro/utils/Picture.astro
@@ -0,0 +1,29 @@
+---
+import { getPicture } from "@astrojs/image";
+
+const {
+	src,
+	alt,
+	sizes,
+	widths,
+	aspectRatio,
+	formats = ['avif', 'webp'],
+	loading = 'lazy',
+	decoding = 'async',
+    class :className = "",
+	...attrs
+} = Astro.props;
+
+const { image, sources } = await getPicture({ src, widths, formats, aspectRatio });
+---
+
+<picture {...attrs}>
+	{sources.map((attrs) => <source {...attrs} {sizes} />)}
+	<img {...image} {loading} {decoding} {alt} class={className} />
+</picture>
+
+<style>
+	img {
+		content-visibility: auto;
+	}
+</style>