Next.js இமேஜ் காம்போனென்ட்: உலகளாவிய வலைக்கான மேம்பட்ட செயல்திறன் அம்சங்கள்

இன்றைய டிஜிட்டல் உலகில், வலைத்தள உள்ளடக்கத்தில் படங்கள் ஒரு முக்கியப் பங்கு வகிக்கின்றன, அவை பயனர் அனுபவத்தையும் ஈடுபாட்டையும் மேம்படுத்துகின்றன. இருப்பினும், மேம்படுத்தப்படாத படங்கள் வலைத்தளத்தின் செயல்திறனை கணிசமாகப் பாதிக்கக்கூடும், இது மெதுவான ஏற்றுதல் நேரங்களுக்கும் மோசமான பயனர் அனுபவத்திற்கும் வழிவகுக்கும், குறிப்பாக வரையறுக்கப்பட்ட அலைவரிசை உள்ள பயனர்கள் அல்லது புவியியல் ரீதியாக தொலைதூர இடங்களிலிருந்து அணுகுபவர்களுக்கு இது பொருந்தும். Next.js, ஒரு பிரபலமான React ஃபிரேம்வொர்க், இந்தச் சவால்களை எதிர்கொள்ள வடிவமைக்கப்பட்ட ஒரு சக்திவாய்ந்த <Image> காம்போனென்டை வழங்குகிறது, இது மேம்பட்ட பட செயல்திறன் அம்சங்களை இயல்பாகவே கொண்டுள்ளது.

இந்த விரிவான வழிகாட்டி, Next.js இமேஜ் காம்போனென்டின் மேம்பட்ட திறன்களை ஆராய்கிறது, உங்கள் உலகளாவிய பார்வையாளர்களுக்கு உகந்த படங்களை வழங்க அவற்றை நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பதை விளக்குகிறது. இது வேகமான ஏற்றுதல் நேரங்கள், குறைந்த அலைவரிசை நுகர்வு, மற்றும் ஒட்டுமொத்தமாக மேம்பட்ட பயனர் அனுபவத்தை உறுதி செய்கிறது. பதிலளிக்கக்கூடிய பட அளவிடுதல் மற்றும் வடிவமைப்பு மேம்படுத்தல் முதல் சோம்பல் ஏற்றுதல் மற்றும் மேம்பட்ட கட்டமைப்பு விருப்பங்கள் வரையிலான தலைப்புகளை நாம் உள்ளடக்குவோம்.

முக்கிய நன்மைகளைப் புரிந்துகொள்ளுதல்

மேம்பட்ட அம்சங்களுக்குள் செல்வதற்கு முன், Next.js இமேஜ் காம்போனென்டைப் பயன்படுத்துவதன் முக்கிய நன்மைகளை மீண்டும் பார்ப்போம்:

• தானியங்கு பட மேம்படுத்தல்: தேவைக்கேற்ப படங்களை மேம்படுத்துகிறது, உலாவி ஆதரவின் அடிப்படையில் அவற்றை மறுஅளவாக்கி WebP அல்லது AVIF போன்ற நவீன வடிவங்களுக்கு மாற்றுகிறது.
• பதிலளிக்கக்கூடிய படங்கள்: வெவ்வேறு திரை அளவுகள் மற்றும் சாதனத் தீர்மானங்களுக்கு ஏற்ப பல பட அளவுகளை தானாக உருவாக்குகிறது, மொபைல் சாதனங்களில் செயல்திறனை மேம்படுத்துகிறது மற்றும் அலைவரிசை பயன்பாட்டைக் குறைக்கிறது.
• சோம்பல் ஏற்றுதல் (Lazy Loading): படங்கள் வியூபோர்ட்டிற்குள் நுழையும்போது மட்டுமே அவற்றை ஏற்றுகிறது, இது ஆரம்ப பக்க ஏற்றுதல் நேரத்தைக் குறைத்து உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது.
• உள்ளமைக்கப்பட்ட செயல்திறன்: மடிப்புக்கு மேலே உள்ள படங்களை முன்கூட்டியே ஏற்றுதல் மற்றும் தானியங்கி பட அளவிடுதல் போன்ற அம்சங்களுடன் செயல்திறனுக்காக உகந்ததாக்கப்பட்டுள்ளது.
• தளவமைப்பு மாற்றத்தைத் தடுத்தல் (Prevent Layout Shift): width மற்றும் height குறிப்பிடுவதன் மூலம் அல்லது fill ப்ராப்பைப் பயன்படுத்துவதன் மூலம், இந்த காம்போனென்ட் Cumulative Layout Shift (CLS)-ஐத் தடுக்கிறது, இது Core Web Vitals-க்கான ஒரு முக்கிய அளவீடு ஆகும்.

