next img
1.0.0
Функции
sharploading="lazy" )<Picture /> componentПо умолчанию Next-IMG настроен на использование:
768px Все эти настройки и другие могут быть изменены в вашем next.config.js или в отдельном импорте изображения.
Разработано и используется Humaans.
По умолчанию Next.js или WebPack не очень помогают вам с оптимизацией изображений. Это означает пользовательскую конфигурацию или сценарии, обработку изображений вручную, используя изображение CDN или не оптимизирует изображения вообще. Next-IMG обеспечивает и альтернативный оптимизированный подход для добавления изображений в ваши проекты heall.js. Он объединяет плагин Next.js, пользовательский погрузчик WebPack и компонент React, чтобы сделать подачу изображений оптимальным способом таким же образом, как это почти так же просто, как набрать <img src='foo.png' /> .
Короче говоря, это требуется следующее:
< Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />Импортируют, изменяют размеры, оптимизированы, кэши (постоянно в GIT Repo) и выводит следующий HTML:
< picture >
< source
type =" image/webp "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
sizes =" (max-width: 768px) 375px, 800px "
/>
< source
type =" image/jpeg "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
sizes =" (max-width: 768px) 375px, 800px "
/>
< img
src =" /_next/static/images/[email protected] "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
width =" 375 "
height =" 250 "
alt =" Jellyfish "
/>
</ picture >Просмотреть примеры.
Установите пакет
npm install next-img
Добавьте плагин в свой next.config.js :
const withImg = require ( 'next-img/plugin' )
module . exports = withImg ( {
nextImg : {
breakpoints : [ 768 ] ,
} ,
} ) В вашем приложении импортируйте изображения и внедряйте с помощью компонента <Picture /> :
import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'
export default ( ) => < Picture src = { jelly } />Или встроенный:
import { Picture } from 'next-img'
export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />Этот конкретный пример будет генерировать следующие изображения:
Измененные и оптимизированные изображения будут сохранены в каталоге resources в корне вашего проекта во время разработки. Это означает, что если вы настраиваете параметры импорта изображения или конфигурацию плагина, вы можете генерировать дополнительные изображения, которые больше не используются в вашем проекте. В этом случае выполнить команду next-img , чтобы удалить любые ненужные изображения и создать любые недостающие:
npx next-img
Теперь проверьте каталог resources на ваш источник управления, который будет повторно использован позже для разработки и производства. Вы можете выключить эту функцию, установив persistentCache: false в конфигурации плагина, и в этом случае изображения будут храниться только во временном кэше внутри каталога .next .
Посмотреть больше примеров использования.
Параметры настройки плагина по умолчанию:
{
// global settings for images, can be overriden per image
breakpoints : [ 768 ] ,
densities : [ '1x' , '2x' ] ,
// output image quality configuration
jpeg : {
quality : 80 ,
webp : {
quality : 90 ,
reductionEffort : 6 ,
} ,
} ,
png : {
quality : 100 ,
webp : {
reductionEffort : 6 ,
lossless : true ,
} ,
} ,
// the directory within Next.js build output
imagesDir : 'images' ,
// the output image name template
imagesName : '[name]-[size]@[density]-[hash].[ext]' ,
// advanced - customise the image public path
imagesPublicPath : null ,
// advanced - customise the image output path
imagesOutputPath : null ,
// persistent cache allows for fast deploy and
// development workflow by avoiding reprocessing
// images that were previously processed
persistentCache : true ,
persistentCacheDir : 'resources' ,
// this directory within .next is used in case persistent cache is turned off
cacheDir : path . join ( 'cache' , 'next-img' )
} Обратитесь к резкой документации для вариантов сжатия jpeg/png/webp .
При импорте изображения вы можете использовать параметры запроса для настройки оптимизации:
320px на своем веб -сайте, просто укажите 320 здесь, плагин будет создавать любые необходимые более крупные версии на основе конфигурации densities .1x и 2x размеры изображений будут созданы, укажите 1x если вы хотите создать только одно изображение на размер или 1x,2x,3x и т. Д., Если вы хотите больше плотности.jpeg . Обратите внимание, что настройки jpeg->webp должны быть вложены в соответствии с этим парамом, например ?jpeg[webp][quality]=95png . Обратите внимание, что настройки png->webp должны быть вложены в соответствии с этим парамом, например ?png[webp][lossless]=false&png[webp][nearLossless]=trueПримеры:
import img1 from './images/img.jpg'
import img2 from './images/img.jpg?sizes=375,900'
import img3 from './images/img.jpg?sizes=375,900&densities=1x'
import img4 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x'
import img5 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x&jpeg[quality]=70&jpeg[webp][quality]=70' next-img поставляется с компонентом React, облегчающим встраивание изображений.
Вот реквизит этого доступа к компоненту:
img . Это позволяет использовать такие атрибуты, как alt , loading="lazy" и т. Д. Когда одно изображение предоставляется через предложение src , тогда каждый размер будет настроен на отображение на каждую точку останова, доступную с помощью атрибута sizes attribute HTML.
Например, с точками останова [375, 768] и ?sizes=100,400,800 Компонент <Picture> применяет атрибут следующих sizes :
(max-width: 375px) 100px,
(max-width: 768px) 400px,
800px
Когда массив изображений предоставляется через src -опору, то каждое изображение будет настроено для отображения на каждую точку останова, доступную с помощью media attribute .
Например, с точками останова [375, 768] и src=[img1, img2, img3] Компонент <Picture> применяет следующий атрибут media :
< picture >
< source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
< source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
< source sizes =" {{img3 width}} " />
< img ... />
</ picture > Должен ли я использовать компонент <Picture /> ?
Компонент изображения необязательно. Вы можете обрабатывать импортный объект изображения, как хотите.
Разве изображения не могли быть оптимизированы дальше?
Да, вы, вероятно, можете получить ~ 10% -20% или более сжатия, если вы пройдете jpg/png через ImageOPTIM или другие инструменты. Дело в том, что, поскольку этот плагин выводит уже хорошо оптимизированный WebP, и вы будете обслуживать WebP для большинства современных браузеров, что устраняет необходимость сжать этот дополнительный размер файла для jpg/png поскольку они являются резервными изображениями. Тем не менее, могут быть варианты использования, когда пользовательские алгоритмы сжатия необходимы, и мы могли бы добавить поддержку произвольных преобразований в этом плагине в будущем.
Чтобы разработать этот проект, вам нужно запустить наблюдатель для компонента <Picture /> :
npm install
npm run watch
Вы можете использовать пример в качестве игровой площадки:
cd example
npm install
next
Чтобы выполнить команду next-img в примере dir:
node ../bin/next-img
Дорожная карта
jpg->webp и png->webp Curvinions webp/jpg/png ?raw поддержка запросов, которая никоим образом не обрабатывает изображение next-img , подключившись непосредственно к next build И некоторые идеи для того, где этот проект может быть принят в будущем:
imagemin в конвейер через конфигурацию. Таким образом, пользователи могут контролировать, как оптимизировать свои изображения более грануарно.?sizes=100vw,50vw,900px на пиксели на основе конфигурации точки останова, это позволило бы динамический вид импорта, который зависят от вашей системы проектирования и относительного размера изображений, например, если CSS говорит «50 В», вам не нужно будет делать этот расчет вручную.require() их.
