با Next.js کیفیت تصویر را به حداکثر برسانید

به برنامه خود کمک کنید بهترین زندگی خود را داشته باشد. با بهینه سازی آسان تصویر در زمان و فضا صرفه جویی کنید.

تصاویر بخش مهمی از هر وب سایت یا برنامه ای هستند. آنها کمک می کنند تا محتوا جذاب تر و از نظر بصری جذاب تر شود.

با این حال، اگر تصاویر به درستی بهینه نشده باشند، می توانند سرعت سایت یا اپلیکیشن را نیز کاهش دهند.

چرا تصاویر را بهینه کنیم؟

چند دلیل وجود دارد که چرا بهینه سازی تصاویر مهم است.

می تواند به بهبود زمان بارگذاری سایت یا برنامه کمک کند.
این می تواند مقدار داده ای را که مشتری برای دانلود نیاز دارد کاهش دهد، که می تواند در هزینه های پهنای باند صرفه جویی کند.
می تواند به بهبود عملکرد کلی سایت یا برنامه کمک کند.

نحوه بهینه سازی تصاویر در Next.js

راه های مختلفی برای بهینه سازی تصاویر در Next.js وجود دارد. یکی استفاده از کامپوننت Image است. این جزء به طور خودکار تصاویر را برای عملکرد بهینه می کند.

راه دیگر برای بهینه سازی تصاویر، استفاده از قابلیت های داخلی پردازش تصویر است. Next.js می تواند به طور خودکار تصاویر را برای عملکرد تغییر اندازه، فشرده و بهینه کند.

در نهایت، می توانید از یک کتابخانه شخص ثالث مانند react-optimized-image استفاده کنید. این کتابخانه انواع قابلیت های بهینه سازی تصویر را ارائه می دهد.

با استفاده از کامپوننت تصویر

جزء Image ساده ترین راه برای بهینه سازی تصاویر در Next.js است. برای استفاده از آن، به سادگی کامپوننت را از بسته بعدی/تصویر وارد کنید.

هنگامی که کامپوننت را وارد کردید، می‌توانید از آن مانند هر مؤلفه دیگری در React استفاده کنید. مؤلفه Image دارای چند پایه است که می توانید از آنها برای کنترل نحوه رندر کردن تصاویر استفاده کنید.

import Image from 'next/image'

export default function MyImage() {
  return (
    <Image
      src="/my-image.jpg"
      width="200"
      height="200"
      quality="100"
      alt="My image"
    />
  )
}

در این مثال، مؤلفه Image تصویری با عرض 200 پیکسل و ارتفاع 200 پیکسل را ارائه می دهد. همچنین می توانید از CSS یا چارچوبی مانند Tailwind برای استایل دادن به برنامه و تصاویر خود استفاده کنید.

مطلب مرتبط: نحوه پیاده سازی صفحه بندی در یک برنامه Vue

برخی از لوازم مورد نیاز برای مولفه Image عبارتند از عرض، ارتفاع، src و alt. src prop URL تصویری است که می خواهید استفاده کنید. برای تنظیم عرض و ارتفاع تصویر بر حسب پیکسل از پایه های عرض و ارتفاع استفاده کنید. alt prop متن جایگزین برای تصویر است.

برخی از لوازم اختیاری برای مؤلفه Image عبارتند از: چیدمان، بارگذار، مکان نگهدار و اولویت. layout prop طرح بندی تصویر را مشخص می کند. می‌توانید از لودر برای تعیین یک بارگذار تصویر سفارشی استفاده کنید. مکان نگهدارنده یک مکان نگهدار تصویر سفارشی را مشخص می کند. Priority prop اولویت تصویر را مشخص می کند.

برخی از مزایای استفاده از کامپوننت Image عبارتند از:

بهبود عملکرد: یکی از مزایای اصلی استفاده از مؤلفه Image بهبود عملکرد است. مؤلفه به طور خودکار تصاویر را برای عملکرد بهینه می کند.
تغییر اندازه خودکار تصویر: یکی دیگر از مزایای استفاده از مؤلفه Image تغییر اندازه خودکار تصویر است. این مؤلفه می‌تواند به‌طور خودکار اندازه تصاویر را متناسب با عرض و ارتفاع تغییر دهد.
فشرده سازی خودکار تصویر: مؤلفه Image همچنین می تواند به طور خودکار تصاویر را فشرده کند تا اندازه فایل کاهش یابد.
پشتیبانی از بارگذاری تنبل: مؤلفه Image نیز از بارگذاری تنبل پشتیبانی می کند. این بدان معنی است که فقط زمانی تصاویر را بارگیری می کند که روی صفحه قابل مشاهده باشند.

استفاده از کتابخانه شخص ثالث

اگر به کنترل بیشتری بر روی بهینه سازی تصویر نیاز دارید، می توانید از یک کتابخانه شخص ثالث مانند react-optimized-image استفاده کنید. این کتابخانه انواع قابلیت های بهینه سازی تصویر را ارائه می دهد.

