next/image என்பது <img> குறிச்சொல்லுக்கான Next.js இன் உகந்த மாற்றாகும். இது தானாக பல பட செயல்திறன் சிறந்த பழக்கவழக்கங்களைப் பயன்படுத்துகிறது, இல்லையெனில் நீங்கள் கையால் செயல்படுத்த வேண்டும்.
tsx
;
() {
(
);
}
next/image என்பது <img> குறிச்சொல்லுக்கான Next.js இன் உகந்த மாற்றாகும். இது தானாக பல பட செயல்திறன் சிறந்த பழக்கவழக்கங்களைப் பயன்படுத்துகிறது, இல்லையெனில் நீங்கள் கையால் செயல்படுத்த வேண்டும்.
;
() {
(
);
}
srcset — பல அளவுகளை உত்பன்னம் செய்கிறது, இதனால் ஒவ்வொரு சாதனமும் சரியான ஒன்றை பதிவிறக்கம் செய்கிறது.priority உடன் மேலெழுத்து செய்யவும்).width/height (அல்லது fill) இடம் இருப்பு செய்கிறது, எனவே படம் ஏற்றப்பட்டதும் பக்கம் குதிக்கவில்லை.placeholder="blur" ஏற்றும் போது ஒரு சிறிய மங்கலான முன்பார்வை காட்டுகிறது.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
பட அதன் நிலைப்படுத்திய பெற்றோரை நிரப்ப வேண்டும் போது fill ஐப் பயன்படுத்தவும் (நிலையான அகலம்/உயரத்திற்கு பதிலாக) — கீழ்ப்பாணி/கவர் பட்டங்களுக்கு பொதுவானது.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
படங்கள் வழக்கமாக ஒரு பக்கத்தில் மிகவும் கனமான சম்பத்துக்கள் மற்றும் மோசமான Core Web Vitals (LCP, CLS) ஐ ஏற்படுத்தும் முதன்மை காரணம். next/image மறுவடிவமைப்பு, நவீன வடிவமைப்புகள், பதிலளிக்கக்கூடிய srcset, சோம்பு ஏற்றுதல் மற்றும் தளவமைப்பு மாற்ற தடுப்பு — பெரிய செயல்திறன் பணிக்கு ஒரு ஒক்க கூறைப் பயன்படுத்துகிறது, இங்கு LCP பட்டத்திற்கான priority நீங்கள் நினைவில் கொள்ள வேண்டிய ஒரேயொரு கைப்பிடி ஆகும்.