FIx image optimization docs (#18254)

Add missing links in the documentation
vercel · Oct 26, 2020 · ce38e4f · ce38e4f
1 parent b90e17e
commit ce38e4f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -1,5 +1,5 @@
 ---
-description: Enable image optimization with the built-in Image component.
+description: Enable Image Optimization with the built-in Image component.
 ---
 
 # next/image
@@ -29,7 +29,12 @@ function Home() {
   return (
     <>
       <h1>My Homepage</h1>
-      <Image src="/me.png" alt="me" width={200} height={200} />
+      <Image
+        src="/me.png"
+        alt="Picture of the author"
+        width={500}
+        height={500}
+      />
       <p>Welcome to my homepage!</p>
     </>
   )
@@ -48,6 +53,6 @@ export default Home
 - `loading` - The loading behavior. When `lazy`, defer loading the image until it reaches a calculated distance from the viewport. When `eager`, load the image immediately. Default `lazy`. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
 - `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
 - `unoptimized` - When true, the source image will be served as-is instead of resizing and changing quality.
-- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with `priority` or above-the-fold images.
+- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with above-the-fold images. Should _not_ be used with `priority`.
 
-Another other properties on the `<Image>` component be passed to the underlying `<img>` element.
+All other properties on the `<Image>` component will be passed to the underlying `<img>` element.
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
@@ -19,7 +19,7 @@ The Automatic Image Optimization allows for resizing, optimizing, and serving im
 
 ## Image Component
 
-To add an image to your application, import the `next/image` component:
+To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:
 
 ```jsx
 import Image from 'next/image'
@@ -31,8 +31,8 @@ function Home() {
       <Image
         src="/me.png"
         alt="Picture of the author"
-        width={200}
-        height={200}
+        width={500}
+        height={500}
       />
       <p>Welcome to my homepage!</p>
     </>
@@ -44,6 +44,7 @@ export default Home
 
 - `width` and `height` are required to prevent [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google is going to [use in their search ranking](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)
 - `width` and `height` are automatically responsive, unlike the HTML `<img>` element
+- See [`next/image`](/docs/api-reference/next/image.md) for list of available props.
 
 ## Configuration
 
@@ -89,19 +90,19 @@ module.exports = {
 
 The following Image Optimization cloud providers are supported:
 
-- Imgix: `loader: 'imgix'`
-- Cloudinary: `loader: 'cloudinary'`
-- Akamai: `loader: 'akamai'`
-- Vercel: No configuration necessary
+- Imgix - `loader: 'imgix'`
+- Cloudinary - `loader: 'cloudinary'`
+- Akamai - `loader: 'akamai'`
+- Vercel - No configuration necessary
 
 ## Related
 
 For more information on what to do next, we recommend the following sections:
 
 <div class="card">
-  <a href="/docs/basic-features/built-in-css-support.md">
-    <b>CSS Support:</b>
-    <small>Use the built-in CSS support to add custom styles to your app.</small>
+  <a href="/docs/api-reference/next/image.md">
+    <b>next/image</b>
+    <small>See all available properties for the Image component</small>
   </a>
 </div>
 

diff --git a/docs/manifest.json b/docs/manifest.json
@@ -21,6 +21,10 @@
               "title": "Built-in CSS Support",
               "path": "/docs/basic-features/built-in-css-support.md"
             },
+            {
+              "title": "Image Optimization",
+              "path": "/docs/basic-features/image-optimization.md"
+            },
             {
               "title": "Fast Refresh",
               "path": "/docs/basic-features/fast-refresh.md"
@@ -216,6 +220,10 @@
           "title": "next/link",
           "path": "/docs/api-reference/next/link.md"
         },
+        {
+          "title": "next/image",
+          "path": "/docs/api-reference/next/image.md"
+        },
         {
           "title": "next/head",
           "path": "/docs/api-reference/next/head.md"