تصاویر واکنش گرا

نشانه‌گذاری تصویر واکنش‌گرا را می‌توان به دو سناریو تقسیم کرد: موقعیت‌هایی که هدف، کارآمدترین تصاویر ممکن است، و موقعیت‌هایی که نیاز به کنترل صریح بر روی منبع تصویری که مرورگر انتخاب می‌کند، دارید. شما می توانید اینها را به ترتیب به عنوان نحو توصیفی و دستوری در نظر بگیرید.

در این ماژول شما هر دو رویکرد را یاد خواهید گرفت. ابتدا srcset و sizes را پوشش می‌دهیم، و چگونگی کمک به مرورگر را بر اساس اطلاعاتی که در مورد کاربر، دستگاه و وضعیت مرورش می‌داند، بهترین انتخاب را انجام دهد. سپس عنصر <picture> را کشف خواهید کرد که امکان کنترل صریح بر انتخاب منبع را بر اساس عواملی مانند اندازه درگاه دید و پشتیبانی مرورگر از فرمت های تصویر فراهم می کند.

نحوهای توصیفی

یک نحو توصیفی اطلاعاتی در مورد منابع تصویر و نحوه استفاده از آنها در اختیار مرورگر قرار می دهد، اما در نهایت تصمیم گیری را به مرورگر واگذار می کند. این سناریوی بسیار رایج تر است. برای اکثریت قریب به اتفاق تصاویر، شما نمی خواهید کنترل دقیقی بر رفتار مرورگر داشته باشید. مرورگرها اطلاعات بسیار بیشتری نسبت به توسعه دهندگان وب در اختیار دارند و می توانند بر اساس این اطلاعات تصمیمات پیچیده ای بگیرند. شما نمی‌توانید زمینه‌های مرور کاربران را به‌طور دقیق پیش‌بینی کنید—در مورد سخت‌افزار، اولویت‌ها و سرعت اتصال آنها چیزهای زیادی وجود دارد که نمی‌توانید بدانید. در بهترین حالت، می‌توانید حدس‌های درستی بزنید، اما نمی‌توانید به طور قطعی بدانید که هر کاربر چگونه وب را تجربه می‌کند. مورد اصلی استفاده برای تصاویر واکنش‌گرا، از دیدگاه توسعه‌دهنده، کاملاً هدف‌محور است: به مرورگرها اجازه می‌دهد تا کارآمدترین درخواست‌های تصویر ممکن را بر اساس اطلاعاتی که مرورگر در دست دارد، انجام دهند.

برای فعال کردن مرورگرها برای انجام این انتخاب‌ها، srcset به شما امکان می‌دهد فهرستی از منابع بالقوه را برای پر کردن یک <img> به مرورگر ارائه دهید، در حالی که sizes به شما امکان می‌دهد اطلاعاتی درباره نحوه نمایش آن <img> به مرورگر ارائه دهید. نحوه استفاده از اینها را در ماژول بعدی خواهید آموخت.

نحو تجویزی

با یک نحو تجویزی، بر اساس معیارهای خاصی که تعریف کرده‌اید، به مرورگر می‌گویید که چه کاری انجام دهد—چه منبعی را انتخاب کند. در حالی که این مورد استفاده به اندازه «فقط کارآمدترین دارایی را برای نمایش این تصویر بارگیری کنید» رایج نیست، به ما امکان می‌دهد دستورالعمل‌های استفاده را به مرورگر ارائه دهیم تا اطلاعاتی را که قبل از انتقال دارایی‌ها در اختیار ندارد، در نظر بگیریم. به عنوان محتوای منابع یا قالب آنها.

در حالی که srcset و sizes یک نحو برای انتقال اطلاعات به مرورگر کاربر و اجازه تصمیم گیری در مورد منابع تصویر را در اختیار شما قرار می دهند، مواقعی وجود دارد که شما نیاز به کنترل صریح بر روی فایل منبع و زمان ارائه شده دارید. به عنوان مثال، ممکن است بخواهید نسخه‌هایی از محتوای تصویر مشابه را با نسبت‌های مختلف، بر اساس روش‌های طراحی متفاوت در نقاط شکست طرح‌بندی، نمایش دهید، یا مطمئن شوید که فقط مرورگرهایی که از یک رمزگذاری خاص پشتیبانی می‌کنند، منابع خاصی را دریافت می‌کنند.

در این موارد، شما می خواهید کنترل واضحی بر روی اینکه کدام منبع و چه زمانی نشان داده می شود. این‌ها تضمین‌هایی هستند که srcset و sizes نمی‌توانند با طراحی به ما بدهند. برای بدست آوردن آن کنترل، باید از عنصر <picture> استفاده کنیم.