تصاویر واکنش‌گرا در HTML چیست؟ آموزش srcset، sizes و تگ picture

در درس قبل با عنصر img، ویژگی‌های src و alt، ابعاد تصویر و Lazy Loading آشنا شدیم.

حالا یک قدم حرفه‌ای‌تر جلو می‌رویم و می‌بینیم چگونه برای موبایل، تبلت و دسکتاپ، فایل تصویری مناسب‌تری در اختیار مرورگر قرار دهیم. اینجا با مفهوم تصاویر واکنش‌گرا در HTML یا Responsive Images آشنا می‌شویم.

تصاویر واکنش‌گرا در HTML چیست؟

فرض کنید از یک تصویر سه نسخه با عرض‌های 480، 800 و 1200 پیکسل داریم. اگر همیشه بزرگ‌ترین فایل را برای همه کاربران بفرستیم، کاربر موبایل ممکن است فایل بزرگ‌تری از نیاز خود دانلود کند.

Responsive Images به ما کمک می‌کند چند نسخه تصویر را معرفی کنیم تا مرورگر براساس شرایط دستگاه، فایل مناسب‌تری را انتخاب کند.

تفاوت Responsive Image با CSS Responsive چیست؟

img {
    max-width: 100%;
    height: auto;
}

این CSS از بیرون زدن تصویر از عرض محتوا جلوگیری می‌کند، اما لزوماً باعث نمی‌شود مرورگر فایل کوچک‌تری دانلود کند. برای معرفی چند منبع تصویر از srcset و sizes استفاده می‌کنیم.

ویژگی srcset چیست؟

<img
    src="photo-800.webp"
    srcset="
        photo-480.webp 480w,
        photo-800.webp 800w,
        photo-1200.webp 1200w
    "
    alt="نمونه طراحی واکنش‌گرای صفحه وب"
>

عبارت‌های 480w، 800w و 1200w عرض ذاتی هر فایل را به مرورگر اعلام می‌کنند.

ویژگی sizes چیست؟

<img
    src="photo-800.webp"
    srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 80vw, 800px"
    alt="نمونه طراحی واکنش‌گرای صفحه وب"
>

sizes به مرورگر کمک می‌کند بداند تصویر در شرایط مختلف تقریباً با چه عرضی در صفحه نمایش داده می‌شود.

vw در sizes چیست؟

100vw تقریباً کل عرض Viewport و 50vw تقریباً نصف آن را نشان می‌دهد.

مرورگر چگونه فایل مناسب را انتخاب می‌کند؟

مرورگر عرض Viewport، مقدار sizes، تراکم نمایشگر و کاندیدهای موجود در srcset را بررسی می‌کند و یکی از فایل‌ها را انتخاب می‌کند. انتخاب دقیق همیشه بر عهده مرورگر است.

چرا همچنان src را می‌نویسیم؟

src منبع پایه تصویر را مشخص می‌کند و برای سازگاری و شرایطی که srcset استفاده نشود اهمیت دارد.

srcset با x descriptor چیست؟

<img
    src="logo.png"
    srcset="logo.png 1x, logo@2x.png 2x"
    alt="لوگوی سایت"
>

در این روش نسخه‌ها براساس تراکم نمایشگر معرفی می‌شوند. در یک srcset مشخص، توصیفگرهای w و x را با هم مخلوط نمی‌کنیم.

تفاوت srcset و sizes

تگ picture در HTML چیست؟

عنصر picture زمانی مفید است که بخواهیم کنترل بیشتری روی منبع تصویر داشته باشیم؛ مثلاً فرمت متفاوت یا ترکیب تصویری متفاوت برای موبایل.

<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" alt="نمایی از محیط طراحی وب" width="1200" height="675">
</picture>

عنصر img داخل picture ضروری است و نقش Fallback و عنصر اصلی تصویر را دارد.

چرا img داخل picture ضروری است؟

