From 518c74f802bf328ff5807efa7575a86b4e9a5cf0 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 9 Aug 2022 13:33:47 -0700
Subject: [PATCH 1/2] Wrap sizes code snippets in component

---
 docs/api-reference/next/future/image.md | 21 +++++++++++----------
 docs/api-reference/next/image.md        | 20 +++++++++++---------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
index c81aded6bd12..dc181edbe6f5 100644
--- a/docs/api-reference/next/future/image.md
+++ b/docs/api-reference/next/future/image.md
@@ -262,16 +262,17 @@ Second, the `sizes` property configures how `next/future/image` automatically ge
 For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and a 3-column layout on desktop displays, you should include a sizes property such as the following:
 
 ```js
-import Image from 'next/image'
-;<div className="grid-element">
-  <Image
-    src="/example.png"
-    layout="fill"
-    sizes="(min-width: 75em) 33vw,
-            (min-width: 48em) 50vw,
-            100vw"
-  />
-</div>
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(min-width: 75em) 33vw,
+              (min-width: 48em) 50vw,
+              100vw"
+    />
+  </div>
+)
 ```
 
 This example `sizes` could have a dramatic effect on performance metrics. Without the `33vw` sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without `sizes` the user would download an image that's 9 times larger than necessary.
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 8899d63634d4..b0b8a0ff3746 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -143,15 +143,17 @@ For example, if you know your styling will cause an image to be full-width on mo
 
 ```js
 import Image from 'next/image'
-;<div className="grid-element">
-  <Image
-    src="/example.png"
-    layout="fill"
-    sizes="(min-width: 75em) 33vw,
-            (min-width: 48em) 50vw,
-            100vw"
-  />
-</div>
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(min-width: 75em) 33vw,
+              (min-width: 48em) 50vw,
+              100vw"
+    />
+  </div>
+)
 ```
 
 This example `sizes` could have a dramatic effect on performance metrics. Without the `33vw` sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without `sizes` the user would download an image that's 9 times larger than necessary.

From 1de1c1121dcb3a8baf70961ca544d6ca57c06478 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 9 Aug 2022 13:35:34 -0700
Subject: [PATCH 2/2] Don't remove docs import statement

---
 docs/api-reference/next/future/image.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
index dc181edbe6f5..be66624adbb7 100644
--- a/docs/api-reference/next/future/image.md
+++ b/docs/api-reference/next/future/image.md
@@ -262,6 +262,7 @@ Second, the `sizes` property configures how `next/future/image` automatically ge
 For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and a 3-column layout on desktop displays, you should include a sizes property such as the following:
 
 ```js
+import Image from 'next/image'
 const Example = () => (
   <div className="grid-element">
     <Image