From ea9c0b2a947461d0cf70c1c5c588ca70b0c9dcda Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Thu, 15 Jul 2021 10:16:14 +0100 Subject: [PATCH 1/2] docs: clarify env var usage --- docs/image-handling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/image-handling.md b/docs/image-handling.md index d77cbd5fd5..2e9f4bf06a 100644 --- a/docs/image-handling.md +++ b/docs/image-handling.md @@ -2,7 +2,7 @@ The Essential Next.js plugin includes a function to generate images for `next/image`. The images are resized on the fly, so the first request will have a short delay. However because the function uses [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/), any subsequent requests for that image are served from the edge cache and are super-fast. -By default, images are returned in the same format as the source image if they are in JPEG, PNG, WebP or AVIF format. If you are only targeting modern browsers and want to live life on the edge, you can [set the environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `FORCE_WEBP_OUTPUT` to `"true"`, and it will return all images in WebP format. This will often lead to significant improvements in file size. However you should not use this if you need to support older browsers, as `next/image` does not support picture tag source fallback and images will appear broken. Check [browser support](https://caniuse.com/webp) to see if you are happy to do this. +By default, images are returned in the same format as the source image if they are in JPEG, PNG, WebP or AVIF format. If you are only targeting modern browsers and want to live life on the edge, you can [set the environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `FORCE_WEBP_OUTPUT` to `"true"`, and it will return all images in WebP format. This must be set in the UI or via the `netlify env:set` command: env vars set in `netlify.toml` are not available to functions. Setting this will often lead to significant improvements in file size. However you should not use this if you need to support older browsers, as `next/image` does not support picture tag source fallback and images will appear broken. Check [browser support](https://caniuse.com/webp) to see if you are happy to do this. If you want to use remote images in `next/image`, you will need to add the image domains to an allow list. Add the required domains to the `images.domains` array in `next.config.js`. From ef2f1acf492d6ccd9e8fd4dff24770adbbbcc1f9 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Fri, 24 Sep 2021 09:20:09 +0100 Subject: [PATCH 2/2] Change from review --- docs/image-handling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/image-handling.md b/docs/image-handling.md index 2e9f4bf06a..51369090c3 100644 --- a/docs/image-handling.md +++ b/docs/image-handling.md @@ -2,7 +2,7 @@ The Essential Next.js plugin includes a function to generate images for `next/image`. The images are resized on the fly, so the first request will have a short delay. However because the function uses [On-Demand Builders](https://docs.netlify.com/configure-builds/on-demand-builders/), any subsequent requests for that image are served from the edge cache and are super-fast. -By default, images are returned in the same format as the source image if they are in JPEG, PNG, WebP or AVIF format. If you are only targeting modern browsers and want to live life on the edge, you can [set the environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `FORCE_WEBP_OUTPUT` to `"true"`, and it will return all images in WebP format. This must be set in the UI or via the `netlify env:set` command: env vars set in `netlify.toml` are not available to functions. Setting this will often lead to significant improvements in file size. However you should not use this if you need to support older browsers, as `next/image` does not support picture tag source fallback and images will appear broken. Check [browser support](https://caniuse.com/webp) to see if you are happy to do this. +By default, images are returned in the same format as the source image if they are in JPEG, PNG, WebP or AVIF format. If you are only targeting modern browsers and want to live life on the edge, you can [set the environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `FORCE_WEBP_OUTPUT` to `"true"`, and it will return all images in WebP format. This must be set in the UI or via the `netlify env:set` command. Any env vars set in `netlify.toml` are not available to functions. Setting this will often lead to significant improvements in file size. However you should not use this if you need to support older browsers, as `next/image` does not support picture tag source fallback and images will appear broken. Check [browser support](https://caniuse.com/webp) to see if you are happy to do this. If you want to use remote images in `next/image`, you will need to add the image domains to an allow list. Add the required domains to the `images.domains` array in `next.config.js`.