From 08f7f4e7ac200daa32eaa4518709bccbe036fff5 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sat, 13 Aug 2022 02:28:26 -0400
Subject: [PATCH] Create Picture componente to overwrite img tag classes

---
 src/components/astro/utils/Picture.astro | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/astro/utils/Picture.astro

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>