srcset، sizes اور picture کیسے responsive images کو پیش کرتے ہیں؟

Question

Accepted Answer

Responsive images براؤزر کو **ڈیوائس کے لیے بہترین image منتخب کرنے** کی اجازت دیتے ہیں — فونز پر بینڈوڈتھ بچاتے ہوئے اور high-DPI اسکرینز پر شاندار تصاویر پیش کرتے ہوئے۔ ## srcset + sizes — ایک جیسی image، مختلف resolutions ```html A landscape

``` - **`srcset`** اپنی **intrinsic widths** کے ساتھ candidate images درج کرتا ہے (`400w` = 400px چوڑا)۔ - **`sizes`** براؤزر کو بتاتا ہے کہ image مختلف breakpoints پر *کتنی چوڑی* دکھائی دے گی (یہاں: 600px سے نیچے مکمل viewport width، ورنہ آدھی)۔ - براؤزر `sizes` + ڈیوائس کی pixel density کو ملا کر سب سے چھوٹی image منتخب کرتا ہے جو پھر بھی تیز نظر آئے — کچھ بھی ڈاؤن لوڈ کرنے سے *پہلے*۔ ایک فون `small.jpg` منتخب کر سکتا ہے؛ Retina لیپ ٹاپ جو اسے 50% width پر دکھا رہا ہو `large.jpg` منتخب کر سکتا ہے۔ ## picture — art direction / مختلف formats ```html

``` براؤزر پہلا `` استعمال کرتا ہے جو وہ سپورٹ کرتا ہے/match کرتا ہے۔ `

srcset، sizes اور picture کیسے responsive images کو پیش کرتے ہیں؟

srcset + sizes — ایک جیسی image، مختلف resolutions

picture — art direction / مختلف formats

srcset vs picture — کون سا؟

اہمیت کیوں ہے