next/image Next.js ਦਾ <img> ਟੈਗ ਲਈ ਅਨੁਕੂਲਿਤ ਬਦਲ ਹੈ। ਇਹ ਸਵੈਚਲਿਤ ਰੂਪ ਵਿੱਚ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਸਰਵੋਤਮ ਪ੍ਰਥਾਵਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਲਾਗੂ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਹੋਰ ਹੱਥੋਂ ਲਾਗੂ ਕਰਦੇ।
tsx
;
() {
(
);
}
next/image Next.js ਦਾ <img> ਟੈਗ ਲਈ ਅਨੁਕੂਲਿਤ ਬਦਲ ਹੈ। ਇਹ ਸਵੈਚਲਿਤ ਰੂਪ ਵਿੱਚ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਸਰਵੋਤਮ ਪ੍ਰਥਾਵਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਲਾਗੂ ਕਰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਹੋਰ ਹੱਥੋਂ ਲਾਗੂ ਕਰਦੇ।
;
() {
(
);
}
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 ਪੁਨਰਾ ਆਕਾਰ, ਆਧੁਨਿਕ ਫਾਰਮੈਟ, responsive srcset, lazy loading, ਅਤੇ ਲੇਆਉਟ-ਸ਼ਿਫਟ ਰੋਧ ਨੂੰ ਸਵੈਚਲਿਤ ਕਰਦਾ ਹੈ — ਇੱਕ ਪ੍ਰਮੁੱਖ ਪ੍ਰਦਰਸ਼ਨ ਕੰਮ ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਭਾਗ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, priority ਨਾਲ LCP ਚਿੱਤਰ ਲਈ ਉਹ ਇੱਕ ਨੌਬ ਹੈ ਜੋ ਤੁਸੀਂ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ।