تصاویر واکنش گرا( ریسپانسیو ) در طراحی سایت

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

بیش از ۶۰ درصد حجم صفحات وب به تصاویر اختصاص دارد. یکی از روش‌های مهم برای کاهش حجم سایت که در هنگام طراحی سایت می‌بایست به انجام برسد، کاهش حجم تصاویر است. از نکات اولیه در کاهش حجم تصاویر، بهینه‌سازی آن‌ها و فشرده‌سازی در بیشترین حد ممکن است. با این حال، فشرده‌سازی بیش از اندازه، سبب کاهش کیفیت تصاویر می‌شود که سبب می‌شود کاهش حجم همیشه به مقدار قابل قبول در دسترس نباشد.

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

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

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

تصاویر واکنش گرا به دو صورت قابل استفاده هستند. در روش قدیمی، با استفاده از امکانات طراحی سایت واکنش گرا و با استفاده از ویژگی‌های CSS، تصاویر پس‌زمینه بر اساس عرض صفحه می‌توانستند متفاوت باشند.

در استانداردهای جدید این امکان به تصاویر عادی img نیز اضافه شده‌اند و یک تگ جدید با نام picture نیز، به طور خاص برای تصاویر واکنش‌گرا توسعه یافته است.

چگونه تصاویر واکنش گرا داشته باشیم؟

برای ایجاد تصاویر واکنش گرا با استفاده از تگ img دو صفت جدید به این عنصر اضافه شده است که ما را در انجام این کار یاری می‌کنند.

در نمونه کد بالا مشاهده می‌کنید که صفت srcset چگونه برای تعریف چندین فایل تصویر به کار رفته است. هر تصویر با علامت ویرگول از تصاویر دیگر مجزا می‌شود و عرض آن با واحد پیکسل و پسوند w در انتهای مسیر قرار می‌گیرد. مرورگرهای مختلف ممکن است بسته به شرایط مختلف، از جمله عرض صفحه‌ی نمایش، عرض مرورگر، سرعت اینترنت، درخواست و تنظیمات کاربر یا شرایط دیگر هر یک از تصاویر فوق را دانلود کنند. این کار تضمین می‌کند که کاربران متناسب با شرایط و خواسته‌های خود بتوانند حجم کمتری از پهنای باند را مصرف کنند و سایت شما را سریع‌تر مشاهده کنند.

ثبت صفت src علاوه بر srcset سبب می‌شود کاربرانی با مرورگرهای قدیمی‌تر بتوانند از سایت به درستی استفاده کنند.

صفت sizes

صفت دیگر sizes است که مشخص می‌کند هر تصویر در چه شرایطی، در چه ابعادی نمایش داده شود. این صفت جایگزینی برای تنظیمات واکنش گرا در css است.

شیوه‌ی استفاده از صفت sizes به صورت زیر است:

به عنوان مثال:

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

استفاده از دو صفت srcset و sizes در کنار هم کمک می‌کند تا تصاویر با بیشترین کیفیت و کمترین حجم را در تمامی مرورگرها و تمامی ابزارها در اختیار داشته باشیم.

وردپرس و تصاویر واکنش گرا

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

وردپرس
نکته‌ی قابل توجه در این بخش، اضافه شدن یک اندازه‌ی جدید به تصاویر آپلود شده است. علاوه بر اندازه‌‌های قبلی تصاویر، اندازه‌ی جدیدی با نام medium_large با عرض ۷۶۸ پیکسل و ارتفاع نامحدود، ایجاد و ذخیره می‌شود تا در تصاویر واکنش‌گرا مورد استفاده قرار بگیرد.

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

این قابلیت در حال حاضر تقریبا در تمامی مرورگرهای مورد استفاده، به خوبی پیشتیبانی می‌شود. اگر در هنگام تعریف تصاویر علاوه بر srcset از ویژگی src نیز استفاده کنید، جای نگرانی باقی نمی‌ماند. زیرا افرادی که از مرورگرهای قدیمی استفاده می‌کنند نیز می‌توانند تصویر پیش‌فرض را با کیفیت و حجم غیربهینه مشاهده کنند و مشکلی در نمایش گرافیکی سایت رخ نخواهد داد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