ریسپانسیو بودن تصاویر در css برای طراحان وب همیشه مسئله چالش بر انگیزی بوده پس همراه من باشید تا در این مقاله به شما ریسپانسیو کردن تصاویر را آموزش دهم . میدونید که تصاویر همیشه یکی از بحث‌های چالش برانگیز در طراحی سایت‌های ریسپانسیو هستند پس در این مطلب میخوایم تگ زیر را به شما آموزش دهیم! تگی که راه حلی رایج برای مشکل تصاویر ریسپانسیو هست رو بررسی کنیم.

<picture> 

رایج‌ترین راه حل

معمولا هر سایت ریسپانسیوی رو که باز کنید، داخل کدهای css اون سایت، چنین چیزی رو میبینید:

img {    max-width: 100%;    height: auto; }

این کد از 

max-width: 100%

 استفاده میکنه تا نذاره اندازه عرض تصویر بیشتر از عرض والدش بشه. اگر عرض والد کمتر از عرض تصویر بشه، عرض تصویر هم به همون نسبت کم میشه. 

height: auto

 هم باعث میشه تا متناسب با کم شدن اندازه عرض تصویر، ارتفاع تصویر هم کم بشه.

این راه حل، مشکل رو فقط از یک جنبه حل میکنه و اجازه میده تا تحت شرایط متفاوت، یک تصویر رو نمایش بدیم. ولی اگر بخوایم تحت شرایط متفاوت، تصاویر متفاوتی رو نشون بدیم چی؟

آموزش ریسپانسیو در css

<picture>

 تگ بالا یکی از عناصر جدید html5 هست که به شما این امکان رو میده چند تگ source (که هر کدوم از این تگ‌ها شامل محل تصویر و شرطی که تحت اون شرط باید تصاویر بارگذاری بشه) رو برای picture قرار بدید.

با این روش میتونید یک تصویر کاملا متفاوت رو با توجه به دو حالت زیر بارگذاری کنید:

• نتایج مدیاکوئری مثلا ارتفاع، عرض یا orientation دستگاه
• تراکم پیکسلی

یعنی شما میتونید:

• تصاویر با سایز مناسب، که باعث استفاده بهتر از پهنای باند میشه رو بارگذاری کنید
• تصاویر مختلف بریده شده با ابعاد مختلف رو با توجه به تغییرات layout در عرض‌های مختلف بارگذاری کنید
• تصاویر با رزولوشن بالاتر رو برای صفحه نمایش هایی با تراکم پیکسلی بالاتر بارگذاری کنید

<picture> چگونه کار میکند؟

مراحل اساسی کار با <picture>:

• ایجاد تگ‌های باز و بسته‌ی <picture></picture>
• اضافه کردن تگ <source> برای هر کوئری که قصد دارید اجرا شود
• استفاده از صفت media برای تعریف کوئری‌هایی مثل عرض، ارتفاع یا orientation دستگاه
• استفاده از صفت srcset برای مشخص کردن نام تصویر مربوطه جهت بارگذاری
• پشتیبانی از نمایشگرهای با تراکم پیکسلی بالا (رتینا) با اضافه کردن نام تصاویر دیگر به صفت srcset
• اضافه کردن تگ <img> به عنوان fallback یا تصویر پیش‌فرض

این مثال یه مثال ساده هست که اگر سایز صفحه نمایش کمتر از 768px بود، تصویر کوچک‌تر رو بارگذاری میکنه:

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

سینتکس استفاده شده در صفت media دقیقاً مشابه همان چیزی است که در CSS برای ساخت مدیاکوئری استفاده می‌کنید.

می‌توانید از ویژگی‌هایی زیر استفاده کنید:

max-width
min-width
max-height
min-height
orientation 

میتونید کوئری ای بنویسید که مثلا یه تصویر رو با توجه به عمودی یا افقی بودن دستگاه، بارگذاری کنید. خوبیش اینه که میتونید چند کوئری رو همزمان بنویسید. به مثال زیر توجه کنید:

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

کد بالا عملیات زیر را انجام میدهد:

• برای دستگاه‌هایی با سایز کمتر از 40em و حالت افقی --->  تصویر smaller_landscape.jpg را نمایش میدهد.
• برای دستگاه‌هایی با سایز بیشتر از 40em و حالت افقی ---> تصویر default_landscape.jpg
• برای دستگاه‌هایی با سایز کمتر از 40em و حالت عمودی ---> تصویر smaller_portrait.jpg
• برای دستگاه‌هایی با سایز بیشتر از 40em و حالت عمودی ---> تصویر default_portrait.jpg

 استفاده ساده از تصاویر با رزولوشن بالاتر در نمایشگرهای رتینا

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

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

 توضیح مرحله به مرحله

• اول مدیاکوئری بررسی می‌شود ---> مشخص می‌کند کدام تصویر باید برای اندازه‌های مختلف صفحه نمایش بارگذاری شود.
• بعد تصویر انتخاب‌شده نمایش داده می‌شود.
• اگر عرض صفحه کمتر از 768px باشد ---> تصویر smaller.jpg نمایش داده می‌شود.
• اگر همان دستگاه نمایشگر رتینا باشد ---> به جای smaller.jpg، تصویر با کیفیت بالاتر یعنی smaller_retina.jpg نمایش داده می‌شود.
• در حالت پیش‌فرض (بدون محدودیت عرض) ---> تصویر default.jpg نمایش داده می‌شود.
• و اگر نمایشگر رتینا باشد → نسخه‌ی با کیفیت‌تر یعنی default_retina.jpg جایگزین می‌شود.

 انتخاب فرمت‌های تصویر مدرن (WebP و AVIF)

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

چرا WebP و AVIF؟

• WebP: توسط گوگل معرفی شد، حجم کمتر نسبت به JPEG و PNG، پشتیبانی از شفافیت و انیمیشن.
• AVIF: فرمت جدیدتر مبتنی بر کُدک AV1، فشرده‌سازی بهتر از WebP و کیفیت بالاتر در حجم کمتر.
• مزیت اصلی: سرعت بارگذاری بیشتر، مصرف کمتر پهنای باند و بهبود تجربه کاربری.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="تصویر اصلی صفحه">
</picture>

• در کد بالا، مرورگر ابتدا بررسی می‌کند آیا از AVIF پشتیبانی می‌کند؛ اگر نه، سراغ WebP می‌رود.

• در نهایت اگر هیچ‌کدام پشتیبانی نشد، تصویر JPEG یا PNG نمایش داده می‌شود.

   بارگذاری تنبل و بهینه‌سازی اولویت‌ها

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

  چرا بارگذاری تنبل مهم است؟

• کاهش درخواست‌های اولیه HTTP
• افزایش سرعت بارگذاری صفحه (بهبود Core Web Vitals)

• صرفه‌جویی در مصرف اینترنت کاربران

  نحوه استفاده

  <img 
    src="gallery-1.webp" 
    alt="نمونه کار شماره یک" 
    loading="lazy" 
    decoding="async">
  

✅ همین حالا از <picture> استفاده کنید

امروزه مرورگرهای مدرن (کروم، فایرفاکس، اج، سافاری، اپرا و مرورگرهای موبایل) به طور کامل از <picture> پشتیبانی می‌کنند.

بنابراین می‌توانید بدون نگرانی از ناسازگاری، در پروژه‌های خود از این قابلیت استفاده کنید و تصاویر خود را ریسپانسیو کنید!