docs: document where to put static images

docs/pages/en/1.getting-started/2.providers.md

@@ -17,6 +17,20 @@ The default provider for Nuxt Image is [ipx](/providers/ipx) or [static](/gettin
 
 [Learn more about Nuxt deployment targets](https://nuxtjs.org/docs/2.x/features/deployment-targets)
 
+### Local Images
+
+Images should be stored in the `static/` directory of your project.
+
+For example, when using `<nuxt-img src="/nuxt-icon.png" />`, it should be placed in `static/` folder under the path `static/nuxt-icon.png`.
+
+Image stored in the `assets/` directory are **not** proccessed with Nuxt Image because those images are managed by webpack.
+
+For more information, you can learn more about the [static directory here](https://nuxtjs.org/docs/2.x/directory-structure/static).
+
+### Remote Images
+
+Using default provider, you can also optimize external URLs. For this, you need to add them to [`domains`](/api/options#domains) option.
+
 ### Environment Detection
 
 You can set default provider using `NUXT_IMAGE_PROVIDER` environment variable. Providers below, are automatically detected:

docs/pages/en/2.components/1.nuxt-img.md

@@ -25,15 +25,9 @@ Will result in:
 <img src="/nuxt-icon.png" />
 ```
 
-### File Location
-
-Images should be stored in the `static` directory.
-
-For example, the `nuxt-icon.png` referred to in the previous example should be placed in `static` folder under the path `/static/nuxt-icon.png`.
-
-In other words, image stored in the `assets` directory are not compatible with Nuxt Image because those images are managed by webpack.
-
-For more information, you can learn more about the [static directory here](https://nuxtjs.org/docs/2.x/directory-structure/static).
+:::alert{type="info"}
+With [default provider](/getting-started/providers#default-provider), you should put `/nuxt-icon.png` inside `static/` directory for making above example working.
+:::
 
 ## Props
 

docs/pages/en/4.providers/ipx.md

@@ -5,7 +5,7 @@ navigation:
   title: IPX
 ---
 
-Nuxt Image comes with a preconfigured instance of [ipx](https://github.com/unjs/ipx). An open source, self-hosted image optimizer based on [sharp](https://github.com/lovell/sharp).
+Nuxt Image comes with a [preconfigured instance](/getting-started/providers#default-provider) of [ipx](https://github.com/unjs/ipx). An open source, self-hosted image optimizer based on [sharp](https://github.com/lovell/sharp).
 
 ## Using `ipx` in production
 
@@ -15,14 +15,13 @@ Use IPX for self-hosting as an alternative to use service providers for producti
   You don't need to follow this section if using `target: 'static'`.
 :::
 
-
 ### Runtime Module
 
 Just add `@nuxt/image` to `modules` (instead of `buildModules`) in `nuxt.config`. This will ensure that the `/_ipx` endpoint continues to work in production.
 
-### Alternative: serverMiddleware
+### Advanced: Custom ServerMiddleware
 
-If you have an advanced use case, you may instead create a custom server middleware that handles the `/_ipx` endpoint:
+If you have an usecase of a custom IPX instance serving other that `static/` dir, you may instead create a server Middleware that handles the `/_ipx` endpoint:
 
 1. Add `ipx` as a dependency:
 
@@ -49,7 +48,12 @@ If you have an advanced use case, you may instead create a custom server middlew
 import { createIPX, createIPXMiddleware } from 'ipx'
 
 // https://github.com/unjs/ipx
-const ipx = createIPX(/* options */)
+const ipx = createIPX({
+  dir: '', // absolute path to images dir
+  domains: [], // allowed external domains (should match domains option in nuxt.config)
+  alias: {}, // base alias
+  sharp: {}, // sharp options
+})
 
 export default createIPXMiddleware(ipx)
 ```