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

ارائه تصاویر واکنشگرا (responsive images) علاوه بر کمک به افزایش سرعت لود سایت در موبایل و دستگا‌ه‌های کوچک باعث بهبود تجربه کاربری (با ارائه تصاویر بزرگتر) در دسکتاپ و دستگاه‌های بزرگتر مانند تلویزیون می‌شود.

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

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

آنچه در این مقاله می‌خوانیم

تغییر اندازه عکس ها

دو مورد از محبوب‌ترین ابزارهای تغییر اندازه تصویر جهت رسپانسیو کردن آن‌ها، بسته sharp npm و ابزار ImageMagick CLI هستند.

بسته sharp  انتخاب خوبی برای تغییر اندازه خودکار تصاویر است (به‌عنوان‌مثال، ایجاد چندین اندازه مختلف از عکس‌ها برای همه ویدیوهای وب‌سایت شما) و همچنین سریع و به‌راحتی با اسکریپت‌ها و ابزارهای ساخت ادغام می‌شود. از طرف دیگر، ImageMagick برای تغییر اندازه یک تصویر مناسب است زیرا به طور کامل از خط فرمان استفاده می‌شود.

ساخت تصاویر واکنشگرا با sharp

بسته sharp  را می‌توانید به‌صورت زیر در پروژه خود برای تغییر سایز دسته‌جمعی تصاویر جهت تسریع فرایند واکنشگرا کردن آنها به کار بگیرید.

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ساخت تصاویر رسپانسیو با ImageMagick

ImageMagick یک مجموعه رایگان و متن باز برای نمایش، ایجاد، تبدیل، اصلاح و ویرایش تصاویر پیکسلی است. این نرم‌افزار عمدتاً از تعدادی ابزار رابط خط فرمان برای دستکاری تصاویر تشکیل شده است. ImageMagick مانند Adobe Photoshop و GIMP یک رابط کاربری گرافیکی قوی برای ویرایش تصاویر ندارد.

به عناون نمونه برای تغییر اندازه یک تصویر به 33% از اندازه اصلی، دستور زیر را در ترمینال خود اجرا کنید:

convert -resize 33% flower.jpg flower-small.jpg

و همچنین برای تغییر اندازه یک تصویر به اندازه عرض 300 پیکسل در ارتفاع 200 پیکسل، دستور زیر را اجرا کنید:

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

چند نسخه از تصویر را باید ایجاد کنید؟

برای این سؤال پاسخ‎‌های مختلفی وجود دارد. بااین‌حال، ارائه ۳ تا ۵ اندازه مختلف از یک تصویر برای واکنشگرا بودن آن معمول است. ارائه اندازه‌های بیشتر تصویر برای عملکرد بهتر است، اما فضای بیشتری را در سرورهای شما اشغال می‌کند و نیاز به نوشتن کمی HTML بیشتر دارد.

سایر ابزارهای رسپانسیو کردن تصاویر

ابزارهای دیگری مانند Thumbor (متن‌باز) و Clodinary نیز برای ایجاد تصاویر responsive  در وب‌سایت هستند که ارزش بررسی کردن را دارند. این ابزارها تصاویر واکنشگرا را بر اساس نیاز شما ارائه می‌دهند.

ارائه تصاویر واکنشگرا در HTML

در ارائه تصاویر responsive توسعه دهنده چندین تصویر مختلف را در srcset مشخص می‌کند و مروگر باتوجه به شرایط متفاوت از تصویر مناسب آن استفاده خواهد کرد.

ویژگی‌های src، srcset و size تگ <img> همگی برای رسیدن به این نتیجه نهایی با هم تعامل دارند.

ویژگی “src”:

ویژگی src باعث می‌شود مرورگرهایی که از ویژگی‌های srcset و sizes پشتیبانی نمی‌کنند یک عکس به‌عنوان عکس اصلی را در صفحه بارگذاری کنند. در این حالت تصویر موردنظر ما برای واکنشگرا کردن تصاویر لود نمی‌شود اما برای ارائه تجربه کاربری بهتر لازم است که یک عکس بارگذاری شود.