மேம்பட்ட செயல்திறன் நுட்பங்கள்

1. தகவமைக்கும் படங்களுக்கு `sizes` ப்ராப்பை மாஸ்டரிங் செய்தல்

sizes ப்ராப் என்பது பல்வேறு திரை அளவுகள் மற்றும் வியூபோர்ட் அகலங்களுக்கு ஏற்ப உண்மையிலேயே பதிலளிக்கக்கூடிய படங்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இது மீடியா வினவல்களின் அடிப்படையில் வெவ்வேறு பட அளவுகளை வரையறுக்க உங்களை அனுமதிக்கிறது, பயனரின் சாதனத்திற்கு மிகவும் பொருத்தமான படத்தை உலாவி ஏற்றுவதை உறுதி செய்கிறது.

உதாரணம்:

சிறிய சாதனங்களில் திரையின் முழு அகலத்தையும், நடுத்தர அளவிலான சாதனங்களில் பாதி அகலத்தையும், பெரிய சாதனங்களில் மூன்றில் ஒரு பங்கு அகலத்தையும் ஆக்கிரமிக்க வேண்டிய ஒரு படம் உங்களிடம் இருப்பதாக கற்பனை செய்து கொள்ளுங்கள். sizes ப்ராப்பைப் பயன்படுத்தி இதை நீங்கள் அடையலாம்:

<Image
  src="/my-image.jpg"
  alt="My Responsive Image"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

விளக்கம்:

• (max-width: 768px) 100vw: 768px அதிகபட்ச அகலம் கொண்ட திரைகளுக்கு (பொதுவாக மொபைல் சாதனங்கள்), படம் வியூபோர்ட் அகலத்தில் 100% இடத்தை எடுத்துக்கொள்ளும்.
• (max-width: 1200px) 50vw: 1200px அதிகபட்ச அகலம் கொண்ட திரைகளுக்கு (நடுத்தர அளவிலான சாதனங்கள்), படம் வியூபோர்ட் அகலத்தில் 50% இடத்தை எடுத்துக்கொள்ளும்.
• 33vw: 1200px-ஐ விட பெரிய திரைகளுக்கு, படம் வியூபோர்ட் அகலத்தில் 33% இடத்தை எடுத்துக்கொள்ளும்.

sizes ப்ராப், width மற்றும் height ப்ராப்களுடன் இணைந்து செயல்பட்டு, உலாவி சரியான பட அளவை ஏற்றுவதை உறுதி செய்கிறது. நன்கு வரையறுக்கப்பட்ட sizes ப்ராப்பை வழங்குவதன் மூலம், பலதரப்பட்ட சாதனங்கள் மற்றும் திரை அளவுகளுக்கு பட விநியோகத்தை மேம்படுத்தலாம், இது செயல்திறனை கணிசமாக மேம்படுத்துகிறது.

உலகளாவிய பயன்பாடு: ஐரோப்பா மற்றும் ஆசியாவில் உள்ள பயனர்களை இலக்காகக் கொண்ட ஒரு இ-காமர்ஸ் தளத்தைக் கவனியுங்கள். சாதனப் பயன்பாட்டு முறைகள் கணிசமாக வேறுபடலாம். ஐரோப்பிய பயனர்கள் முதன்மையாக டெஸ்க்டாப்களைப் பயன்படுத்தலாம், அதே நேரத்தில் ஆசிய பயனர்கள் மொபைல் சாதனங்களை அதிகம் நம்பியிருக்கலாம். sizes மூலம் மேம்படுத்துவது, சாதனம் எதுவாக இருந்தாலும், அனைவருக்கும் வேகமான ஏற்றுதல் நேரத்தை உறுதி செய்கிறது.

2. முக்கியமான மடிப்புக்கு மேலே உள்ள படங்களுக்கு `priority`-ஐப் பயன்படுத்துதல்

