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 ਚਿੱਤਰ ਲਈ ਉਹ ਇੱਕ ਨੌਬ ਹੈ ਜੋ ਤੁਸੀਂ ਯਾਦ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