Skip to content

Latest commit

 

History

History
7 lines (4 loc) · 1.41 KB

image-handling.md

File metadata and controls

7 lines (4 loc) · 1.41 KB

Image Handling

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, 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 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 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. Setting them in images.domains in next.config.js is not supported: instead you should set the environment variable NEXT_IMAGE_ALLOWED_DOMAINS to a comma-separated list of domains, e.g. NEXT_IMAGE_ALLOWED_DOMAINS="placekitten.com,unsplash.com".