next img
1.0.0
سمات
sharploading="lazy" )<Picture />بشكل افتراضي ، تم تكوين IIMG للاستخدام:
768px يمكن تغيير كل هذه الإعدادات والمزيد في next.config.js أو في واردات الصورة الفردية.
تم تطويره واستخدامه من قبل هيومان.
بشكل افتراضي Next.js أو WebPack لا يساعدك كثيرًا في تحسين الصور. هذا يعني التكوين المخصص أو البرمجة النصية ، ومعالجة الصور باليد ، باستخدام صورة CDN أو عدم تحسين الصور على الإطلاق. يوفر Next-IMG ونهجًا مبسطًا بديلاً لإضافة الصور إلى مشاريع Next.js الخاصة بك. فهو يجمع بين مكون إضافي لـ NEXT.JS ، وعملية ويب مخصصة ومكون React لجعل التقديم صورًا بطريقة مثالية بطريقة سهلة تقريبًا مثل كتابة <img src='foo.png' /> .
باختصار ، يتطلب الأمر ما يلي:
< Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />الواردات ، والتغييرات ، والتحسين ، وذاكرة التخزين المؤقت (باستمرار في ريبو git) وتخرج 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 مع مكون رد فعل يجعل صور تضمين أسهل.
فيما يلي الدعائم وصول هذا المكون:
img . هذا يسمح باستخدام سمات مثل alt ، loading="lazy" ، إلخ .. عند توفير صورة واحدة عبر Prop src ، سيتم تكوين كل حجم لتظهر لكل نقطة توقف متوفرة باستخدام سمة sizes attribute HTML.
على سبيل المثال ، مع نقاط التوقف [375, 768] و ?sizes=100,400,800 سيطبق مكون <Picture> سمة sizes التالية:
(max-width: 375px) 100px,
(max-width: 768px) 400px,
800px
عندما يتم توفير مجموعة من الصور عبر Prop src ، سيتم تكوين كل صورة لتظهر لكل نقطة توقف متوفرة باستخدام media attribute HTML.
على سبيل المثال ، مع نقاط التوقف [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 في معظم المتصفحات الحديثة ، والذي يزيل الحاجة إلى الضغط على حجم الملف الإضافي لـ jpg/png نظرًا لأنها هي الصور الاحتياطية . ومع ذلك ، قد تكون هناك حالات استخدام حيث تكون خوارزميات الضغط المخصصة بحاجة إلى حاجة إلى إضافة دعم للتحولات التعسفية في هذا البرنامج المساعد في المستقبل.
لتطوير هذا المشروع ، ستحتاج إلى تشغيل مراقب لمكون <Picture /> :
npm install
npm run watch
يمكنك استخدام مثال كملعب:
cd example
npm install
next
لتنفيذ الأمر next-img في المثال dir:
node ../bin/next-img
خريطة الطريق
jpg->webp و png->webp webp/jpg/png ?raw الذي لا يعالج الصورة بأي شكل من الأشكال next-img عن طريق التوصيل مباشرة في next build وبعض الأفكار حول المكان الذي يمكن أن يؤخذ فيه هذا المشروع في المستقبل:
imagemin إلى خط الأنابيب عبر config. وبهذه الطريقة ، يمكن للمستخدمين التحكم في كيفية تحسين صورهم بشكل أكبر.?sizes=100vw,50vw,900px إلى وحدات البكسل بناءً على تكوين نقطة التوقف ، فإن هذا سيسمح للواردات الديناميكية التي تعتمد على نظام التصميم الخاص بك والتحجيم النسبي للصور ، على سبيل المثال ، إذا كانت CSS تقول "50VW" ، فلن تحتاج إلى القيام بذلك يدويًا يدويًا.require() لها.
