یک تصویر برای همه؟ نه دیگه وقتشه هوشمندتر باشیم
تا اینجا با یه تگ img ساده کار کردیم که فقط یه فایل تصویر مشخص رو نشون میداد. اما امروز کاربرا از دستگاههای خیلی متفاوتی به سایت سر میزنن؛ از موبایل با صفحهی کوچیک گرفته تا مانیتورهای بزرگ و پرجزئیات. فرستادن یه تصویر خیلی بزرگ به موبایل، هم اتلاف پهنای باند کاربره، هم سرعت سایت رو کند میکنه. برای حل این مشکل، HTML5 دو ویژگی مهم داره: srcset و sizes.
مشکل اصلی: یک سایز برای همه
<img src="photo-large.jpg" alt="منظره کوهستان">اگه فقط از src ساده استفاده کنی، مرورگر فارغ از اینکه کاربر از موبایل استفاده میکنه یا از یه مانیتور ۴K، همیشه همون یه فایل تصویر رو دانلود میکنه. این یعنی کاربر موبایل، یه فایل حجیم رو دانلود میکنه که اصلاً نیازی به اون کیفیت و ابعاد نداره.
راهحل: srcset با چند نسخه از تصویر
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
alt="منظره کوهستان در هنگام غروب">ویژگی srcset به مرورگر چند نسخه از یه تصویر با عرضهای مختلف میده، و مرورگر خودش بر اساس اندازهی صفحهنمایش و کیفیت مانیتور کاربر، مناسبترین نسخه رو انتخاب و دانلود میکنه.
بیا این کد رو بخشبهبخش بررسی کنیم:
photo-400.jpg 400w: این فایل عرض واقعی ۴۰۰ پیکسل داره؛ عددwبعد از فایل، مخفف Width هست و به مرورگر میگه این نسخه چند پیکسل عرض داره.photo-800.jpg 800w: نسخهی با عرض ۸۰۰ پیکسل.photo-1200.jpg 1200w: نسخهی با عرض ۱۲۰۰ پیکسل.
ویژگی src هم همچنان لازمه؛ این مقدار بهعنوان یه نسخهی پیشفرض عمل میکنه، مخصوصاً برای مرورگرهای خیلی قدیمی که اصلاً srcset رو نمیشناسن.
حالا مرورگر چطور تصمیم میگیره؟
مرورگر با در نظر گرفتن عرض واقعی صفحهنمایش دستگاه کاربر و تراکم پیکسلی مانیتورش (مثلاً صفحههای Retina که تراکم پیکسل بالاتری دارن)، از بین گزینههای موجود تو srcset، نزدیکترین و بهینهترین گزینه رو انتخاب میکنه. مثلاً یه گوشی با عرض صفحهی ۴۰۰ پیکسل، احتمالاً photo-400.jpg رو دانلود میکنه، در حالی که یه مانیتور بزرگتر، سراغ photo-1200.jpg میره.
ویژگی sizes: کمک به مرورگر برای تصمیم دقیقتر
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="منظره کوهستان در هنگام غروب">ویژگی sizes به مرورگر میگه که تصویر، تو چیدمان واقعی صفحه، قراره چه عرضی داشته باشه؛ چون گاهی تصویر تو صفحه بهاندازهی کل عرض صفحهنمایش نیست (مثلاً وقتی دو ستونه چیده شده). بیا این مقدار رو باز کنیم:
(max-width: 600px) 100vw: یعنی اگه عرض صفحهنمایش حداکثر ۶۰۰ پیکسل باشه (مثل موبایل)، تصویر کل عرض صفحه (۱۰۰ درصد Viewport Width) رو اشغال میکنه.50vw: در غیر این صورت (صفحههای بزرگتر از ۶۰۰ پیکسل)، تصویر فقط نیمی از عرض صفحه رو اشغال میکنه؛ مثلاً وقتی تصویر کنار یه متن، تو یه چیدمان دوستونه قرار گرفته.
با کمک همین اطلاعات، مرورگر میتونه محاسبهی دقیقتری انجام بده که کدوم فایل از srcset واقعاً بهترین انتخابه، نه فقط بر اساس عرض کل صفحهنمایش.
چرا این کار مهمه؟ یه مثال عملی
فرض کن یه عکس با ابعاد اصلی ۲۴۰۰ در ۱۶۰۰ پیکسل و حجم ۲ مگابایت داری. اگه این تصویر رو مستقیم و بدون srcset تو یه صفحه بذاری، حتی کاربر موبایل هم مجبوره همون ۲ مگابایت رو دانلود کنه، در حالی که صفحهی گوشیش شاید فقط ۴۰۰ پیکسل عرض داره و یه نسخهی ۱۰۰ کیلوبایتی کاملاً براش کافی بود. با srcset، این اتلاف پهنای باند و زمان از بین میره.
یه نکتهی مهم: srcset فقط برای عرض متفاوت نیست
گاهی از srcset برای مدیریت تراکم پیکسلی (Pixel Density) هم استفاده میشه، با یه سینتکس کمی متفاوت:
<img
src="icon.png"
srcset="icon.png 1x, icon-2x.png 2x, icon-3x.png 3x"
alt="آیکون برنامه">تو این حالت، بهجای w، از x استفاده میشه که نشوندهندهی ضریب تراکم پیکسلیه. مثلاً مانیتورهای Retina اپل معمولاً تراکم ۲x یا ۳x دارن؛ یعنی برای نمایش واضح و شارپ، به یه فایل با پیکسل واقعی بیشتر نیاز دارن، حتی اگه ابعاد نمایشی تصویر رو صفحه ثابت بمونه.
یه مثال کامل و واقعی
<h2>محصول ویژهی این هفته</h2>
<img
src="product-800.jpg"
srcset="product-400.jpg 400w, product-800.jpg 800w, product-1600.jpg 1600w"
sizes="(max-width: 500px) 100vw, (max-width: 1000px) 50vw, 33vw"
alt="کفش ورزشی مشکی مدل رانینگ">تو این مثال، سه نسخه از تصویر محصول با عرضهای مختلف تعریف شده، و sizes هم مشخص میکنه که تو موبایل (کمتر از ۵۰۰ پیکسل) تصویر کل عرض صفحه رو میگیره، تو تبلت (بین ۵۰۰ تا ۱۰۰۰) نصف عرض صفحه، و تو دسکتاپ فقط یکسوم عرض صفحه رو اشغال میکنه.
چند اشتباه رایج
- فراموشکردن ویژگی src کنار srcset، که باعث میشه مرورگرهای قدیمی اصلاً نتونن هیچ تصویری رو نمایش بدن.
- استفاده از srcset بدون sizes در چیدمانهای پیچیده، که باعث میشه محاسبهی مرورگر دقیق نباشه.
- تهیهنکردن نسخههای واقعی و مجزا از تصویر با ابعاد مختلف، و فقط تکیه بر یه فایل بزرگ برای همهی سایزها.
بهترین روشها
- برای تصاویر بزرگ و پرکاربرد (مثل بنر اصلی یا تصاویر محصول)، همیشه چند نسخه با ابعاد مختلف تهیه کن و از srcset استفاده کن.
- در چیدمانهای پیچیده (مثل شبکهای چندستونه)، حتماً ویژگی sizes رو هم دقیق تنظیم کن.
- همیشه یه مقدار src پیشفرض معتبر هم نگه دار تا سازگاری با مرورگرهای قدیمی حفظ بشه.
نکتهی سئو
سرعت بارگذاری صفحه یکی از فاکتورهای مستقیم رتبهبندی گوگل است، بهخصوص در جستجوی موبایلی. استفاده از srcset و ارائهی تصویر متناسب با اندازهی واقعی دستگاه کاربر، میتواند تأثیر محسوسی روی سرعت و در نتیجه رتبهبندی سایت در نتایج جستجو داشته باشد.
نکتهی دسترسیپذیری
ویژگیهای srcset و sizes مستقیماً روی دسترسیپذیری تأثیری ندارند، اما بارگذاری سریعتر صفحه بهطور کلی تجربهی بهتری برای همهی کاربران، از جمله کسانی که از اینترنت کمسرعتتر یا دستگاههای ضعیفتر استفاده میکنند، فراهم میکند. ویژگی alt همچنان طبق قوانین درس قبل باید رعایت شود، فارغ از استفاده یا عدم استفاده از srcset.
جمعبندی
ویژگی srcset به مرورگر امکان میدهد از بین چند نسخهی مختلف یک تصویر، مناسبترین گزینه را بر اساس اندازهی صفحهنمایش کاربر انتخاب کند، و ویژگی sizes با مشخصکردن عرض واقعی نمایش تصویر در چیدمان صفحه، دقت این انتخاب را افزایش میدهد. استفادهی درست از این دو ویژگی، تأثیر مستقیمی روی سرعت بارگذاری و مصرف پهنای باند دارد.