ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਚਿੱਤਰ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਡਿਵਾਈਸ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਚਿੱਤਰ ਚੁਣਨ ਦਿੰਦੇ ਹਨ — ਫੋਨਾਂ ਤੇ ਬੈਂਡਵਿਡਥ ਬਚਾਉਂਦੇ ਹਨ ਅਤੇ ਉੱਚ-DPI ਸਕ੍ਰੀਨਾਂ ਤੇ ਤਿੱਖੇ ਚਿੱਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
srcset + sizes — ਇੱਕੋ ਚਿੱਤਰ, ਵੱਖ ਰੈਜ਼ੋਲਿਊਸ਼ਨ
html
ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਚਿੱਤਰ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਡਿਵਾਈਸ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਚਿੱਤਰ ਚੁਣਨ ਦਿੰਦੇ ਹਨ — ਫੋਨਾਂ ਤੇ ਬੈਂਡਵਿਡਥ ਬਚਾਉਂਦੇ ਹਨ ਅਤੇ ਉੱਚ-DPI ਸਕ੍ਰੀਨਾਂ ਤੇ ਤਿੱਖੇ ਚਿੱਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
srcset ਆਪਣੀ ਅੰਦਰੂਨੀ ਚੌੜਾਈ (400w = 400px ਚੌੜਾ) ਦੇ ਨਾਲ ਉਮੀਦਵਾਰ ਚਿੱਤਰਾਂ ਦੀ ਸੂਚੀ ਬਣਾਉਂਦਾ ਹੈ।sizes ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਚਿੱਤਰ ਵੱਖ-ਵੱਖ ਬ੍ਰੇਕਪੁਆਇੰਟਾਂ ਤੇ ਕਿੰਨਾ ਚੌੜਾ ਪ੍ਰਦਰਸ਼ਤ ਹੋਵੇਗਾ (ਇੱਥੇ: 600px ਤੋਂ ਹੇਠਾਂ ਪੂਰੀ viewport ਚੌੜਾਈ, ਨਹੀਂ ਤਾਂ ਅੱਧਾ)।sizes + ਡਿਵਾਈਸ ਦੀ ਪਿਕਸਲ ਘਣਤਾ ਨੂੰ ਜੋੜ ਕੇ ਸਭ ਤੋਂ ਛੋਟਾ ਚਿੱਤਰ ਚੁਣਦਾ ਹੈ ਜੋ ਅਜੇ ਵੀ ਤਿੱਖਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ — ਕੁਝ ਵੀ ਡਾਉਨਲੋਡ ਕਰਨ ਤੋਂ ਪਹਿਲੀ।ਇੱਕ ਫੋਨ small.jpg ਚੁਣ ਸਕਦਾ ਹੈ; Retina ਲੈਪਟਾਪ ਜੋ ਇਸ ਨੂੰ 50% ਚੌੜਾਈ ਤੇ ਦਰਸਾ ਰਿਹਾ ਹੈ ਤਾਂ large.jpg ਚੁਣ ਸਕਦਾ ਹੈ।
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
ਬ੍ਰਾਉਜ਼ਰ ਪਹਿਲਾ <source> ਵਰਤਦਾ ਹੈ ਜਿਸਨੂੰ ਇਹ ਸਮਰਥਨ ਕਰਦਾ / ਮਿਲਦਾ ਹੈ। <picture> ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਵੱਖ ਫਾਰਮੈਟ ਚਾਹੀਏ (JPEG ਫੈਲਬੈਕ ਦੇ ਨਾਲ AVIF/WebP ਪ੍ਰਦਾਨ ਕਰੋ) ਜਾਂ ਪ੍ਰਤੀ ਸਕ੍ਰੀਨ ਆਕਾਰ ਵੱਖ ਕਰਾਪ (ਕਲਾ ਨਿਰਦੇਸ਼) — ਚੀਜ਼ਾਂ ਜੋ srcset ਇਕੱਲਾ ਨਹੀਂ ਕਰ ਸਕਦਾ।
srcset + sizes।<picture>।ਸਹੀ-ਆਕਾਰ ਦੇ, ਆਧੁਨਿਕ-ਫਾਰਮੈਟ ਚਿੱਤਰ ਪ੍ਰਦਾਨ ਕਰਨਾ ਵੈਬ ਲਈ ਸਭ ਤੋਂ ਵੱਡੀ ਕਾਰਜ ਕਾਰਯਕਤਾ ਜਿੱਤ ਹੈ — ਇਹ ਮੋਬਾਈਲ ਡੇਟਾ ਵਰਤੋਂ ਨੂੰ ਨਾਟਕੀ ਢੰਗ ਨਾਲ ਕਾਟਦਾ ਹੈ ਅਤੇ ਸਭ ਤੋਂ ਵੱਡੇ Contentful Paint ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ।
ਇਹ ਸਥਿਤ ਸਾਧਨ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਆਪਣੇ ਆਪ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਅਨੁਕੂਲ ਚੋਣ ਕਰਨ ਦਿੰਦੇ ਹਨ, ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਲਈ ਸੁਹਾਵਣੀ ਫੈਲਬੈਕਾਂ ਦੇ ਨਾਲ।