منبع مشخص شده توسط ویژگی src باید به اندازه کافی بزرگ باشد تا در تمام دستگاه‌ها به خوبی کار کند.

ویژگی “srcset”

ویژگی srcset لیستی از نام فایل‌های تصویری جدا شده با کاما و توصیف‌کننده عرض یا چگالی آنهاست.

این مثال از توصیف‌کننده‌های عرض استفاده می‌کند. 480w یک توصیف‌کننده عرض است که به مرورگر می‌گوید که تصویر flower-small.jpg به‌اندازه  480px عرض دارد. 1080w هم یک توصیف‌کننده عرض است که به مرورگر می‌گوید که flower-large.jpg ۱۰۸۰ پیکسل عرض دارد.

“Width Descriptor” به نظر فانتزی به نظر می‌رسد، اما تنها راهی برای گفتن عرض یک تصویر به مرورگر است. این کار مرورگر را از نیاز به دانلود تصویر برای تعیین اندازه آن نجات می‌دهد.

از واحد w (به‌جای px) برای نوشتن توصیفگرهای عرض استفاده کنید. به‌عنوان‌مثال، یک تصویر با عرض ۱۰۲۴ پیکسل به‌صورت 1024w نوشته می‌شود.

برای ارائه اندازه‌های مختلف تصویر، نیازی به دانستن توصیفگرهای چگالی (density descriptors) ندارید. بااین‌حال، اگر در مورد نحوه عملکرد توصیفگرهای چگالی کنجکاو هستید، به Resolution Switching code lab مراجعه کنید. توصیفگرهای تراکم برای ارائه تصاویر مختلف بر اساس تراکم پیکسلی دستگاه استفاده می‌شود. کد زیر نمونه ای استفاده از توصیفگر چگالی برای تصاویر رسپانسیو است.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

ویژگی “sizes”

مشخصه sizes به مرورگر می‌گوید که وقتی تصویر نمایش داده می‌شود عرض آن چقدر است. بااین‌حال، ویژگی sizes هیچ تأثیری بر اندازه تصویر حین نمایش ندارد و شما باید از CSS برای تغییر اندازه عکس استفاده کنید.

مرورگر از این اطلاعات به همراه اطلاعاتی که در مورد دستگاه کاربر می‌داند (ابعاد و تراکم پیکسلی آن) استفاده می‌کند تا مشخص کند کدام تصویر باید بارگذاری شود.

اگر یک مرورگر ویژگی “sizes” را تشخیص ندهد، به بارگیری تصویر مشخص شده توسط ویژگی “src” اکتفا می‌کند. (مرورگرها باید به‌صورت هم‌زمان ویژگی‌های “sizes” و “srcset” را پشتیبانی کنند، بنابراین یک مرورگر یا از هر دو ویژگی پشتیبانی می‌کند یا هیچ‌کدام).

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

• 100px
• 33vw
• 20em
• calc(50vw-10px)

اندازه زیر معتبر نیست:

• 25% (درصدها را نمی توان با ویژگی size استفاده کرد)

علاوه بر همه تنظیماتی که ارائه شد، همچنین می‌توانید از همین مفاهیم برای کارگردانی هنری (Art Direction) استفاده کنید. Art Direction  فرایند ارائه تصاویر کاملاً متفاوت (به‌جای نسخه‌های مختلف از یک تصویر) در نماهای مختلف است.

تایید نهایی

بعد از اینکه پیاده‌سازی تصاویر واکنشگرا را به اتمام رساندید، می‌توانید از Lighthouse برای حصول اطمینان از عملکرد صحیح آن استفاده کنید. از مسیر (Lighthouse > Options > Performance) عملکرد Lighthouse را اجرا کنید. این گزارش تصاویری را که نیاز به تغییر اندازه دارند فهرست می‌کند.

سوالات متداول