استفاده از AVIF را در پروژه Next.js خود شروع کنید

معرفی

بهینه سازی تصویر Next.js آسان است! وبلاگی که می خوانید از آخرین نسخه React و Next.js استفاده می کند.

شما باید مطمئن شوید که

شامل موارد زیر است:

module.exports = {
 images: {
  formats: ['image/avif', 'image/webp']
 }
}

Next.js تمام کارهای سخت پشت صحنه را برای شما انجام خواهد داد. تیم پشتیبان Next.js از نسخه 10 بر روی بهبود پردازش تصویر کار می کند و AVIF از نسخه 12 پشتیبانی می شود. آنها هر دو را یکپارچه ارائه می دهند.

جزء () و یک API داخلی بهینه سازی تصویر. آنها جزء تصویر خود را به این صورت توصیف می کنند پسوند عنصر img HTML که برای وب مدرن طراحی شده است. تصاویر در این کامپوننت تغییر اندازه، بهینه سازی شده و به طور خودکار در قالب صحیح بر اساس دستگاه و مرورگر بازدید کننده ارائه می شوند. به عنوان مثال، شما یک تصویر با وضوح بالا را به یک دستگاه تلفن همراه تحویل نمی دهید. علاوه بر این، تصاویر از Core Web Vitals پشتیبانی کنید با تغییر نکردن چیدمان آنها در حین بارگذاری تنبل تصاویر. علاوه بر این، اگر سرور حاوی تصاویر وب سایت CDN باشد و سرور میزبان وب سایت نباشد، می توان از این سرویس استفاده کرد.

برای اطلاعات بیشتر به سند Next.js مراجعه کنید.

جزء تصویر Next.js

برای استفاده از کامپوننت تصویر Next.js، فایل تصویر را به فهرست پروژه خود اضافه کنید یا از یک منبع خارجی استفاده کنید و آن را به عنوان یک

به کامپوننت تصویر Next.js که در بالای فایل وارد کرده اید، کمک کنید. بسته به پشتیبانی مرورگر بازدیدکنندگان، تصاویر را به WebP و AVIF تبدیل می کند. لطفاً توجه داشته باشید که تا این تاریخ، تصاویر بارگذاری شده از طریق CSS بهینه سازی نخواهند شد، اگرچه امیدواریم در نسخه های بعدی نیز چنین باشد.

import Image from 'next/image'
(..)
 <Image
  src="/yourmum.jpg"
  alt="Picture of your mum"
  width={9001}
  height={500}
 />
(..)

تصاویر CSS

تا این مرحله، اگر به شدت به تصاویر CSS متکی هستید، می توانید از افزونه شخص ثالث با Next.js به نام next-optimized-images استفاده کنید. دارای بسیاری از ویژگی های اضافی است و ** از بارگذاری تصاویر با CSS** پشتیبانی می کند که مفید است. با این حال، این افزونه از AVIF پشتیبانی نمی کند و WebP را انتخاب می کند. حتی با وجود اینکه نویسنده به دنبال یک شاخه قناری با پشتیبانی وعده داده شده AVIF اخبار نسخه جدیدی را منتشر کرد، توسعه تا اوت 2020 ادامه پیدا نکرده است.

چگونه ما در avif.io با پشتیبانی AVIF برخورد می کنیم؟

از آنجایی که نمی خواهیم به Vercel یا اجزای شخص ثالث تکیه کنیم، مراحل زیر را انجام می دهیم.

1. اسکریپت تشخیص پشتیبانی مرورگر را اضافه کنید

برای اینکه بفهمیم آیا شما به عنوان یک بازدیدکننده مرورگری با پشتیبانی AVIF دارید، ما اسکریپت 600 بایتی زیر را در هدر خود پیاده سازی کرده ایم:

function F(a){document.documentElement.classList.add(a)}var A=new Image;A.src="data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAAAGwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAAQAAAAEAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAAAI21kYXQSAAoIP8R8hAQ0BUAyDWeeUy0JG+QAACANEkA=",A.onload=function(){F("avif")},A.onerror=function(){var a=new Image;a.src="data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",a.onload=function(){F("webp")}};

2. مولفه تصویر را با نشانه گذاری مدرن ایجاد کنید

ما جزء تصویر خودمان را توسعه داده‌ایم (برای آخرین نسخه از Github دیدن کنید)، که از تمام ویژگی‌هایی استفاده می‌کند که نشانه‌گذاری تصویر مدرن باید در نظر بگیرد، از بار تنبل تا نسبت تصویر. باید مسیر و متن جایگزین را انتخاب کنیم. برای اطلاعات بیشتر در مورد نشانه گذاری تصویر عالی به راهنمای عملکرد تصویر مراجعه کنید.

3. تبدیل تصاویر با شارپ در زمان ساخت

در نهایت، ما کتابخانه NodeJS را در اسکریپت ساخت و انتشار خود ادغام کرده ایم تا قبل از آپلود داده های وب سایت خود در Firebase، تصاویر را تبدیل کنیم. اسکریپت شارپ تمام تصاویر را در یک پوشه خاص شناسایی می کند و آنها را به تمام فرمت ها و اندازه های مختلف مورد نیاز ما تبدیل می کند. در زیر اسکریپت فعلی ما استفاده می کنیم.

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");
const output = "../public/img/";
const input = "../images/";
const jpgQuality = { mozjpeg: true, quality: 50, progressive: true };
const webpQuality = { quality: 50, reductionEffort: 6 };
const avifQuality = { quality: 45, speed: 1 };
const sizes = [1440, 720, 360];
fs.readdir(input, (err, files) => {
 console.log("Found " + files.length + " files. Converting now, please be patient..");
 files.forEach((file) => {
  function convert(size) {
   let fileShort = path.parse(file).name;
   sharp(input + file)
    .jpeg(jpgQuality)
    .resize({ width: size })
    .toFile(output + fileShort + "-" + size + ".jpg");
   sharp(input + file)
    .webp(webpQuality)
    .resize({ width: size })
    .toFile(output + fileShort + "-" + size + ".webp");
   sharp(input + file)
    .avif(avifQuality)
    .resize({ width: size })
    .toFile(output + fileShort + "-" + size + ".avif");
  }
  if (file.endsWith(".png") || file.endsWith(".jpg") || file.endsWith(".jpeg")) {
   for (let i = ; i < sizes.length; i++) {
    convert(sizes[i]);
   }
  }
 });
});

به خاطر داشته باشید که این برای وب سایت بدون تصاویر زیاد مناسب است، زیرا زمان ساخت را به میزان قابل توجهی افزایش می دهد. راهی برای دور زدن آن می تواند ایجاد یک API واضح و استفاده از بازسازی استاتیک افزایشی باشد.