تصاویر همیشه از جنبه های سخت طراحی واکنش گرا بوده اند . امروز می خواهیم نگاهی به تگ <picture> در HTML5 بیندازیم و ببینیم چگونه با استفاده از آن می توانیم عکس ها و تصاویر صفحه وب را به صورت کاملا ریسپانسیو طراحی کنیم .

اول , مشکل

واقعیت این است که روزهای طراحی صفحه  با عرض ثابت (fixed-width) و بر پایه پیکسل به سر آمده است .این روزها متعلق به مانیتور های عریض , تلویزیون های هوشمند 5k و انواع تبلت ها و گوشی های هوشمند با سایزهای صفحه مختلف است و سایت ما باید به درستی در همه چیز نمایش داده شود . از یک گوشی با عرض 320px تا صفحات  با عرض حدود 7680px.

با توجه به این گستره زیاد ابعاد صفحه نمایش ها تصاویر ما باید بتوانند به خوبی خود را با ابعاد مورد نیاز وفق دهند و بزرگ و کوچک شوند . به غیر از تصاویر وکتور (Vector) که در بند ابعاد پیکسلی نیستند و درصد کمی از تصاویر سایت را تشکیل می دهند, اکثر تصاویر ما همیشه با عرض و طول ثابت هستند و این یک مشکل است .

چه باید بکنیم ؟

راه حل فعلی و فراگیر

به عنوان یک قانون کلی شما در اکثر سایت های ریسپانسیو کد زیر را پیدا خواهید کرد که به تصاویر اعمال شده است :

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

این کد از دستور max-width: 100%; استفاده می کند تا مطمئن شود ابعاد تصویر هیچ گاه از ابعاد والد خود فراتر نخواهد رفت . اگر والد تصویر بنا به خواص ریسپانسیو بودن صفحه , کوچک شد تصویر نیز با توجه به آن کوچک می شود. دستور height: auto; نیز به ما کمک می کند تا مطمئن شویم نسبت عرض و ارتفاع تصویر هیچگاه به هم نمی خورد و اگر عرض تصویر بزرگ شود , ارتفاع آن نیز به همان نسبت بزرگ می شود و بر عکس .

این روش مشکل را حل می کند ولی فقط از یک جهت . یعنی به ما اجازه می دهد یک تصویر را در موقعیت های مختلف درست نمایش دهیم ولی به ما اجازه نمی دهد برای موقعیت های مختلف , از تصاویر مختلف استفاده کنیم .

یک راه حل جدید :<picture>

<picture> یکی از تگ های جدید HTML5 است . این تگ به ما کمک می کند تصاویر responsive را به مانند تگ های <audio> و <video> قرار دهیم . می توانیم برای این تگ چندین منبع عکس مشخص کنیم و برای هر کدام شرایط تعیین کنیم که کدام عکس چه موقع نمایش یابد .

یعنی به شما امکان می دهد یک تصویر به کلی متفاوت را بر اسا یکی از شرایط زیر لود کنید :

• بر اساس مدیاکوئری ها مثل ارتفاع مرورگر , عرض مرورگر و جهت صفحه (افقی یا عمودی)
• بر اساس تراکم پیکسلی

و این به این معنی است که :

• می توانید فایل را با حجم مناسب استفاده کنید و در پهنای باند صرفه جویی کنید.
• می توانید تصاویر بریده شده مختلف با نسبت ابعاد مختلف را برای عرض های  مختلف صفحه لود کنید.
• می توانید تصاویر با وضوح بالا را فقط برای نمایشگرهایی با تراکم پیکسلی بالا مثل رتینا اپل , لود کنید.

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

گام های ساده استفاده از تگ <picture> اینها هستند :

1. تگ های شروع و پایان <picture> </picture> را بنویسید.
2. داخل تگ بالا ,برای هر کوئری که می خواهید ایجاد کنید یک تگ <source> ایجاد کنید.
3. خصیصه media را برای هر کدام از تگ های گام 2 که می خواهید اضافه کنید .
4. خصیصه srcset را برای لود تصاویر متناظر با هم نیز اضافه کنید.
5. نام فایل های اضافی را داخل خصیصه srcset اضافه کنید اگر می خواهید برای وضوح بالاتر فایل جداگانه داشته باشید.
6. یک تگ معمولی <img> نیز در انتها اضافه کنید به عنوان fallback . اگر به هر دلیلی تگ های دیگر کار نکردند این تگ حداقل می تواند عکس را نشان دهد و یه پشتیبان اضطراری به حساب می آید.

در اینجا می خواهیم یک مثال ساده بزنیم . کد زیر چک می کند اگر عرض viewport (ناحیه ای از مرورگر که شما می بینید) کمتر از 768px باشد , آنگاه تصویر کوچکتر را لود می کند :

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

دقت کنید که نحوه نوشتن مقدار خصیصه media درست مثل همان کاری است که احتمالا در هنگام نوشتن Media Query های 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>

همچنین اگر می خواهید تصویر با وضوح بالاتر را برای نمایشگرهای رزولیشن بالا لود کنید باید نام فایل مرتبط را در ادامه به خصیصه srcset بدید.به 2x انتهیا فایل نیز دقت کنید . برای مثال :

<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>

نحوه پشتیبانی مرورگرها از تگ <picture>

همه مرورگرهای جدید از این تگ پشتیبانی می کنند (اینجا) . ولی در صورت نیاز می توانید فایل JavaScript بنام PictureFill را نیز به صفحه اضافه کنید تا این قابلیت به همه رمرورگرهایی که آن را پشتیبانی نمی کنند اضافه شود .

منبع