priority ப்ராப், ஆரம்ப பக்க ஏற்றுதலுக்கு முக்கியமான படங்களை ஏற்றுவதற்கு முன்னுரிமை அளிக்கப் பயன்படுகிறது, பொதுவாக அவை மடிப்புக்கு மேலே தெரியும் (பக்கத்தின் ஸ்க்ரோல் செய்யாமல் தெரியும் பகுதி). இந்தப் படங்களில் priority={true} என அமைப்பதன் மூலம், அவற்றை முன்கூட்டியே ஏற்றுமாறு Next.js-க்கு நீங்கள் அறிவுறுத்துகிறீர்கள், அவை விரைவாக ஏற்றப்பட்டு காட்டப்படுவதை உறுதிசெய்து, பயனரின் உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது.

உதாரணம்:

<Image
  src="/hero-image.jpg"
  alt="Hero Image"
  width={1920}
  height={1080}
  priority={true}
/>

எப்போது பயன்படுத்த வேண்டும்:

• ஹீரோ படங்கள் (Hero Images): பக்கத்தின் மேலே உள்ள முக்கியப் படம், இது உடனடியாக பயனரின் கவனத்தை ஈர்க்கிறது.
• லோகோக்கள்: வலைத்தளத்தின் லோகோ, இது பொதுவாக ஹெடரில் காட்டப்படும்.
• முக்கிய காட்சி கூறுகள்: ஆரம்ப பயனர் அனுபவத்திற்கு அவசியமான வேறு எந்தப் படங்களும்.

முக்கியக் கருத்தாய்வுகள்:

• priority ப்ராப்பை குறைவாகப் பயன்படுத்துங்கள், ஏனெனில் அதிகமான படங்களை முன்கூட்டியே ஏற்றுவது ஒட்டுமொத்த பக்க ஏற்றுதல் நேரத்தை எதிர்மறையாகப் பாதிக்கும்.
• நீங்கள் முன்னுரிமை அளிக்கும் படங்கள் அவற்றின் கோப்பு அளவைக் குறைக்க சரியாக மேம்படுத்தப்பட்டுள்ளன என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

உலகளாவிய பயன்பாடு: உலகளவில் வாசகர்களைக் கொண்ட ஒரு செய்தி வலைத்தளத்தை கற்பனை செய்து பாருங்கள். முகப்புப் பக்கத்தில் உள்ள முக்கியச் செய்திப் படம் priority-இலிருந்து கணிசமாகப் பயனடைகிறது, குறிப்பாக வளரும் நாடுகளில் மெதுவான இணைய இணைப்புகளைக் கொண்ட வாசகர்களுக்கு. இது முக்கியமான காட்சி உறுப்பு விரைவாக ஏற்றப்படுவதை உறுதிசெய்து, ஈடுபாட்டை மேம்படுத்துகிறது.

3. தனிப்பயன் பட லோடரை உள்ளமைத்தல்

இயல்பாக, Next.js இமேஜ் காம்போனென்ட் அதன் உள்ளமைக்கப்பட்ட பட மேம்படுத்தல் சேவையைப் பயன்படுத்துகிறது. இருப்பினும், ஒரு தனிப்பயன் பட லோடரை வழங்குவதன் மூலம் இந்த நடத்தையை நீங்கள் தனிப்பயனாக்கலாம். Cloudinary, Imgix போன்ற மூன்றாம் தரப்பு பட மேம்படுத்தல் சேவையைப் பயன்படுத்தும்போது அல்லது பட மேம்படுத்தல் திறன்களைக் கொண்ட ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தும்போது இது குறிப்பாகப் பயனுள்ளதாக இருக்கும்.

உதாரணம்: Cloudinary-ஐப் பயன்படுத்துதல்

முதலில், Cloudinary SDK-ஐ நிறுவவும்:

npm install cloudinary-core

பின்னர், ஒரு தனிப்பயன் லோடர் செயல்பாட்டை உருவாக்கவும்:

// utils/cloudinaryLoader.js
import { Cloudinary } from 'cloudinary-core';

const cloudinary = new Cloudinary({
  cloud_name: 'your_cloud_name',
});

export function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, 'q_auto'];
  if (quality) {
    params.push(`q_${quality}`);
  }
  return cloudinary.url(src, { transformation: params });
}

இறுதியாக, உங்கள் next.config.js கோப்பில் loader ப்ராப்பை உள்ளமைக்கவும்:

// next.config.js

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './utils/cloudinaryLoader.js',
  },
}

மற்றும் அதை உங்கள் காம்போனென்டில் பயன்படுத்தவும்:

<Image
  src="/my-image.jpg"
  alt="My Image"
  width={600}
  height={400}
  loader={cloudinaryLoader}
/>

தனிப்பயன் லோடரைப் பயன்படுத்துவதன் நன்மைகள்:

• நெகிழ்வுத்தன்மை: நீங்கள் விரும்பும் பட மேம்படுத்தல் சேவையுடன் ஒருங்கிணைக்க உங்களை அனுமதிக்கிறது.
• மேம்பட்ட மேம்படுத்தல்: மூன்றாம் தரப்பு சேவைகள் வழங்கும் மேம்பட்ட மேம்படுத்தல் அம்சங்களுக்கான அணுகலை வழங்குகிறது.
• CDN ஒருங்கிணைப்பு: நீங்கள் தேர்ந்தெடுத்த சேவையின் உலகளாவிய CDN உள்கட்டமைப்பைப் பயன்படுத்த உதவுகிறது.

உலகளாவிய பயன்பாடு: ஒரு உலகளாவிய பயண முன்பதிவுத் தளம், Akamai அல்லது Cloudflare போன்ற ஒரு CDN உடன் தனிப்பயன் லோடரைப் பயன்படுத்தலாம். பயனர் டோக்கியோ, லண்டன் அல்லது நியூயார்க்கில் இருந்தாலும், படங்கள் பயனருக்கு மிக அருகிலுள்ள சேவையகங்களிலிருந்து வழங்கப்படுவதை இது உறுதிசெய்கிறது, இது தாமதத்தை வெகுவாகக் குறைத்து ஏற்றுதல் நேரங்களை மேம்படுத்துகிறது.

4. பட வடிவங்களை மேம்படுத்துதல்: WebP மற்றும் AVIF

WebP மற்றும் AVIF போன்ற நவீன பட வடிவங்கள் JPEG மற்றும் PNG போன்ற பாரம்பரிய வடிவங்களுடன் ஒப்பிடும்போது சிறந்த சுருக்கம் மற்றும் தரத்தை வழங்குகின்றன. Next.js இமேஜ் காம்போனென்ட், உலாவி ஆதரவின் அடிப்படையில் படங்களை இந்த வடிவங்களுக்கு தானாக மாற்றும், இது கோப்பு அளவுகளை மேலும் குறைத்து செயல்திறனை மேம்படுத்துகிறது.

WebP: கூகிளால் உருவாக்கப்பட்ட ஒரு நவீன பட வடிவம், இது சிறந்த இழப்பற்ற மற்றும் இழப்புடன் கூடிய சுருக்கத்தை வழங்குகிறது. இது நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்படுகிறது.

AVIF: AV1 வீடியோ கோடெக்கை அடிப்படையாகக் கொண்ட ஒரு புதிய பட வடிவம். இது WebP-ஐ விட சிறந்த சுருக்கத்தை வழங்குகிறது, ஆனால் குறைவான பரவலான உலாவி ஆதரவைக் கொண்டுள்ளது.

தானியங்கி வடிவமைப்பு மாற்றம்: Next.js இமேஜ் காம்போனென்ட், உலாவி ஆதரித்தால் படங்களை WebP அல்லது AVIF-க்கு தானாக மாற்றுகிறது. நீங்கள் வெளிப்படையாக வடிவமைப்பைக் குறிப்பிடத் தேவையில்லை; காம்போனென்ட் அதை தானாகவே கையாள்கிறது.

உலாவி ஆதரவு: WebP மற்றும் AVIF-க்கான தற்போதைய ஆதரவைப் புரிந்துகொள்ள உலாவி இணக்கத்தன்மை அட்டவணைகளை (எ.கா., caniuse.com) சரிபார்க்கவும்.

கருத்தாய்வுகள்:

• உங்கள் பட மேம்படுத்தல் சேவை அல்லது CDN, WebP மற்றும் AVIF-ஐ ஆதரிக்கிறதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• இந்த வடிவங்களை ஆதரிக்காத பழைய உலாவிகளுக்கு ஒரு ஃபால்பேக்கை வழங்குவதைக் கருத்தில் கொள்ளுங்கள் (Next.js இமேஜ் காம்போனென்ட் பொதுவாக இதை நேர்த்தியாகக் கையாள்கிறது).

