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

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

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

பட மேம்படுத்தல் ஏன் முக்கியம்

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

• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் ஒரு மென்மையான மற்றும் மிகவும் சுவாரஸ்யமான பயனர் அனுபவத்திற்கு வழிவகுக்கிறது, இது விரக்தியைக் குறைத்து பயனர்களை உங்கள் தளத்தில் இருக்க ஊக்குவிக்கிறது.
• மேம்படுத்தப்பட்ட SEO: கூகிள் போன்ற தேடுபொறிகள் நல்ல செயல்திறன் கொண்ட வலைத்தளங்களுக்கு முன்னுரிமை அளிக்கின்றன. மேம்படுத்தப்பட்ட படங்கள் வேகமான பக்க ஏற்றுதல் நேரங்களுக்கு பங்களிக்கின்றன, இது உங்கள் தேடுபொறி தரவரிசைகளில் சாதகமான தாக்கத்தை ஏற்படுத்தும்.
• குறைக்கப்பட்ட பவுன்ஸ் விகிதம்: மெதுவாக ஏற்றப்படும் வலைத்தளம் பார்வையாளர்களை விரைவாகத் தடுக்கக்கூடும். பட மேம்படுத்தல் பவுன்ஸ் விகிதங்களைக் குறைக்க உதவுகிறது, பயனர்களை உங்கள் உள்ளடக்கத்துடன் ஈடுபட வைக்கிறது.
• குறைந்த அலைவரிசை செலவுகள்: மேம்படுத்தப்பட்ட படங்கள் அளவில் சிறியவை, உங்கள் வலைத்தளத்தை ஏற்றுவதற்குத் தேவையான அலைவரிசையின் அளவைக் குறைக்கிறது. இது குறிப்பிடத்தக்க செலவு சேமிப்புக்கு வழிவகுக்கும், குறிப்பாக அதிக போக்குவரத்து கொண்ட வலைத்தளங்களுக்கு.
• மேம்படுத்தப்பட்ட Core Web Vitals: பட மேம்படுத்தல் Largest Contentful Paint (LCP) மற்றும் Cumulative Layout Shift (CLS) போன்ற முக்கிய Core Web Vitals அளவீடுகளில் நேரடியாகத் தாக்கத்தை ஏற்படுத்துகிறது, இது கூகிளின் தரவரிசை வழிமுறைக்கு முக்கியமானது.

Next.js Image கூறை அறிமுகப்படுத்துதல்

Next.js Image கூறு (next/image) என்பது நிலையான <img> HTML உறுப்புக்கு ஒரு சக்திவாய்ந்த மாற்றாகும். இது படங்களைத் தானாக மேம்படுத்தி வலைத்தள செயல்திறனை மேம்படுத்துவதற்காக வடிவமைக்கப்பட்ட பல அம்சங்களை வழங்குகிறது. அதன் முக்கிய நன்மைகளின் ஒரு முறிவு இங்கே:

• தானியங்கி பட மேம்படுத்தல்: Next.js படங்களை மறுஅளவிடுவதன் மூலமும், சுருக்குவதன் மூலமும், WebP மற்றும் AVIF (உலாவியால் ஆதரிக்கப்பட்டால்) போன்ற நவீன வடிவங்களில் வழங்குவதன் மூலமும் தானாகவே மேம்படுத்துகிறது.
• சோம்பேறி ஏற்றுதல் (Lazy Loading): படங்கள் பார்வைக்கு வந்தவுடன் மட்டுமே ஏற்றப்படுகின்றன, இது ஆரம்ப பக்க ஏற்றுதல் நேரத்தைக் குறைத்து அலைவரிசையைச் சேமிக்கிறது.
• பதிலளிக்கக்கூடிய படங்கள் (Responsive Images): Image கூறு வெவ்வேறு திரை அளவுகள் மற்றும் சாதனத் தீர்மானங்களுக்கு உகந்த படத்தைச் சேவை செய்ய தானாகவே பல பட அளவுகளை உருவாக்க முடியும்.
• தளவமைப்பு மாற்றத்தைத் தடுத்தல்: width மற்றும் height பண்புக்கூறுகள் தேவைப்படுவதன் மூலம், Image கூறு படம் ஏற்றப்படுவதற்கு முன்பு அதற்கான இடத்தை ஒதுக்குகிறது, இது தளவமைப்பு மாற்றங்களைத் தடுத்து Cumulative Layout Shift (CLS) மதிப்பெண்ணை மேம்படுத்துகிறது.
• உள்ளமைக்கப்பட்ட CDN ஆதரவு: Next.js பிரபலமான CDN களுடன் (உள்ளடக்க விநியோக நெட்வொர்க்குகள்) தடையின்றி ஒருங்கிணைந்து பட விநியோகத்தை மேலும் துரிதப்படுத்துகிறது.

