next/image hu l-permutazzjoni ottimizzata ta' Next.js għat-tag <img>. Applika awtomatikament stack ta' prattiki tajba tal-prestazzjoni tal-immaġini li għal kuntrast kienu timplimentaw b'mod manwali.
tsx
;
() {
(
);
}
next/image hu l-permutazzjoni ottimizzata ta' Next.js għat-tag <img>. Applika awtomatikament stack ta' prattiki tajba tal-prestazzjoni tal-immaġini li għal kuntrast kienu timplimentaw b'mod manwali.
;
() {
(
);
}
srcset responsiv — iġġenera daqq multipli sabiex kull apparat idownloada dik it-tajba.priority).width/height meħtieġ (jew fill) jirriservaw spazju sabiex il-paġna ma titlunbax meta l-immaġini tatagħbela.placeholder="blur" turi preview żgħir blurr waqt il-tagħbija.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Uża fill (minflok wisa'/għoli fissi) meta l-immaġini għandha timpla l-ġenitur ippoċizzjonat tagħha — komuni għal immaġini hero/cover.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Immaġini huma normalment l-akbar assi fuq paġna u kawża ewlenija ta' Core Web Vitals dgħajjaf (LCP, CLS). next/image tawtomatizza l-bidla tad-daqs, formati moderni, srcset responsiv, tagħbija bla ħmira, u prevenzjoni tal-bidla tal-layout — tibdel kumpitu ta' prestazzjoni ewlieni f'komponent wieħed, b' priority għall-immaġini LCP li tkun il-buttuna waħda li trid tiftikir.