உலகளாவிய பயன்பாடு: ஒரு சர்வதேச செய்தித் திரட்டி WebP மற்றும் AVIF-இலிருந்து பெரிதும் பயனடையலாம். வெவ்வேறு பிராந்தியங்களில் மாறுபட்ட இணைய வேகங்களுடன், சிறிய படக் கோப்பு அளவுகள் வரையறுக்கப்பட்ட அலைவரிசை உள்ள பகுதிகளில் உள்ள பயனர்களுக்கு வேகமான ஏற்றுதல் நேரங்கள் மற்றும் குறைக்கப்பட்ட தரவு நுகர்வுக்கு வழிவகுக்கிறது.

5. டைனமிக் தளவமைப்புகளுக்கு `fill` மற்றும் `objectFit` ஐப் பயன்படுத்துதல்

fill ப்ராப், படத்தை அதன் பெற்றோர் கொள்கலனின் பரிமாணங்களை எடுக்க அனுமதிக்கிறது. இது பட அளவு கிடைக்கும் இடத்திற்கு ஏற்ப மாறும் வகையில் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்குவதற்கு மிகவும் பயனுள்ளதாக இருக்கும். objectFit CSS பண்புடன் இணைந்து, படம் அதன் கொள்கலனை எவ்வாறு நிரப்புகிறது என்பதைக் கட்டுப்படுத்தலாம் (எ.கா., cover, contain, fill, none, scale-down).

உதாரணம்:

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src="/my-image.jpg"
    alt="My Image"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

விளக்கம்:

• div உறுப்பு படத்திற்கான கொள்கலனாக செயல்படுகிறது மற்றும் ஒரு சார்பு நிலையைக் கொண்டுள்ளது.
• <Image> காம்போனென்டில் fill ப்ராப் அமைக்கப்பட்டுள்ளது, இது அதன் பெற்றோர் கொள்கலனின் பரிமாணங்களை எடுக்க வைக்கிறது.
• objectFit: 'cover' ஸ்டைல், படம் முழு கொள்கலனையும் உள்ளடக்குவதை உறுதி செய்கிறது, தோற்ற விகிதத்தைப் பராமரிக்க படத்தின் சில பகுதிகளை வெட்டக்கூடும்.

பயன்பாட்டு வழக்குகள்:

• முழு அகல பேனர்கள்: திரையின் முழு அகலத்தையும் பரப்பும் பதிலளிக்கக்கூடிய பேனர்களை உருவாக்குதல்.
• பின்னணிப் படங்கள்: பிரிவுகள் அல்லது கூறுகளுக்கு பின்னணிப் படங்களை அமைத்தல்.
• படக் காட்சியகங்கள்: படங்களை ஒரு கிரிட் தளவமைப்பில் காண்பித்தல், அங்கு பட அளவு கிடைக்கும் இடத்திற்கு ஏற்ப மாறுகிறது.

உலகளாவிய பயன்பாடு: தயாரிப்புகளைக் காண்பிக்கும் ஒரு பன்மொழி வலைத்தளத்திற்கு வெவ்வேறு உரை நீளங்கள் மற்றும் திரை அளவுகளுக்கு ஏற்ப ஒரு நெகிழ்வான தளவமைப்பு தேவைப்படுகிறது. fill மற்றும் objectFit ஐப் பயன்படுத்துவது, மொழி அல்லது சாதனம் எதுவாக இருந்தாலும், படங்கள் அவற்றின் காட்சி முறையீட்டைப் பராமரித்து, தளவமைப்பில் தடையின்றிப் பொருந்துவதை உறுதி செய்கிறது.

6. குறிப்பிட்ட சூழ்நிலைகளுக்காக `unoptimized` ப்ராப்பை உள்ளமைத்தல்

அரிதான சந்தர்ப்பங்களில், குறிப்பிட்ட படங்களுக்கு தானியங்கி பட மேம்படுத்தலை முடக்க நீங்கள் விரும்பலாம். உதாரணமாக, உங்களிடம் ஏற்கனவே அதிக அளவில் மேம்படுத்தப்பட்ட ஒரு படம் இருக்கலாம் அல்லது அதை எந்தவிதமான கூடுதல் செயலாக்கமும் இல்லாமல் நேரடியாக ஒரு CDN-இலிருந்து வழங்க விரும்பலாம். unoptimized ப்ராப்பை true என அமைப்பதன் மூலம் இதை நீங்கள் அடையலாம்.