Image கூறுடன் தொடங்குதல்

Image கூறினைப் பயன்படுத்த, நீங்கள் முதலில் அதை next/image இலிருந்து இறக்குமதி செய்ய வேண்டும்:

import Image from 'next/image';

பின்னர், உங்கள் நிலையான <img> குறிச்சொற்களை Image கூறுடன் மாற்றலாம்:

<Image
  src="/images/my-image.jpg"
  alt="My Image"
  width={500}
  height={300}
/>

முக்கியம்: width மற்றும் height பண்புக்கூறுகளைக் கவனியுங்கள். தளவமைப்பு மாற்றத்தைத் தடுக்க Image கூறுக்கு இவை தேவை. உங்கள் படத்தின் சரியான பரிமாணங்களைக் குறிப்பிடுவதை உறுதிசெய்யவும்.

எடுத்துக்காட்டு: ஒரு சுயவிவரப் படத்தைக் காண்பித்தல்

உங்கள் இணையதளத்தில் ஒரு சுயவிவரப் படத்தைக் காட்ட விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்:

import Image from 'next/image';

function Profile() {
  return (
    <div>
      <Image
        src="/images/profile.jpg"
        alt="My Profile Picture"
        width={150}
        height={150}
        style={{ borderRadius: '50%' }} // விருப்பத்தேர்வு: ஒரு வட்டமான சுயவிவரப் படத்திற்கான பாணியைச் சேர்க்கவும்
      />
      <p>Welcome to my profile!</p>
    </div>
  );
}

export default Profile;

இந்த எடுத்துக்காட்டில், நாம் profile.jpg என்ற படத்தை 150 பிக்சல்கள் அகலம் மற்றும் உயரத்துடன் காட்டுகிறோம். ஒரு வட்டமான சுயவிவரப் படத்தை உருவாக்க சில விருப்ப பாணிகளையும் சேர்த்துள்ளோம்.

Next.js இல் பட மேம்படுத்தல் உத்திகளைப் புரிந்துகொள்ளுதல்

Next.js உங்கள் படங்களைத் தானாக மேம்படுத்த பல முக்கிய உத்திகளைப் பயன்படுத்துகிறது:

1. மறுஅளவிடுதல் மற்றும் சுருக்குதல்

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

<Image
  src="/images/my-image.jpg"
  alt="My Image"
  width={500}
  height={300}
  quality={75} // சுருக்கத் தரத்தை சரிசெய்யவும் (0-100, இயல்புநிலை 75)
/>

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

2. நவீன பட வடிவங்கள் (WebP மற்றும் AVIF)

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

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

Next.js வடிவமைப்புத் தேர்வை தானாகவே கையாளுகிறது, பயனர்கள் தங்கள் உலாவி திறன்களின் அடிப்படையில் உகந்த பட வடிவத்தைப் பெறுவதை உறுதி செய்கிறது. இந்த அம்சத்திற்கு உங்கள் `next.config.js` கோப்பில் ஒரு பட மேம்படுத்தல் API கட்டமைக்கப்பட்டிருக்க வேண்டும். இயல்புநிலை கட்டமைப்பு Next.js பட மேம்படுத்தல் API ஐப் பயன்படுத்துகிறது, ஆனால் Cloudinary அல்லது Imgix போன்ற மூன்றாம் தரப்பு வழங்குநரைப் பயன்படுத்த நீங்கள் அதை கட்டமைக்கலாம்.

