next image export optimizer
v1.18.0
Используйте Next.js Advanced <Image/> компонент со статической функцией экспорта. Оптимизирует все статические изображения на дополнительном шаге после следующего статического экспорта.
Для изображений с использованием строки пути: (например, src = "/profile.png")
Поместите изображения в папку в общедоступную папку, такие как публика/изображения
Для изображений с использованием статического импорта: (например, src = {profileimage})
Вы можете разместить изображения в любом месте вашего проекта. Изображения будут оптимизированы и скопированы в папку экспорта.
Для удаленных изображений: (например, src = "https://example.com/image.jpg")
Пожалуйста, обратитесь к разделу на удаленных изображениях.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
Добавьте следующее в свой next.config.js . Вы также можете использовать next.config.ts для проектов TypeScript.:
// next.config.js
module . exports = {
output : "export" ,
images : {
loader : "custom" ,
imageSizes : [ 16 , 32 , 48 , 64 , 96 , 128 , 256 , 384 ] ,
deviceSizes : [ 640 , 750 , 828 , 1080 , 1200 , 1920 , 2048 , 3840 ] ,
} ,
transpilePackages : [ "next-image-export-optimizer" ] ,
env : {
nextImageExportOptimizer_imageFolderPath : "public/images" ,
nextImageExportOptimizer_exportFolderPath : "out" ,
nextImageExportOptimizer_quality : "75" ,
nextImageExportOptimizer_storePicturesInWEBP : "true" ,
nextImageExportOptimizer_exportFolderName : "nextImageExportOptimizer" ,
nextImageExportOptimizer_generateAndUseBlurImages : "true" ,
nextImageExportOptimizer_remoteImageCacheTTL : "0" ,
} ,
} ; Обновить команду сборки в package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}Замените компонент <Image /> на компонент <exportedImage /> :
Пример:
// Old
import Image from "next/image" ;
< Image
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ;
// Replace with either of the following:
// With static import (Recommended)
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" /> ;
// With dynamic import
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ; Для удаленных изображений вы должны указать SRC как строку, начиная с HTTP или HTTPS в компоненте ExportedImage.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; Для того, чтобы оптимизация изображения во время сборки для правильной работы, вы должны указать все удаленные URL -адреса изображения в файле с именем remoteoptimizizedimages.js в корневом каталоге вашего проекта (где также хранится next.config.js ). Файл должен экспортировать массив строк, содержащих URL -адреса удаленных изображений. Возврат обещания такого массива также поддерживается.
Пример:
// remoteOptimizedImages.js
module . exports = [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] ; // Or with a promise
module . exports = new Promise ( ( resolve ) =>
resolve ( [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] )
) ;
// Or with an async API call
module . exports = fetch ( "https://example.com/api/images" ) . catch ( ( error ) => {
console . error ( error ) ;
return [ ] ; // return an empty array in case of error
} ) ;Во время сборки изображения будут либо загружены, либо читаются с кеша. URL -адреса изображения будут заменены на оптимизированные URL -адреса изображения в компоненте экспортированного изображения.
Вы можете указать время для жизни кэша за секунды, установив переменную среды nextImageExportOptimizer_remoteImageCacheTTL в вашем файле next.config.js . Значение по умолчанию составляет 0 секунд (так как изображение могло измениться).
Установить на:
Если вы хотите скрыть URL -адреса удаленного изображения от пользователя, вы можете использовать опору RideSRC компонента exportedImage. Это заменит атрибут SRC тега изображения значением POVIDESRC PROP.
Остерегайтесь, что компонент изображения не может вернуться к исходному URL -адресу изображения, если оптимизированные изображения еще не генерируются при использовании POVEDRIDERC PROP. Это приведет к сломанной ссылке изображения.
Вы можете настроить имя файла для удаленных оптимизированных изображений, добавив следующее к вашему next.config.js :
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Если ваш проект Next.js не находится в корневом каталоге, где вы запускаете команды, например, когда вы используете монорепо, вы можете указать местоположение next.config.js в качестве аргумента для сценария:
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "Укажите выходной путь папки либо через переменную среды:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }Или передавая аргумент в сценарий:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " Если вы хотите развернуть свое приложение в подпапку вашего домена, вы можете установить BasePath в файле next.config.js :
module . exports = {
basePath : "/subfolder" ,
} ;Компонент ExportedImage имеет опору базовой части, которую вы можете использовать для передачи базового пространства в компонент.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; Если вы не хотите автоматического генерации крошечных, размытых изображений заполнителей, установите переменную Expelice Environment nextImageExportOptimizer_generateAndUseBlurImages для false и установите опору placeholder из компонента <exportedImage /> на empty .
Если вы хотите переименовать имя папки Export, установите переменную среды nextImageExportOptimizer_exportFolderPath , на желаемое имя папки. По умолчанию - nextImageExportOptimizer .
По умолчанию изображения хранятся в формате WebP.
Если вы не хотите использовать формат WebP, установите nextImageExportOptimizer_storePicturesInWEBP переменную среды на false .
Компонент <exportedImage /> - это обертка вокруг компонента <Image /> of next.js. Он использует функцию пользовательской загрузки для генерации SRCSET для различных разрешений исходного изображения. Затем браузер может загрузить правильный размер на основе текущего размера просмотра.
Операция преобразования изображения оптимизирована, поскольку использует хэши, чтобы определить, было ли изображение уже оптимизировано или нет. Таким образом, изображения оптимизированы только один раз, а не каждый раз, когда команда сборки запускается.
Компонент <exportedImage /> возвращается к исходному изображению, если оптимизированные изображения еще не сгенерированы в режиме разработки. В экспортированном приложении Static React отзывчивые изображения доступны как SRCSET и динамически загружаются браузером.
Статический метод импорта рекомендуется, поскольку он сообщает клиенту о исходном размере изображения. Когда запрашивается ширина, больше, чем исходная ширина изображения, следующий самый большой размер изображения в массиве Devicesize (указанный в next.config.js ) будет использоваться для генерации атрибута SRCSET. Когда вы указываете изображения как строку пути, эта библиотека создаст дубликаты исходного изображения для каждого размера изображения в массиве Devicesize, который больше, чем исходный размер изображения.
Вы можете вывести исходные, нептимизированные изображения, используя unoptimized опору. Пример:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; Вы по -прежнему можете использовать компонент устаревшего изображения next/legacy/image :
import ExportedImage from "next-image-export-optimizer/legacy/ExportedImage" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" layout = "fixed" /> ;Анимированные изображения: вы можете использовать .gif и анимированные. Whebp -изображения. Next-Image-Export-Optimizer автоматически оптимизирует анимированные изображения и генерирует SRCSET для различных разрешений.
Если вы установите переменную nextimageexportoptimizer_storepicturesinwebp в true, анимированные изображения будут преобразованы в формат .webp, который может значительно уменьшить размер файла. Обратите внимание, что анимированные изображения PNG не поддерживаются этим пакетом.
Вы можете увидеть живой пример использования этой библиотеки по адресу reactapp.dev/next-image-export-optimizer
Предупреждающая версия 1.0.0 - это нарушающее изменение. Он следует за изменениями, введенными в следующих 13.0.0, которые заменяют
next/imageкомпонент наnext/future/image. Если вы используете следующие 12 или ниже, используйте версию 0.17.1 .
