تصویر واکنش‌گرا با srcset؛ فایل مناسب برای موبایل
هدف: مرورگر را وادار نکن یک تصویر ۱۲۰۰ پیکسلی را در موبایل بارگیری کند؛ انتخاب فایل را به srcset و sizes بسپار.
سه نسخهٔ یک عکس آزمایشی با عرض‌های ۴۸۰، ۸۰۰ و ۱۲۰۰ پیکسل و نسبت تصویر یکسان آماده کن.
نام فایل‌ها را مطابق کد نمونه بگذار و هر سه را کنار فایل HTML آزمایشی قرار بده.
در srcset بعد از هر نام، عرض واقعی فایل را با واحد w بنویس؛ عدد حدسی باعث انتخاب نامناسب می‌شود.
در sizes اعلام کن تا عرض ۶۰۰ پیکسل تصویر تقریباً تمام viewport است و در صفحهٔ بزرگ ۸۰۰ پیکسل فضا می‌گیرد.
src را به‌عنوان گزینهٔ پایه نگه دار تا مرورگرهای قدیمی‌تر و حالت‌های جایگزین تصویر داشته باشند.
ویژگی‌های width و height را با نسبت فایل پایه بنویس تا فضا قبل از دانلود رزرو شود و چیدمان نپرد.
alt را دربارهٔ معنای عکس بنویس؛ نام فایل یا عبارت «تصویر» جای توضیح کاربردی را نمی‌گیرد.
صفحه را در پنجرهٔ خصوصی باز کن، ابزار Network را روشن و کش را غیرفعال کن، سپس در عرض ۳۷۵ پیکسل Reload بزن.
نام فایل انتخاب‌شده و مقدار currentSrc را در Console بررسی کن؛ مرورگر با توجه به نمایشگر ممکن است نسخه‌ای بزرگ‌تر از ۴۸۰ را برگزیند.
آزمون را در عرض ۱۲۰۰ تکرار کن و مطمئن شو تصویر از ظرف ۸۰۰ پیکسلی بیرون نزند؛ CSS را با max-width:100% تکمیل کن.
معیار موفقیت: فایل‌های معتبر در عرض‌های مختلف انتخاب شوند، نسبت تصویر ثابت بماند و توضیح alt بدون وابستگی به عکس مفهوم را منتقل کند.
کد کامل تمرین
<img src="photo-800.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="A useful description">
0 دیدگاه برای تصویر واکنش‌گرا با srcset؛ فایل مناسب برای موبایل
اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.