3. சோம்பேறி ஏற்றுதல் (Lazy Loading)

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

loading பண்பைப் பயன்படுத்தி சோம்பேறி ஏற்றுதல் நடத்தையை நீங்கள் தனிப்பயனாக்கலாம்:

<Image
  src="/images/my-image.jpg"
  alt="My Image"
  width={500}
  height={300}
  loading="lazy" // சோம்பேறி ஏற்றுதலை இயக்கு (இயல்புநிலை)
  // loading="eager" // சோம்பேறி ஏற்றுதலை முடக்கு (படத்தை உடனடியாக ஏற்று)
/>

சோம்பேறி ஏற்றுதல் பொதுவாக பரிந்துரைக்கப்பட்டாலும், ஹீரோ படங்கள் அல்லது லோகோக்கள் போன்ற ஆரம்ப பக்க ஏற்றுதலுக்கு முக்கியமான படங்களுக்கு அதை முடக்க நீங்கள் விரும்பலாம்.

4. sizes பண்புடன் பதிலளிக்கக்கூடிய படங்கள்

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

<Image
  src="/images/my-image.jpg"
  alt="My Image"
  width={1200} // அசல் படத்தின் அகலம்
  height={800}  // அசல் படத்தின் உயரம்
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

sizes பண்பு மதிப்பை உடைப்போம்:

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

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

Next.js பட மேம்படுத்தல் API ஐ கட்டமைத்தல்

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

இயல்புநிலை Next.js பட மேம்படுத்தல் API ஐப் பயன்படுத்துதல்

இயல்புநிலை Next.js பட மேம்படுத்தல் API பயன்படுத்த எளிதானது மற்றும் எந்த கட்டமைப்பும் தேவையில்லை. இது உருவாக்க செயல்முறையின் போது படங்களைத் தானாக மேம்படுத்தி Next.js சேவையகத்திலிருந்து வழங்குகிறது.

மூன்றாம் தரப்பு பட மேம்படுத்தல் வழங்குநரை கட்டமைத்தல்

ஒரு மூன்றாம் தரப்பு பட மேம்படுத்தல் வழங்குநரை கட்டமைக்க, உங்கள் next.config.js கோப்பை நீங்கள் புதுப்பிக்க வேண்டும். Cloudinary ஐ எவ்வாறு கட்டமைப்பது என்பதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['res.cloudinary.com'], // உங்கள் Cloudinary டொமைனைச் சேர்க்கவும்
  },
}

module.exports = nextConfig

இந்த கட்டமைப்பு Next.js க்கு பட மேம்படுத்தலுக்கு Cloudinary ஐப் பயன்படுத்தச் சொல்கிறது. நீங்கள் பயன்படுத்த விரும்பும் பட மாற்றங்களைக் குறிப்பிட Cloudinary இன் URL வடிவமைப்பையும் நீங்கள் பயன்படுத்த வேண்டும். நீங்கள் Cloudinary SDK ஐயும் நிறுவ வேண்டும்:

npm install cloudinary

இப்போது, உங்கள் படங்கள் Cloudinary ஆல் மேம்படுத்தப்பட்டு வழங்கப்படும்.

Imgix மற்றும் Akamai போன்ற பிற பட மேம்படுத்தல் வழங்குநர்களுக்கும் இதே போன்ற கட்டமைப்புகள் கிடைக்கின்றன. விரிவான வழிமுறைகளுக்கு அந்தந்த ஆவணங்களைப் பார்க்கவும்.

மேம்பட்ட பட மேம்படுத்தல் நுட்பங்கள்

Image கூறின் அடிப்படை அம்சங்களுக்கு அப்பால், உங்கள் படங்களை மேலும் மேம்படுத்த பல மேம்பட்ட நுட்பங்களைப் பயன்படுத்தலாம்:

1. ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்துதல்

