تگ‌های picture و source برای تصاویر واکنش‌گرا (Responsive)

تگ‌های <picture> و <source>: تصاویر هوشمند برای نمایش بهتر! 💡

سلام به همگی! توی دنیای موبایل‌ها، تبلت‌ها و دسکتاپ‌های بزرگ، یک تصویر ثابت ممکنه روی بعضی دستگاه‌ها خوب به نظر نرسه. یا شاید بخوایم برای دستگاه‌های کوچکتر، نسخه کم‌حجم‌تری از تصویر رو نمایش بدیم تا سرعت بارگذاری بهتر بشه. اینجا تگ‌های <picture> و <source> وارد صحنه می‌شن تا تصاویر واکنش‌گرا (Responsive Images) بسازیم!

با این تگ‌ها، مرورگر می‌تونه بهترین تصویر رو بر اساس اندازه صفحه، رزولوشن و فرمت پشتیبانی شده انتخاب کنه.

تگ <picture>: یک بسته بندی هوشمند 🎁

تگ <picture> یک کانتینر (Wrapper) هست که به شما اجازه می‌ده چندین تگ <source> و یک تگ <img> رو درون خودش قرار بدید.

مرورگر، تگ‌های <source> رو از بالا به پایین بررسی می‌کنه و اولین تگی که شرایطش برقرار باشه رو انتخاب می‌کنه. اگر هیچ‌کدوم از <source> ها منطبق نبودن، مرورگر به تگ <img> که همیشه باید آخرین فرزند <picture> باشه، مراجعه می‌کنه.

<picture>
  <!-- اولین source که شرایطش برقرار باشه، انتخاب می‌شه -->
  <source srcset="images/large.jpg" media="(min-width: 1000px)">
  <source srcset="images/medium.jpg" media="(min-width: 600px)">

  <!-- تصویر پیش‌فرض که همیشه نمایش داده می‌شه (اگر هیچ source ای منطبق نبود) -->
  <img src="images/small.jpg" alt="توضیح تصویر">
</picture>

تگ <source>: انتخابگر هوشمندانه 🧐

تگ <source> درون تگ <picture> قرار می‌گیره و گزینه‌های مختلفی رو برای تصویر ارائه می‌ده.

مهم‌ترین خصوصیات تگ <source>:

• srcset (Source Set): مسیر فایل تصویری که باید بارگذاری بشه. می‌تونه شامل چندین تصویر با اندازه‌های مختلف باشه (برای تکنیک Art Direction).
• media: یک “Query” رسانه‌ای (Media Query) که مشخص می‌کنه چه زمانی این منبع باید استفاده بشه. مثلاً بر اساس عرض صفحه.
• sizes: به مرورگر می‌گه که تصویر در اندازه‌های مختلف صفحه چقدر فضا اشغال می‌کنه. این به مرورگر کمک می‌کنه تا تصویر با بهترین رزولوشن رو انتخاب کنه (برای تکنیک Resolution Switching).
• type: فرمت فایل تصویری رو مشخص می‌کنه (مثل `image/webp` یا `image/jpeg`). مرورگر فرمتی رو انتخاب می‌کنه که پشتیبانی کنه.

مثال ۱: Art Direction (تغییر تصویر بر اساس اندازه صفحه)

در این مثال، ما می‌خوایم یک تصویر بزرگ برای دسکتاپ، یک تصویر متوسط برای تبلت و یک تصویر کوچک برای موبایل نمایش بدیم.

<picture>
  <!-- برای صفحاتی که عرضشون حداقل 1000px هست -->
  <source srcset="images/landscape-big.jpg" media="(min-width: 1000px)">

  <!-- برای صفحاتی که عرضشون حداقل 600px هست -->
  <source srcset="images/landscape-medium.jpg" media="(min-width: 600px)">

  <!-- تصویر پیش‌فرض برای موبایل یا اگر هیچ کدام منطبق نبود -->
  <img src="images/landscape-small.jpg" alt="منظره زیبا">
</picture>

مثال ۲: Resolution Switching (انتخاب تصویر با بهترین رزولوشن)

در این مثال، ما دو نسخه از یک تصویر رو داریم (یک نسخه با وضوح معمولی و یک نسخه با وضوح بالا) و مرورگر خودش بر اساس قابلیت صفحه، بهترین رو انتخاب می‌کنه.

<picture>
  <source srcset="images/photo.jpg, images/photo-2x.jpg 2x">
  <img src="images/photo.jpg" alt="یک عکس">
</picture>

در اینجا `2x` یعنی نسخه دوم با دو برابر رزولوشن (در صفحه با تراکم پیکسلی بالا) استفاده بشه.

مثال ۳: پشتیبانی از فرمت‌های جدید (مثل WebP)

فرمت WebP معمولاً حجم کمتر و کیفیت بهتری نسبت به JPEG داره. با این روش، مرورگرهای جدید WebP رو انتخاب می‌کنن و مرورگرهای قدیمی‌تر به JPEG برمی‌گردن.

<picture>
  <source srcset="images/hero.webp" type="image/webp">
  <source srcset="images/hero.jpg" type="image/jpeg">
  <img src="images/hero.jpg" alt="قهرمان داستان">
</picture>

تگ‌های <picture> و <source> به شما این قدرت رو می‌دن که تجربه بصری کاربر رو در دستگاه‌های مختلف بهینه کنید و در مصرف پهنای باند صرفه‌جویی کنید.

با استفاده از این ابزارهای قدرتمند، می‌تونید مطمئن بشید که تصاویر شما در هر صفحه نمایشی، بهترین ظاهر و بهترین عملکرد رو دارن. موفق باشید! ✨