پایان عصر تصاویر ریسپانسیو
فرانتاند
جاوااسکریپت
سئوخلاصهٔ کاملتر
مت مارکیس، یکی از چهرههای شناختهشده دنیای استانداردهای وب، مقالهای نوشته که ۱۴ سال منتظرش بوده. اون رئیس سابق RICG بود — یه گروه غیررسمی استانداردسازی که مسئول معرفی تصاویر ریسپانسیو به پلتفرم وب شد و سالها برای این کار جنگید.
ماجرا از اونجا شروع شد که در اوایل عصر ریسپانسیو وب، هیچ راه درستی برای سرو تصاویر متناسب با اندازه صفحه و اتصال اینترنت کاربر وجود نداشت. سایتها مجبور بودن یه تصویر بزرگ بفرستن که همه کاربرا — از جمله کسایی با اینترنت کُند — باید همون رو دانلود میکردن. این یعنی هدر رفتن پهنای باند و کندی تجربه کاربری.
RICG یه باند از متخصصین فرانتاند بود که به شکل غیررسمی سازماندهی شدن، با vendorهای مرورگر کنار نشستن، و بعد از سالها بحث و رد کردن پیشنویسهای مختلف، سینتکس srcset و sizes و عنصر picture رو به دنیا معرفی کردن. حتی از جامعه پول جمع کردن تا پیادهسازی مستقل توی مرورگرها رو تأمین مالی کنن.
مارکیس در این مقاله اعتراف میکنه که همیشه از بخشهایی از این سینتکس متنفر بوده — همون لحظهای که اولین بار بهشون نگاه کرد — اما با این حال بیشترین مدافعشون بود. کتاب نوشت، دوره ساخت، سخنرانی کرد؛ همه اینا با دندونهای کلید شده!
اون بین دو نوع سینتکس فرق میذاره: سینتکس توصیفی (srcset و sizes) که بهت کنترل نمیده و مرورگر خودش تصمیم میگیره چه تصویری بارگذاری کنه، و سینتکس تجویزی (picture) که بهت کنترل کامل میده. مارکیس عاشق pictureه — سینتکس خوانایی داره، منطقیه، و اجازه میده فرمتهای مدرن تصویر با fallback مناسب سرو بشن. ولی اینجا نیومده از picture حرف بزنه.
مشکل اصلی اینه که srcset و sizes یه رابطه عجیب بین توسعهدهنده و مرورگر ایجاد میکنن. تو اطلاعات میدی، مرورگر هر کاری دلش بخواد میکنه. حتی توی مشخصات HTML یه مرحله «explicitly vague» وجود داره که به صراحت میگه مرورگر میتونه هر جور که خودش صلاح دونست عمل کنه. این یعنی هیچوقت مطمئن نیستی کدوم تصویر انتخاب میشه و چرا.
این ابهام باعث شده توسعهدهندهها یا کتابخونههای سنگین بیارن، یا bookmarkletهای عجیب اجرا کنن، یا — بدترین حالت — کلاً ولش کنن و برای همه کاربرا یه فایل بزرگ بفرستن که هم پهنای باند هدر بره هم پرفورمنس بد بشه.
حالا مارکیس از یه قابلیت جدید حرف میزنه که قراره این بازی رو عوض کنه — یه تغییر که با چند کاراکتر ساده، کار با تصاویر رو برای توسعهدهندهها خیلی راحتتر میکنه و برای کاربرا، بدون اینکه حتی بفهمن، پرفورمنس رو به شکل چشمگیری بهتر میکنه.
نکات کلیدی:
- مارکیس رئیس سابق RICG و یکی از اصلیترین عوامل ورود تصاویر ریسپانسیو به وب بود
- srcset و sizes سینتکس توصیفی هستن و کنترل انتخاب تصویر رو به مرورگر میدن
- عنصر picture سینتکس تجویزیه و کنترل کامل رو به توسعهدهنده میده
- توی مشخصات HTML، یه مرحله «explicitly vague» وجود داره که رفتار مرورگر رو غیرقابل پیشبینی میکنه
- یه قابلیت جدید در راهه که قراره این پیچیدگیها رو برای همیشه ساده کنه
- بدون تصاویر ریسپانسیو، همه کاربرا مجبور بودن بزرگترین نسخه تصویر رو دانلود کنن