ஒரு CDN (உள்ளடக்க விநியோக நெட்வொர்க்) என்பது உலகம் முழுவதும் விநியோகிக்கப்பட்ட சேவையகங்களின் ஒரு நெட்வொர்க் ஆகும், இது படங்கள் உட்பட உங்கள் வலைத்தளத்தின் நிலையான சொத்துக்களை தற்காலிகமாக சேமித்து வழங்குகிறது. ஒரு CDN ஐப் பயன்படுத்துவது தாமதத்தைக் குறைப்பதன் மூலமும், பயனருக்கு நெருக்கமான ஒரு சேவையகத்திலிருந்து படங்களை வழங்குவதன் மூலமும் வலைத்தள செயல்திறனை கணிசமாக மேம்படுத்த முடியும்.

பிரபலமான CDN வழங்குநர்கள் பின்வருமாறு:

• Cloudflare
• Amazon CloudFront
• Akamai
• Fastly

பெரும்பாலான CDN வழங்குநர்கள் Next.js உடன் எளிதான ஒருங்கிணைப்பை வழங்குகிறார்கள். உங்கள் படங்களை தற்காலிகமாக சேமித்து வழங்க உங்கள் CDN ஐ கட்டமைக்கலாம், அவற்றின் விநியோகத்தை மேலும் துரிதப்படுத்தலாம்.

2. SVG படங்களை மேம்படுத்துதல்

SVG (அளவிடக்கூடிய வெக்டர் கிராபிக்ஸ்) படங்கள் வெக்டர் அடிப்படையிலான படங்கள் ஆகும், அவை தரத்தை இழக்காமல் அளவிடப்படலாம். அவை பெரும்பாலும் லோகோக்கள், ஐகான்கள் மற்றும் பிற கிராபிக்ஸ்களுக்குப் பயன்படுத்தப்படுகின்றன. SVG படங்கள் பொதுவாக அளவில் சிறியதாக இருந்தாலும், மேலும் செயல்திறன் ஆதாயங்களுக்காக அவை இன்னும் மேம்படுத்தப்படலாம்.

SVG படங்களை மேம்படுத்துவதற்கான சில குறிப்புகள் இங்கே:

• பாதைகள் மற்றும் வடிவங்களின் எண்ணிக்கையைக் குறைத்தல்: பல பாதைகள் மற்றும் வடிவங்களைக் கொண்ட சிக்கலான SVG படங்கள் அளவில் பெரியதாக இருக்கலாம். உறுப்புகளின் எண்ணிக்கையைக் குறைப்பதன் மூலம் உங்கள் SVG படங்களை எளிதாக்குங்கள்.
• பாணிக்கு CSS ஐப் பயன்படுத்துதல்: SVG குறியீட்டில் நேரடியாக பாணிகளை உட்பொதிப்பதற்குப் பதிலாக, உங்கள் SVG படங்களை பாணியாக்க CSS ஐப் பயன்படுத்தவும். இது SVG கோப்பின் அளவைக் குறைத்து பராமரிப்பை மேம்படுத்தலாம்.
• உங்கள் SVG படங்களை சுருக்குதல்: உங்கள் SVG படங்களை சுருக்க SVGO (SVG Optimizer) போன்ற ஒரு கருவியைப் பயன்படுத்தவும். SVGO தேவையற்ற மெட்டாடேட்டாவை நீக்கி SVG குறியீட்டை மேம்படுத்துகிறது, கோப்பு அளவைக் குறைக்கிறது.

3. பட ஒதுக்கிடங்கள் (மங்கலான விளைவு)

படங்கள் ஏற்றப்படும்போது பட ஒதுக்கிடங்கள் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்க முடியும். ஒரு பிரபலமான நுட்பம் "மங்கலான விளைவு" ஆகும், அங்கு படத்தின் குறைந்த தெளிவுத்திறன், மங்கலான பதிப்பு ஒரு ஒதுக்கிடமாக காட்டப்படுகிறது, பின்னர் அது ஏற்றப்படும்போது படிப்படியாக முழு தெளிவுத்திறன் படத்தால் மாற்றப்படுகிறது.

Next.js Image கூறு placeholder பண்பு மற்றும் `blurDataURL` பண்பைப் பயன்படுத்தி பட ஒதுக்கிடங்களுக்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது, `placeholder` பண்புக்கு `blur` மதிப்புடன்.

import Image from 'next/image';
import { useState, useEffect } from 'react';

