next optimized images
v2.6.1
الإصدار 3 قادم! يقدم إعادة كتابة كاملة مع العديد من الميزات الجديدة وإثارات الأخطاء. إذا كنت ترغب في المساعدة في تطوير واختبار الإصدار الرئيسي القادم ، فيرجى الاطلاع على فرع Canary للحصول على تعليمات التثبيت ومزيد من المعلومات حول الميزات الجديدة. (قضية 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
] ) ;راجع قسم التكوين للحصول على جميع الخيارات المتاحة.
يستخدم المثال أعلاه plugins-plugins المقبلة لمواجئ 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 | تحسين صور بابوا غينيا. | وصلة |
imagemin-pngquant | بديل لتحسين صور PNG. | وصلة |
imagemin-gifsicle | يحسن صور GIF. | وصلة |
imagemin-svgo | تحسين صور SVG والرموز. | وصلة |
svg-sprite-loader | يضيف إمكانية استخدام SVG Sprites لأداء أفضل. اقرأ قسم Sprite لمزيد من المعلومات. | وصلة |
webp-loader | يحسن صور WebP ويمكنه تحويل صور JPEG/PNG إلى WebP على Fly (استعلام WebP Resource). | وصلة |
lqip-loader | يولد أصحاب الصور المنخفضة الجودة ويمكنه استخراج الألوان المهيمنة للصورة (استعلام موارد LQIP) | وصلة |
responsive-loader | يمكن تغيير حجم الصور أثناء الطيران وإنشاء إصدارات متعددة منه لـ srcset .هام : تحتاج إلى تثبيت إما jimp (تنفيذ العقدة ، أبطأ) أو sharp (ثنائي ، أسرع) | وصلة |
image-trace-loader | يقوم بإنشاء الخطوط العريضة لـ SVG التي يمكن استخدامها كمكافأة نائبة أثناء تحميل الصورة الأصلية (استعلام Trace Resource). | وصلة |
مثال: إذا كان لديك صور 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 .
اعتمادًا على إعداد البناء/النشر الخاص بك ، من الممكن أيضًا تثبيتها كقواعد devDependes. فقط تأكد من توفر الحزم عند إنشاء مشروعك.
منذ الإصدار 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/أقل:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ إذا كان الملف أقل من الحد لضمان الصور ، فسيقوم require(...) بإرجاع BASE64 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.
هناك بعض الحالات التي لا تريد فيها الرجوع إلى ملف أو الحصول على بيانات BASE64 ، لكنك تريد بالفعل تضمين ملف RAW مباشرة في HTML. خاصة بالنسبة لـ SVGs لأنه لا يمكنك تصميمها باستخدام CSS إذا كانت في سمة src على صورة.
لذلك هناك خيارات إضافية يمكنك تحديدها كمعاملات استعلام عند استيراد الصور.
?include : قم بتضمين ملف RAW مباشرة (مفيد لأيقونات SVG)?webp : قم بتحويل صورة JPEG/PNG إلى WebP أثناء الطيران?inline : قوة تضم صورة (Data-uri)?url : إجبار عنوان URL على صورة صغيرة (بدلاً من البيانات-uri)?original : استخدم الصورة الأصلية ولا تحسنها?lqip : قم بإنشاء عنصر نائب لارتفاع صورة منخفضة الجودة?lqip-colors : استخراج الألوان المهيمنة للصورة?trace : استخدم الخطوط العريضة تتبع كمكافأة نائبة تحميل?resize : تغيير حجم الصورة?sprite : استخدم Sprites SVG سيتم الآن تضمين الصورة مباشرة في HTML الخاص بك دون وجود بيانات أو مرجع إلى ملفك.
كما هو موضح أعلاه ، هذا مفيد لـ SVGs حتى تتمكن من تصميمها باستخدام 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>
*/ يمكنك تحديد حد لإضفاء الطابع على الصور التي ستتضمنها كـ Data-URI مباشرة في المحتوى الخاص بك بدلاً من الرجوع إلى ملف إذا كان حجم الملف أقل من هذا الحد.
عادة لا ترغب في تحديد حد كبير للغاية ولكن قد تكون هناك حالات لا تزال ترغب فيها في ضمور صور أكبر.
في هذه الحالة ، لا يتعين عليك تعيين الحد العالمي لقيمة أعلى ولكن يمكنك إضافة استثناء لصورة واحدة باستخدام خيارات الاستعلام ?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 query لاستعلام عن عنوان 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' ) } />
) ; يمكن أيضًا دمج هذا مع ?url أو ?inline (على سبيل المثال ?original&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 Picture Search .
يمكن أن يختلف عدد الألوان التي يتم إرجاعها ويعتمد على عدد الألوان المختلفة التي تمتلكها صورتك.
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']
*/ يتطلب حزمة
image-trace-loaderالاختيارية (npm install image-trace-loader)
باستخدام استعلام الموارد ?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>
*/ src require('./images/my-image.jpg?trace') trace
سيكون للتتبع نفس العرض والارتفاع مثل صورتك العادية.
يمكن تعيين خيارات المحمل في تكوين البرنامج المساعد.
يتطلب حزمة
responsive-loader(npm install responsive-loader) وإماjimp(تنفيذ العقدة ، أبطأ) أوsharp(ثنائي ، أسرع)
بعد استعلام الموارد ?resize ، يمكنك إضافة أي استعلام آخر 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 >
) ; إذا تم استخدام size أو sizes فقط ، فيمكن أيضًا حذف Param ?resize حجمه (على سبيل المثال my-image.jpg?size=300 ). ولكن هذا مطلوب لجميع المعلمات الأخرى من responsive-loader .
يمكنك أيضًا تعيين التكوينات العالمية في الخاصية responsive (في ملف next.config.js ) وتحديد ، على سبيل المثال ، الأحجام الافتراضية التي سيتم إنشاؤها عندما لا تحدد صورة واحدة (على سبيل المثال فقط my-image.jpg?resize ).
يتطلب حزم التحسين الاختيارية
imagemin-svgoوsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
إذا كنت بحاجة إلى تصميم أو تحريك SVGs الخاص بك ?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
سيتم توضيح الملفات الأصغر باستخدام Data-URI بواسطة url-loader. يحدد هذا الرقم الحد الأقصى لحجم الملف (بالبايت) للصور التي يجب أن تتحملها. إذا كانت الصورة أكبر ، فسيتم نسخها إلى المجلد الثابت في المقبل.
سيتم تحسين الصور في كلتا الحالتين.
لتعطيل تثبيت الصورة تمامًا ، قم بتعيين هذه القيمة على -1 . ستعود دائمًا إلى عنوان URL للصورة.
اكتب: string
الافتراضي: 'images'
اسم المجلد داخل /static/ الذي سيتم نسخ الصور إليه أثناء الإنشاء.
اكتب: string
الافتراضي: `/_next/static/${imagesFolder}/`
المسار العام الذي يجب استخدامه لعناوين URL للصور. يمكن استخدام هذا لخدمة الصورة المحسنة من خدمة تخزين السحابة مثل S3.
من الإصدار 2 فصاعدًا ، يستخدم Images المحسّن التالي تكوين assetPrefx لـ 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 إذا حذفت هذا الخيار.
يتطلب حزمة
image-trace-loaderالاختيارية (npm install image-trace-loader)
النوع: 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 كثيرًا ولا ترغب في إضافة معلمة استعلام ?resize كل طلب ، فيمكنك تعيين هذه القيمة على 'responsive-loader' .
بعد ذلك ، سيتعامل 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