உதாரணம்:

<Image
  src="/already-optimized.png"
  alt="Already Optimized Image"
  width={800}
  height={600}
  unoptimized={true}
/>

எப்போது பயன்படுத்த வேண்டும்:

• ஏற்கனவே மேம்படுத்தப்பட்ட படங்கள்: ஒரு மூன்றாம் தரப்பு கருவி அல்லது சேவையைப் பயன்படுத்தி ஏற்கனவே மேம்படுத்தப்பட்ட படங்கள்.
• நேரடியாக ஒரு CDN-இலிருந்து வழங்கப்படும் படங்கள்: எந்தவிதமான கூடுதல் செயலாக்கமும் இல்லாமல் நேரடியாக ஒரு CDN-இலிருந்து வழங்கப்படும் படங்கள்.
• சிறப்பு பட வடிவங்கள்: Next.js இமேஜ் காம்போனென்டால் ஆதரிக்கப்படாத சிறப்பு வடிவங்களைப் பயன்படுத்தும் படங்கள்.

எச்சரிக்கை:

• unoptimized ப்ராப்பை குறைவாகப் பயன்படுத்துங்கள், ஏனெனில் இது அனைத்து தானியங்கி பட மேம்படுத்தல் அம்சங்களையும் முடக்குகிறது.
• நீங்கள் unoptimized எனக் குறிக்கும் படங்கள் அவற்றின் கோப்பு அளவைக் குறைக்க ஏற்கனவே சரியாக மேம்படுத்தப்பட்டுள்ளன என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

உலகளாவிய பயன்பாடு: புகைப்படக் கலைஞர்கள் தங்கள் படைப்புகளைக் காண்பிக்கும் ஒரு வலைத்தளத்தைக் கவனியுங்கள். அவர்கள் குறிப்பிட்ட வண்ண சுயவிவரங்களில் அல்லது Next.js ஆப்டிமைசர் மாற்றக்கூடிய துல்லியமான அமைப்புகளுடன் படங்களை வழங்க விரும்பலாம். unoptimized ஐப் பயன்படுத்துவது, அவர்கள் தங்கள் படங்களை விரும்பியபடி வழங்க கட்டுப்பாட்டை வழங்குகிறது.

7. மேம்பட்ட உணரப்பட்ட செயல்திறனுக்காக `blurDataURL`-ஐப் பயன்படுத்துதல்

blurDataURL ப்ராப், உண்மையான படம் ஏற்றப்படும்போது ஒரு குறைந்த தெளிவுத்திறன் கொண்ட ப்ளேஸ்ஹோல்டர் படத்தைக் காண்பிக்க உங்களை அனுமதிக்கிறது. இது பக்கம் காலியாகவோ அல்லது பதிலளிக்காமலோ தோன்றுவதைத் தடுத்து, ஏதோ ஒன்று ஏற்றப்படுகிறது என்ற காட்சி குறிப்பைக் கொடுத்து, பயனரின் உணரப்பட்ட செயல்திறனை கணிசமாக மேம்படுத்தும். Next.js 13 மற்றும் பிந்தைய பதிப்புகள் பெரும்பாலும் இதை தானாகவே கையாள்கின்றன.

உதாரணம்:

முதலில், உங்கள் படத்திலிருந்து ஒரு பிளர் டேட்டா URL-ஐ BlurHash போன்ற ஒரு கருவி அல்லது அதுபோன்ற சேவையைப் பயன்படுத்தி உருவாக்கவும். இது உங்கள் படத்தின் மங்கலான பதிப்பைக் குறிக்கும் ஒரு சிறிய, base64-குறியிடப்பட்ட சரத்தை உங்களுக்கு வழங்கும்.

<Image
  src="/my-image.jpg"
  alt="My Image"
  width={600}
  height={400}
  placeholder="blur"
  blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
/>

நன்மைகள்:

• மேம்பட்ட உணரப்பட்ட செயல்திறன்: ஏதோ ஒன்று ஏற்றப்படுகிறது என்ற காட்சி குறிப்பை வழங்குகிறது.
• மேம்பட்ட பயனர் அனுபவம்: பக்கம் காலியாகவோ அல்லது பதிலளிக்காமலோ தோன்றுவதைத் தடுக்கிறது.
• குறைக்கப்பட்ட தளவமைப்பு மாற்றம்: படத்திற்கு இடத்தை ஒதுக்குவதன் மூலம் தளவமைப்பு மாற்றத்தைத் தடுக்க உதவுகிறது.

