Responsive Images به مرورگر چند گزینه می‌دهند تا تصویری متناسب با فضای نمایش و شرایط دستگاه انتخاب کند. کوچک کردن تصویر با CSS فقط اندازه ظاهری را عوض می‌کند؛ اگر فایل بزرگ همان فایل قبلی باشد، هزینه دریافت آن لزوماً کم نمی‌شود. srcset و sizes برای توصیف گزینه‌ها و فضای مورد انتظار به کار می‌روند و picture می‌تواند انتخاب منبع متفاوت را ممکن کند. هر کدام مسئولیت مشخصی دارند و جای تولید فایل مناسب را نمی‌گیرند.
دو مسئله را جدا کنید: Resolution Switching یعنی همان محتوا با اندازه‌های متفاوت، و Art Direction یعنی ترکیب یا برش متفاوت برای موقعیت دیگر. عکس کامل یک میز روی دسکتاپ و نمای نزدیک اتصال در موبایل می‌توانند انتخاب هنری متفاوت باشند. نسخه کم‌عرض و پرعرض همان عکس، مسئله وضوح است. اگر هدف روشن نباشد، ممکن است برای هر breakpoint فایل متفاوت بسازید و نگهداری پیچیده شود، در حالی که چند اندازه از همان محتوا کافی بوده است.
عرض نمایش با عرض فایل یکی نیست
یک تصویر ممکن است در صفحه ۴۰۰ پیکسل CSS فضا بگیرد، اما دستگاه برای نمایش واضح‌تر به گزینه‌ای با پیکسل‌های بیشتر نیاز داشته باشد. DPR و سیاست انتخاب مرورگر در این تصمیم نقش دارند. نباید عرض viewport را مستقیماً برابر اندازه فایل بگیرید. در صفحه چندستونه، تصویر شاید فقط بخشی از عرض صفحه باشد. ابتدا چیدمان واقعی را مشخص کنید: فاصله کناره‌ها، سقف Container و تعداد ستون‌ها، همگی به فضای تصویر مربوط‌اند.
راهنمای تصاویر واکنش‌گرا در MDN تفاوت گزینه‌های وضوح و Art Direction را توضیح می‌دهد. در طراحی، برای هر محل مصرف تصویر یک Slot تعریف کنید؛ تصویر Hero و Thumbnail محصول نیاز یکسانی ندارند. یک مجموعه فایل عمومی بدون توجه به Slot می‌تواند انتخاب‌های بزرگ‌تر از نیاز بسازد. مقاله گالری و Lightbox درباره تفکیک نسخه کوچک و نسخه جزئیات زمینه مناسبی دارد.
Descriptorهای w و x را مخلوط نکنید
در srcset با w، هر Candidate عرض واقعی منبع را معرفی می‌کند؛ مثلاً گزینه 640w باید با منبعی با همان عرض هماهنگ باشد. این عدد عرض نمایش CSS نیست. sizes به مرورگر کمک می‌کند Slot را برای انتخاب میان این گزینه‌ها برآورد کند. در روش x، گزینه‌ها با ضریب تراکم مانند 1x و 2x تعریف می‌شوند و برای اندازه نمایش مشخص کاربرد دارند. یک مجموعه Candidate را بدون توجه به قواعد Syntax از ترکیب هر دو روش نسازید.
نام فایل می‌تواند راهنمای انسان باشد، اما مرورگر از عبارت «large» اندازه را کشف نمی‌کند. Descriptor باید با داده واقعی مطابق باشد. اگر فرایند تولید تصویر ابعاد را تغییر می‌دهد، فهرست srcset هم باید به‌روزرسانی شود. تولید خودکار اندازه‌ها می‌تواند این تطابق را نگه دارد، به شرط اینکه خروجی و نام‌گذاری قرارداد روشن داشته باشند. خطای عددی در Candidate ممکن است انتخاب نامناسب بسازد، حتی وقتی همه فایل‌ها از نظر HTTP قابل دریافت هستند.
sizes توصیف چیدمان است، نه دستور CSS
sizes اندازه عنصر را تنظیم نمی‌کند؛ CSS و ساختار صفحه همچنان مسئول Layout هستند. اگر sizes می‌گوید تصویر تمام عرض صفحه است ولی در عمل نصف Container قرار دارد، مرورگر ممکن است گزینه بزرگ‌تری از نیاز انتخاب کند. مقدارها باید با همان breakpointها و فاصله‌های واقعی هماهنگ شوند. برای یک Container با سقف ثابت و حاشیه کناری، بیان سقف و عرض محاسبه‌شده Slot از فرض همیشگی 100vw دقیق‌تر است.
در استاندارد HTML برای تصاویر، قواعد انتخاب منبع و Source Size تعریف شده‌اند. انتخاب نهایی به مرورگر سپرده می‌شود؛ srcset تضمین نمی‌کند هر تغییر viewport فوراً فایل کوچک‌تر تازه‌ای دانلود کند. ممکن است نسخه موجود در Cache برای ادامه کافی باشد. این رفتار را با شکست چیدمان اشتباه نگیرید. هدف دادن اطلاعات درست است، نه کنترل دستی همه تصمیم‌های شبکه از طریق یک فهرست Candidate.
picture برای منبع‌های قابل انتخاب است
picture می‌تواند sourceهایی با media یا type داشته باشد و img آخر همچنان عنصر تصویر و fallback است. ترتیب sourceها مهم است؛ مرورگر گزینه سازگار را طبق قواعد انتخاب بررسی می‌کند. برای Art Direction، محتوای دو منبع باید با هدف Slot هماهنگ باشد. تغییر عکس نباید اطلاعات اصلی محصول را حذف کند. اگر در موبایل نمای نزدیک نشان می‌دهید، راه دیدن نمای کامل هم ممکن است لازم باشد تا مخاطب اندازه و شکل کلی را از دست ندهد.
انتخاب فرمت و انتخاب ترکیب دو تصمیم متفاوت‌اند. source با type می‌تواند فرمت مناسب را ارائه کند و img منبع جایگزین داشته باشد، اما صرف تغییر پسوند فایل، آن را به فرمت جدید تبدیل نمی‌کند. فرایند تولید باید فایل واقعی بسازد و نوع محتوا درست باشد. درباره نسبت فشرده‌سازی ثابت یا «همیشه بهتر بودن» یک فرمت ادعای عمومی نکنید؛ موضوع تصویر، کیفیت مورد انتظار و پشتیبانی مخاطب در انتخاب اثر دارند.
نمونه مستقل بدون فایل تصویری بیرونی
نمونه زیر را در responsive-demo.html ذخیره و در مرورگر باز کنید. فایل کامل است و وابستگی شبکه یا تصویر جدا ندارد. JavaScript چند SVG آموزشی را در حافظه می‌سازد و URLهای Blob را به Candidateها می‌دهد. هدف مشاهده قواعد srcset، sizes و picture است؛ SVGهای ساده اندازه فایل عکس واقعی را شبیه‌سازی نمی‌کنند و از این نمونه نباید نتیجه‌ای درباره صرفه‌جویی پهنای باند استخراج کرد. تصویر یا نمودار تازه‌ای در خود مقاله نمایش داده نشده و همه این محتوا داخل کد نمونه است.
<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>نمونه Responsive Images</title><style>body{margin:0;font:1rem/1.8 Tahoma,sans-serif;color:#111}main{max-width:968px;margin:16px auto;width:calc(100% - 32px)}img{display:block;width:100%;height:auto;aspect-ratio:2/1;background:#eee}@media(max-width:599px){img{aspect-ratio:2/3}}</style></head><body><main><h1>انتخاب منبع تصویر</h1><p>طرح هندسی آموزشی؛ اندازه فایل عکس واقعی را شبیه‌سازی نمی‌کند.</p><picture><source id="portrait" media="(max-width:599px)" sizes="calc(100vw - 32px)"><img id="demo" width="1280" height="640" alt="یک دایره تیره در طرح هندسی آموزشی" sizes="(min-width:1000px) 968px, calc(100vw - 32px)"></picture><p id="selected" role="status">در حال آماده‌سازی نمونه</p><noscript><p>این نمونه برای ساخت منابع آموزشی به JavaScript نیاز دارد.</p></noscript></main>
<script>
const urls=[],labels=new Map();
function make(width,portrait){const height=portrait?width*1.5:width/2;const svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect width="${width}" height="${height}" fill="#eeeeee"/><circle cx="${width/2}" cy="${height/2}" r="${Math.min(width,height)/4}" fill="#111111"/></svg>`;const url=URL.createObjectURL(new Blob([svg],{type:'image/svg+xml'}));urls.push(url);labels.set(url,(portrait?'عمودی':'افقی')+'، عرض منبع '+width+' پیکسل');return url}
const portrait320=make(320,true),portrait640=make(640,true),wide640=make(640,false),wide1280=make(1280,false);
const image=document.getElementById('demo');
image.addEventListener('load',()=>{document.getElementById('selected').textContent='گزینه انتخاب‌شده: '+(labels.get(image.currentSrc)||'منبع دیگر')});
image.addEventListener('error',()=>{document.getElementById('selected').textContent='نمایش منبع ممکن نشد.'});
document.getElementById('portrait').srcset=`${portrait320} 320w, ${portrait640} 640w`;
image.srcset=`${wide640} 640w, ${wide1280} 1280w`;image.src=wide640;
window.addEventListener('pagehide',()=>urls.forEach(url=>URL.revokeObjectURL(url)));
</script></body></html>
در عرض کمتر از ۶۰۰ پیکسل، source مجموعه عمودی را معرفی می‌کند و دو گزینه با عرض ۳۲۰ و ۶۴۰ دارد. در عرض بزرگ‌تر، img از مجموعه افقی با عرض ۶۴۰ و ۱۲۸۰ انتخاب می‌کند. ابعاد نوشته‌شده در SVG با Descriptorها هماهنگ‌اند. Container حداکثر ۹۶۸ پیکسل است و از هر طرف ۱۶ پیکسل فاصله دارد؛ sizes همین Slot را توصیف می‌کند. نام گزینه انتخاب‌شده در متن زیر تصویر نمایش داده می‌شود و فایل بزرگ‌تر به عنوان انتخاب اشتباه عمومی معرفی نمی‌شود.
CSS نسبت قاب را برای حالت عمودی و افقی هماهنگ می‌کند. تغییر breakpoint در media بدون تغییر قاعده CSS و توضیح Slot می‌تواند خروجی ناسازگار بسازد. در کد، نقشه URLها به نام Candidate برای تشخیص گزینه استفاده شده است. currentSrc فقط نشانی منبع انتخاب‌شده را نشان می‌دهد و روش انتخاب دقیق مرورگر را توضیح نمی‌دهد. هنگام خروج صفحه، URLهای Blob آزاد می‌شوند. این شیوه ساخت منبع فقط برای نمونه مستقل است؛ در محصول معمولاً فایل‌های واقعی از مسیر دارایی پروژه معرفی می‌شوند.
ابعاد را برای جلوگیری از جابه‌جایی نگه دارید
width و height می‌توانند نسبت اولیه را به مرورگر معرفی کنند تا پیش از دریافت محتوا فضا رزرو شود. CSS می‌تواند تصویر را با عرض ظرف هماهنگ کند و ارتفاع متناسب باقی بماند. در Art Direction با نسبت متفاوت، فضای رزروشده باید با منبع آن حالت هماهنگ شود. اگر قاب برای همه حالت‌ها ثابت است، درباره object-fit و حذف احتمالی بخش محتوا تصمیم بگیرید. Crop باید آگاهانه باشد و به حذف اطلاعات ضروری منجر نشود.
تصویر بزرگ بدون ابعاد روشن می‌تواند پس از بارگذاری متن و کنترل‌ها را جابه‌جا کند. این حرکت برای کاربری که می‌خواهد لینک یا دکمه را انتخاب کند مسئله عملی است، نه فقط امتیاز یک ابزار. اگر Placeholder دارید، اندازه آن باید به نتیجه نهایی نزدیک باشد. انتخاب منبع سبک‌تر این جابه‌جایی را به تنهایی حل نمی‌کند. کیفیت چیدمان و کیفیت دریافت، دو بخش مرتبط اما جدا از عملکرد تصویر هستند.
اولویت بارگذاری را با محل تصویر تعیین کنید
Lazy Loading برای همه تصاویر انتخاب یکسانی نیست. تصویری که در نمایش اولیه نقش اصلی دارد نباید صرفاً برای یکسان کردن attributeها به تأخیر بیفتد. تصاویر دورتر می‌توانند اولویت متفاوت داشته باشند. انتخاب منبع مناسب، زمان کشف تصویر و اولویت دریافت هر کدام روی تجربه اثر می‌گذارند. اضافه کردن fetchpriority بالا به همه تصاویر نیز اولویت معنی‌داری نمی‌سازد؛ باید مشخص باشد کدام محتوا در مسیر اولیه کاربر مهم است.
اندازه و فرمت را با کیفیت قابل قبول مقایسه کنید. تصویر خیلی کوچک در نمایش بزرگ ممکن است تار شود و نسخه بسیار بزرگ برای Thumbnail هزینه غیرلازم داشته باشد. در گزارش، مقدار واقعی فایل و شرایط نمایش را ذکر کنید، نه درصد صرفه‌جویی فرضی. مقاله عملکرد React یادآور می‌شود که کندی صفحه فقط از رندر Framework نیست؛ تصاویر، شبکه و چیدمان هم باید در مسیر واقعی کاربر بررسی شوند.
Alt و چرخه نگهداری را فراموش نکنید
img همچنان به متن جایگزین متناسب با نقش نیاز دارد. انتخاب منبع متفاوت نباید معنی اصلی Alt را نامعتبر کند. اگر دو برش اطلاعات کاملاً متفاوت دارند، درباره توضیح نزدیک و ساختار محتوا دوباره فکر کنید. تصویر تزئینی و تصویر اطلاعاتی یک انتظار ندارند. متن داخل فایل تصویر نیز برای ترجمه و تغییر اندازه دشوارتر است؛ اطلاعات مهم را تا جای ممکن در HTML نگه دارید تا انتخاب منبع آن‌ها را از خواننده حذف نکند.
در تحویل، Slotهای تصویر، اندازه Candidateها، breakpointها و روش تولید را ثبت کنید. مسئول محتوا باید بداند جایگزینی یک عکس با نسبت متفاوت چه چیزی را تغییر می‌دهد. مقاله پورتفولیو درباره نقش عکس و شواهد پروژه زمینه بیشتری دارد. شروع عملی، یک محل مصرف مشخص است: اندازه واقعی نمایش را بنویسید، چند گزینه هماهنگ تولید کنید و سپس Art Direction را فقط وقتی اضافه کنید که محتوا در آن قاب به ترکیب متفاوت نیاز دارد.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!