function MyComponent() {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    async function loadImage() {
      // ஒரு API இலிருந்து படம் மற்றும் அதன் blurDataURL ஐப் பெறுவதை உருவகப்படுத்துங்கள்
      const imageData = await fetchImageData('/images/my-image.jpg'); // உங்கள் API முனையத்துடன் மாற்றவும்
      setImageSrc(imageData);
    }

    loadImage();
  }, []);

  // படத் தரவைப் பெறுவதை உருவகப்படுத்த போலி செயல்பாடு (உங்கள் உண்மையான API அழைப்புடன் மாற்றவும்)
  async function fetchImageData(imagePath) {
    // ஒரு உண்மையான பயன்பாட்டில், நீங்கள் ஒரு API இலிருந்து படத் தரவைப் பெறுவீர்கள்.
    // இந்த எடுத்துக்காட்டிற்கு, நாங்கள் ஒரு blurDataURL உடன் ஒரு போலி பொருளைத் திருப்புவோம்.
    // நீங்கள் "plaiceholder" அல்லது "blurhash" போன்ற நூலகங்களைப் பயன்படுத்தி blurDataURL ஐ உருவாக்கலாம்.
    return {
      src: imagePath,
      blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', // உங்கள் உண்மையான blurDataURL உடன் மாற்றவும்
    };
  }

  if (!imageSrc) {
    return <div>Loading...</div>;
  }

  return (
    <Image
      src={imageSrc.src}
      alt="My Image"
      width={500}
      height={300}
      placeholder="blur" // மங்கலான ஒதுக்கிடத்தை இயக்கு
      blurDataURL={imageSrc.blurDataURL} // blurDataURL ஐ வழங்கவும்
    />
  );
}

export default MyComponent;

இந்த எடுத்துக்காட்டில், மங்கலான ஒதுக்கிட விளைவை இயக்க placeholder="blur" பண்பைப் பயன்படுத்துகிறோம். நாங்கள் blurDataURL பண்பையும் வழங்குகிறோம், இது மங்கலான படத்தின் base64-குறியிடப்பட்ட பிரதிநிதித்துவமாகும். நீங்கள் plaiceholder அல்லது blurhash போன்ற நூலகங்களைப் பயன்படுத்தி blurDataURL ஐ உருவாக்கலாம். width மற்றும் height பண்புகள் படத்தின் அசல் பரிமாணங்களைப் பிரதிபலிக்க வேண்டும்.

பட மேம்படுத்தல் செயல்திறனை அளவிடுதல் மற்றும் கண்காணித்தல்

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

1. Google PageSpeed Insights

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

2. WebPageTest

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

3. Lighthouse

Lighthouse என்பது வலைப் பக்கங்களின் தரத்தை மேம்படுத்துவதற்கான ஒரு திறந்த மூல, தானியங்கு கருவியாகும். நீங்கள் அதை Chrome DevTools இல் அல்லது ஒரு Node கட்டளை-வரி கருவியாக இயக்கலாம். Lighthouse செயல்திறன், அணுகல், முற்போக்கான வலை பயன்பாடுகள், SEO மற்றும் பலவற்றிற்கான தணிக்கைகளை வழங்குகிறது. இது பட மேம்படுத்தலுக்கான குறிப்பிட்ட பரிந்துரைகளையும் வழங்குகிறது.

4. Core Web Vitals

Core Web Vitals என்பது உங்கள் வலைத்தளத்தின் பயனர் அனுபவத்தை அளவிடும் அளவீடுகளின் ஒரு தொகுப்பாகும். அவை பின்வருமாறு:

• Largest Contentful Paint (LCP): பக்கத்தில் உள்ள மிகப்பெரிய உள்ளடக்க உறுப்பு தெரியும் வரை ஆகும் நேரத்தை அளவிடுகிறது.
• First Input Delay (FID): முதல் பயனர் தொடர்புக்கு உலாவி பதிலளிக்க ஆகும் நேரத்தை அளவிடுகிறது.
• Cumulative Layout Shift (CLS): பக்கத்தில் ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது.