உலகளாவிய பயன்பாடு: பிரமிக்க வைக்கும் புகைப்படங்களுடன் இடங்களைக் காண்பிக்கும் ஒரு சர்வதேச பயண வலைப்பதிவு. blurDataURL ஐப் பயன்படுத்துவது மெதுவான நெட்வொர்க்குகளில் உள்ள பயனர்களுக்குக் கூட ஒரு மென்மையான ஏற்றுதல் அனுபவத்தை வழங்குகிறது, இது ஒரு நேர்மறையான முதல் தோற்றத்தை உருவாக்கி, உள்ளடக்கத்தை ஆராய அவர்களை ஊக்குவிக்கிறது.

உலகளாவிய பட மேம்படுத்தலுக்கான சிறந்த நடைமுறைகள்

ஒரு உலகளாவிய பார்வையாளர்களுக்கு உகந்த பட செயல்திறனை உறுதிப்படுத்த, இந்த சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• சரியான பட வடிவமைப்பைத் தேர்வு செய்யவும்: நவீன உலாவிகளுக்கு WebP அல்லது AVIF-ஐப் பயன்படுத்தவும், பழைய உலாவிகளுக்கு ஃபால்பேக்குகளை வழங்கவும்.
• பட அளவை மேம்படுத்தவும்: இலக்கு காட்சி அளவிற்குப் பொருத்தமான பரிமாணங்களுக்கு படங்களை மறுஅளவிடவும்.
• படங்களை சுருக்கவும்: கோப்பு அளவைக் குறைக்க இழப்பற்ற அல்லது இழப்புடன் கூடிய சுருக்கத்தைப் பயன்படுத்தவும்.
• சோம்பல் ஏற்றுதலைப் பயன்படுத்தவும்: படங்கள் வியூபோர்ட்டிற்குள் நுழையும்போது மட்டுமே அவற்றை ஏற்றவும்.
• முக்கியமான படங்களுக்கு முன்னுரிமை அளிக்கவும்: ஆரம்ப பக்க ஏற்றுதலுக்கு முக்கியமான படங்களை முன்கூட்டியே ஏற்றவும்.
• ஒரு CDN-ஐப் பயன்படுத்தவும்: பயனருக்கு மிக அருகிலுள்ள சேவையகங்களிலிருந்து படங்களை வழங்க ஒரு CDN-ஐப் பயன்படுத்தவும்.
• செயல்திறனைக் கண்காணிக்கவும்: Google PageSpeed Insights மற்றும் WebPageTest போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் வலைத்தளத்தின் செயல்திறனைத் தவறாமல் கண்காணிக்கவும்.

முடிவுரை

Next.js இமேஜ் காம்போனென்ட் வலைக்கான படங்களை மேம்படுத்துவதற்கு ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான தீர்வை வழங்குகிறது. அதன் மேம்பட்ட அம்சங்களைப் பயன்படுத்துவதன் மூலம், உங்கள் உலகளாவிய பார்வையாளர்களுக்கு வேகமான ஏற்றுதல் நேரங்கள், குறைக்கப்பட்ட அலைவரிசை நுகர்வு, மற்றும் ஒட்டுமொத்தமாக மேம்பட்ட பயனர் அனுபவத்தை வழங்க முடியும். sizes ப்ராப்பை மாஸ்டரிங் செய்வது மற்றும் priority-ஐப் பயன்படுத்துவது முதல் தனிப்பயன் லோடர்களை உள்ளமைப்பது மற்றும் பட வடிவங்களை மேம்படுத்துவது வரை, இந்த வழிகாட்டி எந்தவொரு சாதனத்திலும் மற்றும் எந்த இடத்திலும் சிறப்பாகச் செயல்படும் உண்மையிலேயே மேம்படுத்தப்பட்ட படங்களை உருவாக்கத் தேவையான அறிவையும் கருவிகளையும் உங்களுக்கு வழங்கியுள்ளது.

உங்கள் வலைத்தளத்தின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, உங்கள் பயனர்களுக்கு சிறந்த அனுபவத்தை வழங்குவதை உறுதிசெய்ய, தேவைக்கேற்ப உங்கள் பட மேம்படுத்தல் உத்திகளை மாற்றியமைக்க நினைவில் கொள்ளுங்கள்.