آخرین بازبینی: ۱۴۰۲/۰۲/۳۱

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

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

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

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

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

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

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

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

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

<img
	srcset="img/detail/large.jpg 1600w, 
	        img/detail/medium.jpg 960w,
	        img/detail/small.jpg 480w"
	src="img/detail/medium.jpg"
	alt="ROKAWEB">

<img

srcset="img/detail/large.jpg 1600w,

img/detail/medium.jpg 960w,

img/detail/small.jpg 480w"

src="img/detail/medium.jpg"

alt="ROKAWEB">

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

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

صفت sizes

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

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

<img src="one.png"
	srcset="two.png 100w, three.png 500w, four.png 1000w"
	sizes="<شرط مدیا> <width>,
		<شرط مدیا> <width>,
		<عرض پیش‌فرض>"
>

<img src="one.png"

srcset="two.png 100w, three.png 500w, four.png 1000w"

sizes="<شرط مدیا> <width>,

<شرط مدیا> <width>,

<عرض پیش‌فرض>"

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

<img src="img-500.png"
	srcset="img-500.jpg 500w, img-1000.jpg 1000w, img-1500.png 1500w"
	sizes="(min-width: 1000px) 1000px,
		(min-width: 1500px) 1500px,
		500px"
>

<img src="img-500.png"

srcset="img-500.jpg 500w, img-1000.jpg 1000w, img-1500.png 1500w"

sizes="(min-width: 1000px) 1000px,

(min-width: 1500px) 1500px,

500px"

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

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

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

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

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

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

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

روش‌های دیگر کاهش حجم تصاویر در صفحات وب

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

استفاده از فرمت‌های مدرن تصاویر مثل avif و webp هنگامی که کارایی بهتری ارائه می‌کنند.
تنظیمات cache مناسب روی وب سرور برای جلوگیری از دانلود چندباره‌ی تصاویر یکسان
استفاده از CSS Sprites برای کاهش تعداد و حجم تصاویر کوچک استفاده شده در سایت
استفاده از تصاویر برداری SVG هنگامی که یک مزیت به حساب بیایند