برخی از ویژگی های React-optimized-image عبارتند از:

بهینه سازی تصاویر روی کلاینت و سرور: تصویر با واکنش بهینه می تواند تصاویر روی کلاینت و سرور را بهینه کند. این بدان معنی است که تصاویر برای عملکرد و همچنین اندازه فایل بهینه شده اند.
تغییر اندازه خودکار تصویر: عکس‌های بهینه‌سازی واکنش نشان می‌دهند که می‌توانند به‌طور خودکار اندازه عکس‌ها را متناسب با عرض و ارتفاع تغییر دهند.
فشرده‌سازی خودکار تصویر: عکس‌های بهینه‌شده واکنش نشان می‌دهند همچنین می‌توانند به‌طور خودکار تصاویر را برای کاهش اندازه فایل فشرده کنند.
پشتیبانی از بارگذاری تنبل: تصویر با واکنش بهینه نیز از بارگذاری تنبل پشتیبانی می کند. این بدان معنی است که فقط زمانی تصاویر را بارگیری می کند که روی صفحه قابل مشاهده باشند.
پشتیبانی از چندین فرمت تصویر: عکس بهینه‌سازی واکنش از فرمت‌های تصویری متعدد از جمله JPEG، PNG و WebP پشتیبانی می‌کند.

مطلب مرتبط: نحوه پیاده سازی اسکرول بی نهایت در Vue

برای استفاده از react-optimized-image، به سادگی کتابخانه را با npm نصب کنید.

هنگامی که کتابخانه را نصب کردید، می توانید آن را به پروژه خود وارد کنید.

import Img from 'react-optimized-image'

export default function NextImg() {
  return (
    <Img
      src="/my-image.jpg"
      sizes={[400, 800]}
      alt="My image"
    />
  )
}

همچنین می‌توانید از فایل‌های SVG با تصویر بهینه‌سازی واکنش استفاده کنید.

import {Svg} from 'react-optimized-image'

export default function NextImg() {
  return (
    <Svg
      src="/my-image.svg"
      className=&ldquo;filled-red&rdquo;
    />
  )
}

این مثال از کلاسName prop برای تعیین نام کلاس برای SVG استفاده می کند. می توانید از نام کلاس برای استایل SVG با CSS یا تعامل با آن با استفاده از جاوا اسکریپت استفاده کنید.

React-optimized-image همچنین مزایای دیگری را نسبت به قابلیت های داخلی بهینه سازی تصویر ارائه می دهد.

یکی از مزایای استفاده از بسته بر روی ویژگی های داخلی این است که می تواند به طور خودکار اندازه های مختلف تصاویر را تولید کند. این بدان معنی است که شما مجبور نیستید نسخه های مختلف یک تصویر را ایجاد کنید.

مزیت دیگر این است که می تواند به طور خودکار اندازه مناسب تصویر را برای دستگاه کاربر ارائه دهد. این بدان معناست که دستگاه‌های دارای صفحه‌نمایش با وضوح بالا تصویری با وضوح بالا و دستگاه‌هایی با صفحه‌نمایش با وضوح پایین تصویری با وضوح پایین دریافت می‌کنند.

در نهایت، react-optimized-image یک پروژه کاملاً منبع باز است. این بدان معنی است که اگر به یک ویژگی خاص یا رفع اشکال نیاز دارید، می‌توانید به کتابخانه کمک کنید.

از کدام روش باید استفاده کرد؟

بنابراین، از کدام روش برای بهینه سازی تصاویر در Next.js باید استفاده کنید؟

مطلب مرتبط: شروع کار با Sveltestrap

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

اگر به کنترل بیشتری بر روی بهینه سازی تصویر نیاز دارید، می توانید از یک کتابخانه شخص ثالث مانند react-optimized-image استفاده کنید. این کتابخانه قابلیت های بهینه سازی تصویر پیشرفته تری را ارائه می دهد.

اگر به بهترین عملکرد مطلق نیاز دارید، می‌توانید از ترکیبی از قابلیت‌های پردازش تصویر داخلی و یک کتابخانه شخص ثالث استفاده کنید. این بهترین هر دو دنیا را به شما می دهد. با این حال، این روش برای مبتدیان توصیه نمی شود زیرا به تنظیمات بیشتری نیاز دارد.

بهبود سئو با تصاویر بهینه شده

با بهینه سازی تصاویر در وب سایت یا اپلیکیشن خود، می توانید سئوی خود را بهبود ببخشید. الگوریتم گوگل سرعت بارگذاری وب سایت ها و برنامه ها را در نظر می گیرد. اگر وب سایت یا برنامه شما به کندی بارگذاری شود، تأثیر منفی بر سئوی شما خواهد داشت.

با تصاویر بهینه شده، می توانید زمان بارگذاری وب سایت یا برنامه خود را بهبود ببخشید که می تواند سئوی شما را بهبود بخشد. پس از آن، شما همچنین می توانید پروتکل گراف باز را برای عملکرد بهتر اضافه کنید.