பட மேம்படுத்தல் LCP மற்றும் CLS ஐ கணிசமாக பாதிக்கலாம். உங்கள் படங்களை மேம்படுத்துவதன் மூலம், உங்கள் Core Web Vitals மதிப்பெண்களை மேம்படுத்தி ஒரு சிறந்த பயனர் அனுபவத்தை வழங்க முடியும்.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

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

• width மற்றும் height குறிப்பிடாதது: width மற்றும் height பண்புக்கூறுகளைக் குறிப்பிடத் தவறினால் தளவமைப்பு மாற்றங்கள் மற்றும் ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.
• தேவையற்ற பெரிய படங்களைப் பயன்படுத்துதல்: உங்கள் வலைத்தளத்தில் பதிவேற்றுவதற்கு முன்பு எப்போதும் உங்கள் படங்களை பொருத்தமான பரிமாணங்களுக்கு மறுஅளவிடவும்.
• படங்களை அதிகமாக சுருக்குதல்: சுருக்கம் முக்கியம் என்றாலும், படங்களை அதிகமாக சுருக்குவது காட்சித் தரத்தை இழக்க வழிவகுக்கும்.
• நவீன பட வடிவங்களைப் பயன்படுத்தாதது: சிறந்த சுருக்கம் மற்றும் தரத்திற்காக WebP மற்றும் AVIF போன்ற நவீன பட வடிவங்களைப் பயன்படுத்திக் கொள்வதை உறுதிப்படுத்தவும்.
• CDN ஒருங்கிணைப்பைப் புறக்கணித்தல்: ஒரு CDN ஐப் பயன்படுத்துவது பட விநியோக வேகத்தை கணிசமாக மேம்படுத்தும்.

Next.js பட மேம்படுத்தல் வெற்றியின் நிஜ உலக எடுத்துக்காட்டுகள்

பல நிறுவனங்கள் தங்கள் வலைத்தள செயல்திறனை மேம்படுத்த Next.js பட மேம்படுத்தலை வெற்றிகரமாக செயல்படுத்தியுள்ளன. சில எடுத்துக்காட்டுகள் இங்கே:

• Vercel.com: Vercel, Next.js க்குப் பின்னால் உள்ள நிறுவனம், தங்கள் இணையதளத்தில் Next.js இன் பட மேம்படுத்தல் அம்சங்களை விரிவாகப் பயன்படுத்துகிறது. அவர்களின் இணையதளம் நம்பமுடியாத அளவிற்கு வேகமாக ஏற்றப்படுகிறது, இது ஒரு மென்மையான மற்றும் சுவாரஸ்யமான பயனர் அனுபவத்தை வழங்குகிறது.
• TikTok: TikTok அதன் சில வலைப் பண்புகளுக்கு Next.js ஐப் பயன்படுத்துகிறது மற்றும் பயனர் உருவாக்கிய காட்சி உள்ளடக்கத்தை பெரிதும் நம்பியிருக்கும் ஒரு தளத்திற்கு குறிப்பாக முக்கியமான, வேகமான மற்றும் ஈர்க்கக்கூடிய அனுபவத்தை வழங்க பட மேம்படுத்தல் திறன்களைப் பயன்படுத்துகிறது.
• Hulu: Hulu அதன் வலைப் பயன்பாட்டின் சில பகுதிகளுக்கு Next.js ஐப் பயன்படுத்துகிறது மற்றும் மேம்படுத்தப்பட்ட பட விநியோகத்தால் வழங்கப்படும் செயல்திறன் மேம்பாடுகளிலிருந்து பயனடைகிறது, இது ஒரு தடையற்ற ஸ்ட்ரீமிங் அனுபவத்திற்கு பங்களிக்கிறது.

இந்த எடுத்துக்காட்டுகள் Next.js பட மேம்படுத்தல் வலைத்தள செயல்திறன் மற்றும் பயனர் அனுபவத்தில் ஏற்படுத்தக்கூடிய குறிப்பிடத்தக்க தாக்கத்தை நிரூபிக்கின்றன.

முடிவுரை

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

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

Next.js பட மேம்படுத்தலின் ஆற்றலைத் தழுவி, உங்கள் வலைத்தளத்தின் முழு திறனையும் திறக்கவும்!