diff --git a/docs/pages/en/1.getting-started/2.providers.md b/docs/pages/en/1.getting-started/2.providers.md
index ae2e7eaf7..de1f065e6 100644
--- a/docs/pages/en/1.getting-started/2.providers.md
+++ b/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 ``, 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:
diff --git a/docs/pages/en/2.components/1.nuxt-img.md b/docs/pages/en/2.components/1.nuxt-img.md
index 68f9f9124..ef3846fe1 100644
--- a/docs/pages/en/2.components/1.nuxt-img.md
+++ b/docs/pages/en/2.components/1.nuxt-img.md
@@ -25,15 +25,9 @@ Will result in:
```
-### 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
diff --git a/docs/pages/en/4.providers/ipx.md b/docs/pages/en/4.providers/ipx.md
index 67914f509..11e54d1dd 100644
--- a/docs/pages/en/4.providers/ipx.md
+++ b/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)
```