next/image is comhairsitheoireacht dhoshachtaithe Next.js ar an chlib <img>. Cuireann sé i bhfeidhm go huathoibríoch sraith de dhea-chleachtas feidhmíochta íomhá a bhí orthu a chur i bhfeidhm de láimh ar dhóigh eile.
;
() {
(
);
}
srcset freagartha — gineann go leor méideanna ionas go bhfaigheann gach gléas an ceann ceart.priority).width/height riachtanach (nó fill) spás ionas nach léimeann an leathanach nuair a bhíonn an íomhá á lódáil.placeholder="blur" a thaispeáint beagáiríomhá doiléire ar leith a bhíonn á lódáil.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Bainfidh tú úsáid as fill (in ionad leithead/airde socraithe) nuair ba cheart don íomhá a tuiseal a thuiseal a athlódáil — coitianta d'íomhá hero/chlúdaigh.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Is iad íomhánna go hiondúil na sócmhainní is troime ar leathanach agus príomhchúis do dhrochdhlúthshuim Vital Gréine (LCP, CLS). next/image uathoibrithe athmhéadú, formáidí nua-aimseartha, srcset freagartha, ualú dúnmharú, agus cosc ar dhíbirt leagan amach — ag athrú taisc feidhmíochta mór i gcomhpháirt singil, le priority an íomhá LCP a bheith an cnag aonair a gcaithfidh tú a bhheith i do chuimhne.