next/image on Next.js:n optimoitu korvike <img>-tagille. Se soveltaa automaattisesti kuvan suorituskyvyn parhaita käytäntöjä, joita sinun muutoin pitäisi toteuttaa manuaalisesti.
tsx
;
() {
(
);
}
next/image on Next.js:n optimoitu korvike <img>-tagille. Se soveltaa automaattisesti kuvan suorituskyvyn parhaita käytäntöjä, joita sinun muutoin pitäisi toteuttaa manuaalisesti.
;
() {
(
);
}
srcset — luo useita kokoja niin, että jokainen laite lataa oikean.priority:llä).width/height (tai fill) varaa tilaa niin, että sivu ei hyppää kuvan ladatessa.placeholder="blur" näyttää pienen sumean esikatselun lataamisen aikana.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Käytä fill:ä (kiinteän leveyden/korkeuden sijasta) kun kuvan tulisi täyttää sen sijoitettu vanhempi — yleistä hero/cover-kuvissa.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Kuvat ovat yleensä sivun raskaimmat varat ja pääasiallinen syy huonoihin Core Web Vitalsiin (LCP, CLS). next/image automatisoi koon muuttamisen, modernit formaatit, responsiivisen srcset:n, lazy loadingin ja asettelun siirtymisen estämisen — muuttaen merkittävän suorituskyvyn tehtävän yhdeksi komponentiksi, jossa priority LCP-kuvalle on ainoa säätö jonka sinun on muistettava.
Kirjasto IT-haastattelukysymyksiä yksityiskohtaisine vastauksineen — Juniorista Senioriin.
Lahjoita