diff --git a/.changeset/chilly-experts-add.md b/.changeset/chilly-experts-add.md
new file mode 100644
index 000000000000..46c228c7d176
--- /dev/null
+++ b/.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.
diff --git a/packages/integrations/image/components/Image.astro b/packages/integrations/image/components/Image.astro
index 578db702d401..254d24777dc4 100644
--- a/packages/integrations/image/components/Image.astro
+++ b/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>
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index 7cd71d6004a5..c9633c3ded8c 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/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>