diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index c81aded6bd12..be66624adbb7 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -263,15 +263,17 @@ For example, if you know your styling will cause an image to be full-width on mo ```js import Image from 'next/image' -;
- -
+const Example = () => ( +
+ +
+) ``` 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' -;
- -
+const Example = () => ( +
+ +
+) ``` 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.