ویژگی‌هایی مانند alt، width، height و loading روی img قرار می‌گیرند. source به‌تنهایی تصویر نهایی صفحه نیست.

Art Direction چیست؟

گاهی برای موبایل و دسکتاپ فقط اندازه فایل فرق نمی‌کند، بلکه برش و ترکیب تصویر هم باید متفاوت باشد. این روش Art Direction نام دارد.

<picture>
    <source media="(max-width: 600px)" srcset="hero-mobile.webp">
    <img src="hero-desktop.webp" alt="محیط آموزش HTML" width="1200" height="675">
</picture>

Resolution Switching و Art Direction چه تفاوتی دارند؟

• Resolution Switching: همان تصویر با اندازه یا رزولوشن متفاوت ارائه می‌شود.
• Art Direction: ترکیب یا برش تصویر برای شرایط مختلف تغییر می‌کند.

برای Resolution Switching معمولاً srcset و sizes کافی است، اما برای Art Direction اغلب picture مناسب‌تر است.

media و type در source

<source media="(max-width: 600px)" srcset="image-mobile.webp">
<source srcset="image.avif" type="image/avif">

media شرط نمایشی و type نوع فایل را مشخص می‌کند.

Alt را روی source بنویسیم یا img؟

Alt باید روی img نوشته شود، نه روی source.

width و height در تصاویر واکنش‌گرا

حتی در Responsive Images نیز بهتر است ابعاد ذاتی تصویر روی img مشخص شوند تا مرورگر نسبت تصویر را بداند و فضای مناسبی رزرو کند.

loading=”lazy” در کنار srcset

loading="lazy" می‌تواند همراه srcset استفاده شود، اما تصویر مهم ابتدای صفحه را نباید بدون دلیل Lazy Load کنیم.

آیا Responsive Images همیشه لازم است؟

خیر. برای تصاویر کوچک یا مواردی که همیشه تقریباً با یک اندازه نمایش داده می‌شوند، یک فایل بهینه ممکن است کافی باشد. این تکنیک بیشتر برای تصاویر بزرگ و متغیر در دستگاه‌های مختلف ارزشمند است.

اشتباهات رایج

• نوشتن عرض اشتباه کنار فایل در srcset
• استفاده از w بدون مقدار منطقی برای sizes
• استفاده بی‌دلیل از picture
• حذف img از داخل picture
• نوشتن Alt روی source

مثال کامل srcset و sizes

<img
    src="images/course-800.webp"
    srcset="images/course-480.webp 480w, images/course-800.webp 800w, images/course-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 80vw, 800px"
    alt="محیط آموزش HTML روی لپ‌تاپ"
    width="1200"
    height="675"
    loading="lazy"
>

تمرین‌ها

از یک تصویر سه نسخه با عرض‌های مختلف بسازید، آنها را با srcset معرفی کنید، برای آنها sizes بنویسید و سپس با DevTools و پنل Network بررسی کنید مرورگر در اندازه‌های مختلف کدام فایل را دریافت می‌کند.

در این درس چه چیزهایی یاد گرفتیم؟

• srcset چند نسخه تصویر را معرفی می‌کند.
• sizes عرض تقریبی نمایش تصویر را مشخص می‌کند.
• مرورگر براساس شرایط دستگاه فایل مناسب را انتخاب می‌کند.
• picture برای کنترل بیشتر روی منبع تصویر کاربرد دارد.
• source می‌تواند از media و type استفاده کند.
• img داخل picture ضروری است.
• Art Direction برای تغییر ترکیب تصویر در دستگاه‌های مختلف کاربرد دارد.

جمع‌بندی

تصاویر واکنش‌گرا در HTML کمک می‌کنند برای دستگاه‌های مختلف، فایل مناسب‌تری در اختیار مرورگر قرار دهیم. برای بیشتر حالت‌های تغییر رزولوشن، srcset و sizes کافی هستند و برای تغییر فرمت یا Art Direction می‌توانیم از picture و source استفاده کنیم.