removes default content-visibility styles from image components (#5180)

.changeset/chilly-experts-add.md

@@ -0,0 +1,9 @@
+---
+'@astrojs/image': minor
+---
+
+Removes the `content-visibility: auto` styling added by the `<Picture />` and `<Image />` components.
+
+**Why:** The [content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) style is rarely needed for an `<img>` and can actually break certain layouts.
+
+**Migration:** Do images in your layout actually depend on `content-visibility`?  No problem!  You can add these styles where needed in your own component styles.

packages/integrations/image/components/Image.astro

@@ -34,9 +34,3 @@ const attrs = await getImage(props);
 ---
 
 <img {...attrs} {loading} {decoding} />
-
-<style>
-	img {
-		content-visibility: auto;
-	}
-</style>

packages/integrations/image/components/Picture.astro

@@ -69,9 +69,3 @@ delete image.height;
 	{sources.map((attrs) => <source {...attrs} {sizes} />)}
 	<img {...image} {loading} {decoding} {alt} {...attrs} />
 </picture>
-
-<style>
-	img {
-		content-visibility: auto;
-	}
-</style>