next optimized images
v2.6.1
Версия 3 идет! Он вводит полную переписывание со многими новыми функциями и ошибками. Если вы хотите помочь в разработке и тестировании предстоящей крупной версии, пожалуйста, ознакомьтесь с канарейским филиалом для инструкций по установке и дополнительной информации о новых функциях. (Проблема RFC)
Автоматически оптимизируют изображения, используемые в проектах next.js ( jpeg , png , svg , webp и gif ).
Размеры изображений часто могут уменьшаться между 20-60%, но это не единственное, что делает next-optimized-images :
webp на лету для еще меньшего размераSVG sprites для лучшей производительности при использовании одних и тех же значков несколько раз (например, в списке) npm install next-optimized-images
Узел> = 8 требуется для версии 2. Если вам нужно поддерживать старые версии узлов, вы все равно можете использовать версию 1 следующих оптимизированных изображений.
Включите плагин в вашем файле конфигурации Next.js:
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withPlugins ( [
[ optimizedImages , {
/* config for next-optimized-images */
} ] ,
// your other plugins here
] ) ;См. Раздел конфигурации для всех доступных параметров.
Приведенный выше пример использует следующие скомплектованные плугины для чистого API при использовании многих плагинов, см. Его Readme для более подробного примера. next-optimized-images также работают со стандартным API плагина:
// next.config.js
const withOptimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withOptimizedImages ( {
/* config for next-optimized-images */
// your config for other plugins or the general next.js here...
} ) ; Начиная с версии 2, вы должны установить необходимые пакеты оптимизации в вашем проекте в дополнение к этому плагину. next-optimized-images затем обнаруживают все поддерживаемые пакеты и используют их.
Таким образом, вам нужно только установить эти пакеты с помощью NPM, после этого не требуется дополнительного шага.
Доступны и поддерживаются следующие пакеты оптимизации:
| Пакет оптимизации | Описание | Ссылка на проект |
|---|---|---|
imagemin-mozjpeg | Оптимизирует изображения JPEG. | Связь |
imagemin-optipng | Оптимизирует изображения PNG. | Связь |
imagemin-pngquant | Альтернатива для оптимизации изображений PNG. | Связь |
imagemin-gifsicle | Оптимизирует изображения GIF. | Связь |
imagemin-svgo | Оптимизирует изображения и значки SVG. | Связь |
svg-sprite-loader | Добавляет возможность использовать SVG спрайты для лучшей производительности. Прочитайте раздел спрайта для получения дополнительной информации. | Связь |
webp-loader | Оптимизирует изображения WebP и может преобразовать изображения JPEG/PNG в WebP на Fly (запрос ресурса WebP). | Связь |
lqip-loader | Генерирует низкокачественные заполнители изображения и может извлечь доминирующие цвета изображения (запрос ресурса LQIP) | Связь |
responsive-loader | Может изменить размер изображений на лету и создать несколько версий для srcset .Важно : вам нужно дополнительно установить либо jimp (реализация узла, медленнее), либо sharp (двоичный, быстрее) | Связь |
image-trace-loader | Генерирует очертания изображения SVG, которые можно использовать в качестве заполнителя при загрузке исходного изображения (запрос ресурса трассировки). | Связь |
Пример: если в вашем проекте есть изображения JPG, PNG и SVG, вам нужно будет запустить
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo
Чтобы установить все дополнительные пакеты, запустите:
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loaderoptimizeImagesInDev .
В зависимости от вашей настройки сборки/развертывания, также возможно установить их в качестве DevDependences. Просто убедитесь, что пакеты доступны при создании своего проекта.
Поскольку версия 2.5, файлы ico также поддержаны, но должны быть включены в конфигурации handleImages .
Теперь вы можете импортировать или требовать свои изображения непосредственно в ваших компонентах React:
import React from 'react' ;
export default ( ) => (
< div >
< img src = { require ( './images/my-image.jpg' ) } />
< img src = { require ( './images/my-small-image.png' ) } />
< img src = { require ( './images/my-icon.svg' ) } />
</ div >
) ;
/**
* Results in:
*
* <div>
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
* <img src="data:image/png;base64,..." />
* <img src="/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg" />
* </div>
*/Пожалуйста, имейте в виду, что изображения только оптимизируются в производстве по умолчанию, чтобы сократить время сборки в вашей среде разработки.
Если вы используете модули CSS, этот пакет также обнаруживает изображения и оптимизирует их в значениях url() в ваших файлах css/sass/mess:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ Если файл находится ниже предела для внедрения изображений, require(...) вернет базовый 64 data-uri ( data:image/jpeg;base64,... ).
В противном случае, next-optimized-images скопируют ваше изображение в статическую папку Next.js, а require(...) возвращает путь к вашему изображению в этом случае ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ).
Вы можете использовать оба варианта непосредственно на изображении в атрибуте src или в вашем файле CSS внутри значения url() .
Если вы используете Flow или Eslint-Plugin-IMPORT и испытываете некоторые проблемы с параматами запросов, ознакомьтесь с решением, опубликованным @Eleith.
Есть некоторые случаи, когда вы не хотите ссылаться на файл или получить базовый 64 Data-URI, но вы действительно хотите включить необработанный файл непосредственно в свой HTML. Особенно для SVG, потому что вы не можете стилизовать их с CSS, если они находятся в атрибуте src на изображении.
Таким образом, есть дополнительные параметры, которые вы можете указать как параметры запроса при импорте изображений.
?include : включите необработанный файл напрямую (полезно для значков SVG)?webp : преобразовать изображение JPEG/PNG в WebP на лету?inline : сила внедрения изображения (Data-uri)?url : примените URL для небольшого изображения (вместо данных-URI)?original : используйте исходное изображение и не оптимизируйте его?lqip : генерировать низкокачественный заполнитель изображений?lqip-colors : извлечь доминирующие цвета изображения?trace : используйте отслеживаемые контуры в качестве загрузки заполнителя?resize : изменить размер изображения?sprite : используйте Svg Sprites Изображение теперь будет непосредственно включено в ваш HTML без данных-URI или ссылки на ваш файл.
Как описано выше, это полезно для SVG, поэтому вы можете стилизовать их с CSS.
import React from 'react' ;
export default ( ) => (
< div dangerouslySetInnerHTML = { { __html : require ( './images/my-icon.svg?include' ) } } />
) ;
/**
* Results in:
*
* <div>
* <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
* <path d="M8 0C3.589 0 0 3.589 0 8s3.589 ..." style="filled-opacity:1" fill-rule="evenodd">
* </path>
* </svg>
* </div>
*/Изображение все равно будет оптимизировано, даже если оно напрямую включено в ваш контент (но по умолчанию только в производстве).
Требуется опциональный пакет оптимизации
webp-loader(npm install webp-loader)
WebP - еще лучше и меньший формат изображений, но он все еще не так распространен, и разработчики часто получают только изображения JPEG/PNG.
Если указан параметр запроса ?webp next-optimized-images автоматически преобразует изображение JPEG/PNG в новый формат WebP.
Для браузеров, которые еще не поддерживают WebP, вы также можете предоставить запасную дорогу, используя тег <picture> :
import React from 'react' ;
export default ( ) => (
< picture >
< source srcSet = { require ( './images/my-image.jpg?webp' ) } type = "image/webp" />
< source srcSet = { require ( './images/my-image.jpg' ) } type = "image/jpeg" />
< img src = { require ( './images/my-image.jpg' ) } />
</ picture >
) ;
/**
* Results in:
* <picture>
* <source srcset="/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp" type="image/webp" />
* <source srcset="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" type="image/jpeg" />
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
* </picture>
*/ Вы можете указать ограничение для внедрения изображений, которые будут включать его в качестве данных, непосредственно в ваш контент вместо того, чтобы ссылаться на файл, если размер файла ниже этого предела.
Обычно вы не хотите указывать слишком высокий предел, но могут быть случаи, когда вы все еще хотите внедрить более крупные изображения.
В этом случае вам не нужно устанавливать глобальный предел на более высокое значение, но вы можете добавить исключение для одного изображения, используя параметры запроса ?inline
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?inline' ) } />
) ;
/**
* Results in:
*
* <img src="data:image/png;base64,..." />
*
* Even if the image size is above the defined limit.
*/ Иналинность будет применяться только к именно этому импорту, поэтому, если вы импортируете изображение во второй раз без опции ?inline , оно будет обычно ссылаться на файл, если оно выше вашего предела.
Если у вас есть изображение меньше вашего определенного предела для внедрения, оно обычно внедряется автоматически. Если вы не хотите, чтобы конкретный маленький файл был вставлен, вы можете использовать парамет ?url -запрос», чтобы всегда получить URL -адрес изображения, независимо от встроенного предела.
Если вы часто используете эту опцию, также может иметь смысл полностью отключить инлин и использовать ?inline параметр для отдельных файлов».
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?url' ) } />
) ;
/**
* Results in:
*
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
*
* Even if the image size is below the defined inlining limit.
*/ Иналинность будет отключена только для этого импорта, поэтому, если вы импортируете изображение во второй раз без опции ?url
Изображение не будет оптимизировано и используется так, как оно есть. Имеет смысл использовать этот параметр запроса, если вы знаете, что изображение уже было оптимизировано (например, во время экспорта), чтобы оно не оптимизировано снова во второй раз.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?original' ) } />
) ; Это также может ?original&inline объединено с ?url или ?inline
Требуется дополнительный пакет
lqip-loader(npm install lqip-loader)
При использовании этого запроса ресурса создается очень маленькое (около 10x7 пикселей) изображение. Затем вы можете отобразить это изображение в качестве заполнителя до тех пор, пока реальное (большое) изображение не будет загружено.
Вы обычно растягиваете это крошечное изображение до того же размера, что и настоящее изображение, как и Medium.com . Чтобы сделать растянутое изображение лучше в Chrome, ознакомьтесь с этим решением и добавьте размытый фильтр в свое изображение.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;
/**
* Replaces the src with a tiny image in base64.
*/ Требуется дополнительный пакет
lqip-loader(npm install lqip-loader)
Этот запрос ресурса возвращает вам массив с шестигранными значениями доминирующих цветов изображения. Вы также можете использовать это в качестве заполнителя до тех пор, пока реальное изображение не будет загружено (например, как фон), как и поиск в Google .
Количество возвращенных цветов может варьироваться и зависит от того, сколько разных цветов имеет ваше изображение.
import React from 'react' ;
export default ( ) => (
< div style = { { backgroundColor : require ( './images/my-image.jpg?lqip-colors' ) [ 0 ] } } > ... </ div >
) ;
/**
* require('./images/my-image.jpg?lqip-colors')
*
* returns for example
*
* ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']
*/ Требуется дополнительный пакет с образованием изображения (
npm install image-trace-loaderimage-trace-loader-Trace-Laceder)
С помощью запроса ресурса ?trace вы можете генерировать очертания изображения SVG, которые можно использовать в качестве заполнителя при загрузке исходного изображения.
import React from 'react' ;
import MyImage from './images/my-image.jpg?trace' ;
export default ( ) => (
< div >
< img src = { MyImage . trace } /> { /* <-- SVG trace */ }
< img src = { MyImage . src } /> { /* <-- Normal image which you want to lazy load */ }
</ div >
) ;
/**
* Results in:
*
* <div>
* <img src="data:image/svg+xml,...">
* <img src="/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg">
* </div>
*/ require('./images/my-image.jpg?trace') Возвращает объект, содержащий трассу ( trace ) в качестве вставленного SVG, и нормальное изображение ( src ), который также оптимизируется.
След будет иметь такую же ширину и высоту, что и ваше обычное изображение.
Параметры для загрузчика могут быть установлены в конфигурации плагина.
Требуется дополнительный пакет
responsive-loader(npm install responsive-loader) иjimp(реализация узла, медленная), либоsharp(Binary, быстрее)
После запроса ?resize Resource вы можете добавить любой другой запрос responsive-loader , который позволяет изменять размер изображений и создавать целые наборы источников.
import React from 'react' ;
const oneSize = require ( './images/my-image.jpg?resize&size=300' ) ;
const multipleSizes = require ( './images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000' ) ;
export default ( ) => (
< div >
{ /* Single image: */ }
< img src = { oneSize . src } />
{ /* Source set with multiple sizes: */ }
< img srcSet = { multipleSizes . srcSet } src = { multipleSizes . src } />
</ div >
) ; my-image.jpg?size=300 используется только параметр size или sizes , параметры ?resize Но это требуется для всех других параметров responsive-loader .
Вы также можете установить глобальные конфигурации в свойство responsive свойство» (в файле next.config.js ) и определить, например, размеры по умолчанию, которые будут генерироваться, когда вы не указаете его для изображения (например, только my-image.jpg?resize ).
Требуется дополнительная пакета оптимизации
imagemin-svgoиsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Если вам нужно стилизовать или оживить свои SVG? Включите, может быть неверным вариантом, потому что это заканчивается во многих элементах DOM, особенно при использовании SVG в списках и т. Д. В этом случае вы можете использовать ?sprite , который использует SVG-Sprite-загрузок для отображения и внедрения SVG Sprite на странице автоматически.
import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< MyIcon />
</ div >
) ; Все реквизиты, передаваемые к импортируемому спрайту, будут применены к элементу <svg> , так что вы можете добавить класс обычно с <MyIcon className="icon-class" /> .
Объект svg-sprite-loader также выявляется, если вы хотите создать свой собственный компонент:
import React from 'react' ;
import icon from './icons/icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< svg viewBox = { icon . viewBox } >
< use xlinkHref = { `# ${ icon . id } ` } />
</ svg >
</ div >
) ; Чтобы также сделать эту работу для рендеринга на стороне сервера, вам необходимо добавить эти изменения в свой файл _document.jsx (прочтите здесь, если у вас еще нет этого файла):
// ./pages/_document.js
import Document , { Head , Main , NextScript } from 'next/document' ;
import sprite from 'svg-sprite-loader/runtime/sprite.build' ;
export default class MyDocument extends Document {
static async getInitialProps ( ctx ) {
const initialProps = await Document . getInitialProps ( ctx ) ;
const spriteContent = sprite . stringify ( ) ;
return {
spriteContent ,
... initialProps ,
} ;
}
render ( ) {
return (
< html >
< Head > { /* your head if needed */ } </ Head >
< body >
< div dangerouslySetInnerHTML = { { __html : this . props . spriteContent } } />
< Main />
< NextScript />
</ body >
</ html >
) ;
}
} Этот плагин использует IMG-Loader под капюшоном, который основан на Mozjpeg, Optipng, Gifsicle и SVGO.
Параметры по умолчанию для этих оптимизаторов должны быть достаточно в большинстве случаев, но вы можете перезаписать каждый доступный вариант, если хотите.
Тип: string[]
По умолчанию: ['jpeg', 'png', 'svg', 'webp', 'gif']
next-optimized-images регистрируют загрузчик WebPack для всех этих типов файлов. Если вы не хотите, чтобы один из них был обработан следующим оптимизированным изображением, потому что у вас, например, есть еще один плагин или правило настраивателя, просто удалите его из массива.
Обратите внимание, что обработанное изображение не означает, что оно также автоматически оптимизируется. Необходимый пакет оптимизации для этого изображения также должен быть установлен. Пожалуйста, прочитайте раздел «Оптимизационные пакеты» для получения дополнительной информации.
Если изображение обрабатывается, но не оптимизируется, это означает, что исходное изображение будет использоваться и копировать для сборки.
Поскольку версия 2.5 также поддерживаются файлы ico , но для обратной совместимости их необходимо включить вручную. Добавив 'ico' в массив handleImages , плагин также будет обрабатывать файлы ico .
Тип: number
По умолчанию: 8192
Меньшие файлы будут встроены с помощью данных URL-Loader. Это число определяет максимальный размер файла (в байтах) для изображений, чтобы получить внедрение. Если изображение больше, оно будет скопировано в статическую папку следующей.
Изображения будут оптимизированы в обоих случаях.
Чтобы полностью отключить инлиновое изображение, установите это значение на -1 . Затем вы всегда получите URL -адрес изображения.
Тип: string
По умолчанию: 'images'
Название папки внутри /static/ в котором изображения будут скопированы во время сборки.
Тип: string
По умолчанию: `/_next/static/${imagesFolder}/`
Публичный путь, который следует использовать для URL -адресов изображения. Это может быть использовано для обслуживания оптимизированного изображения из облачного хранилища, такой как S3.
Из версии 2 в Next-Optimized-Images использует конфигурацию assetPrefx of Next.js по умолчанию, но вы можете перезаписать его с помощью imagesPublicPath специально для изображений.
Тип: string
По умолчанию: `static/${imagesFolder}/`
Выходной путь, который следует использовать для изображений. Это может быть использовано, чтобы иметь пользовательскую выходную папку.
Тип: string
По умолчанию: '[name]-[hash].[ext]'
Имя файла оптимизированных изображений. Убедитесь, что вы сохраняете [hash] часть, чтобы они получали новое имя файла, если содержимое изменится.
Тип: boolean
По умолчанию: false
Когда изображения преобразованы в Webp на лету,. .webp был добавлен к имени файла. Например, test.png стал test.png.webp . Если вы хотите иметь только одно расширение имени файла, например, test.webp , вы можете установить эту опцию на true .
Тип: boolean
По умолчанию: false
Для более быстрого разработки и HMR изображения не будут оптимизированы по умолчанию при запуске в режиме разработки. В производстве изображения всегда будут оптимизированы, независимо от этой настройки.
Требуется дополнительная пакет оптимизации
imagemin-mozjpeg(npm install imagemin-mozjpeg)
Тип: object
По умолчанию: {}
Mozjpeg используется для оптимизации изображений JPEG. Вы можете указать параметры для этого здесь. Параметры по умолчанию mozjpeg используются, если вы опустите эту опцию.
Требуется дополнительная пакет оптимизации
imagemin-optipng(npm install imagemin-optipng)
Тип: object
По умолчанию: {}
OptiPng используется для оптимизации изображений PNG по умолчанию. Вы можете указать параметры для этого здесь. Параметры по умолчанию optipng используются, если вы опустите эту опцию.
Требуется дополнительная пакет оптимизации
imagemin-pngquant(npm install imagemin-pngquant)
Тип: object
По умолчанию: {}
Pngquant - это альтернативный способ оптимизации изображений PNG. Параметры по умолчанию pngquant используются, если вы опустите эту опцию.
Требуется дополнительная пакет оптимизации
imagemin-gifsicle(npm install imagemin-gifsicle)
Тип: object
По умолчанию:
{
interlaced : true ,
optimizationLevel : 3 ,
} Gifsicle используется для оптимизации изображений GIF. Вы можете указать параметры для этого здесь. gifsicle по умолчанию используются, если вы опустите эту опцию.
Требуется дополнительная пакет оптимизации
imagemin-svgo(npm install imagemin-svgo)
Тип: object
По умолчанию: {}
SVGO используется для оптимизации изображений и икон SVG. Вы можете указать параметры для этого здесь. Параметры по умолчанию svgo используются, если вы опустите эту опцию.
Одиночные плагины SVGO могут быть отключены/включены в массив плагинов:
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} Требуется дополнительная пакета оптимизации
imagemin-svgoиsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Тип: object
По умолчанию:
{
runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
} При использовании опции SVG Sprite, svg-sprite-loader используется внутри. Вы можете перезаписать конфигурацию, переданную этой загрузчике здесь.
Требуется опциональный пакет оптимизации
webp-loader(npm install webp-loader)
Тип: object
По умолчанию: {}
Imagemin-WEBP используется для оптимизации изображений WEBP и преобразования других форматов в WebP. Вы можете указать параметры для этого здесь. Параметры по умолчанию imagemin-webp используются, если вы опустите эту опцию.
Требуется дополнительный пакет с образованием изображения (
npm install image-trace-loaderimage-trace-loader-Trace-Laceder)
Тип: object
По умолчанию: {}
При использовании image-trace-loader для запроса ресурса ?trace Параметры по умолчанию используются image-trace-loader если вы опустите эту опцию.
Требуется дополнительный пакет оптимизации
responsive-loader(npm install responsive-loader)
Тип: object
По умолчанию: {}
Конфигурация для responsive-loader может быть определена здесь.
Требуется дополнительный пакет оптимизации
responsive-loader(npm install responsive-loader)
Тип: string
По умолчанию: 'img-loader'
По умолчанию IMG-Loader обрабатывает большинство запросов. 'responsive-loader' , если вы много используете responsive-loader и не хотите добавлять парам запроса ?resize
После этого responsive-loader будет обрабатывать все изображения JPEG и PNG на по умолчанию, даже без дополнительного параметра запроса. Просто имейте в виду, что вы не можете использовать какие-либо из параметров запросов, которые дают next-optimized-images на этих изображениях, потому что запрос просто переадресован и больше не изменен. Все остальные форматы (SVG, WebP и GIF) по-прежнему работают, как и прежде, с img-loader и поэтому имеют все параметры запросов.
Тип: boolean
По умолчанию: true
Если у вас нет установленного пакета оптимизации, изображение не будет оптимизировано. В этом случае предупреждение записано на консоль во время сборки, чтобы сообщить вам о возможной неправильной конфигурации. Если эта конфигурация предназначена, и вы действительно не хотите, чтобы изображения были оптимизированы, вы можете установить это значение false , и вы больше не получите предупреждение.
Указанные здесь параметры являются значениями по умолчанию .
Поэтому, если они достаточно хороши для вашего варианта использования, вам не нужно указывать их, чтобы иметь более короткий и более чистый файл next.config.js .
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withPlugins ( [
[ optimizedImages , {
// these are the default values so you don't have to provide them if they are good enough for your use-case.
// but you can overwrite them here with any valid value you want.
inlineImageLimit : 8192 ,
imagesFolder : 'images' ,
imagesName : '[name]-[hash].[ext]' ,
handleImages : [ 'jpeg' , 'png' , 'svg' , 'webp' , 'gif' ] ,
removeOriginalExtension : false ,
optimizeImages : true ,
optimizeImagesInDev : false ,
mozjpeg : {
quality : 80 ,
} ,
optipng : {
optimizationLevel : 3 ,
} ,
pngquant : false ,
gifsicle : {
interlaced : true ,
optimizationLevel : 3 ,
} ,
svgo : {
// enable/disable svgo plugins here
} ,
webp : {
preset : 'default' ,
quality : 75 ,
} ,
} ] ,
] ) ; next.config.jsMIT © Cyril Wanner
