واکنشگرا کردن تصاویر (جلسه آخر) : تعاریف - نتیجه گیری و جمع بندی

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.

در این قسمت با آخرین جلسه از واکنشگرا کردن تصاویر در خدمتتون هستم.

در این جلسه میخایم تعدادی راه و روش و منبع و نکات پایانی رو خدمتتون عرض کنیم.

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

اولین قدمی که میخایم یک سایت رو ببینیم و تصاویر اون رو واکنشگرا کنیم اینه که اون رو بررسی کرده و مورد آنالیز قرار بدیم. برای اینکار میتونین این آموزش رو مطالعه کنید و دید بهتری نسبت به بازرسی سایت داشته باشید.

Compatibility یا سازگاری

پشتیبانی مرورگرها برای واکنشگرا کردن تصاویر بسرعت در حال رشد و نمو هست. از آگوست 2015 مروگرهای کروم، فایرفاکس و اپرا تمام موارد picture و srcset و sizes و type رو پشتیبانی میکنن.

Microsoft Edge و Safari از srcset با توصیف گر x پشتیبانی میکنن، ولی از توصیف گر width پشتیبانی نمیکنن. مایکروسافت برای پشتیبانی کامل از واکنشگرا کردن تصاویر گام برداشته.

زمانی که ویژگی image-set رو بررسی میکنیم، میبینیم که کارهای زیادی برای انجام وجود دارن.

PictureFill

اما حتی اگر همه مرورگرهای جدید و مدرن از استانداردهای موجود برای واکنشگرا کردن تصاویر پشتیبانی میکردن، همچنان باید راهی رو پیدا میکردیم که این Syntax رو به مرورگرهای قدیمی نیز بفهمونیم. اینجا هست که PictureFill polyfill خودشو نشون میده.

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

اتوماتیک کردن فرآیند تصاویر

در قسمت قبلی بیان شد که انسانها نباید خودشون بصورت دستی برای تک تک تصاویر Image Breakpoint ها رو پیدا کنن و استفاده کنن و باید نرم افزاری باشه که بصورت اتوماتیک این کار رو برای ما انجام بده.

هدف نهایی و عمده ای که بیشتر سازمان ها دارن اینه که فرآیند واکنشگرا کردن و تغییر سایز تصاویر بصورت اتوماتیک انجام بشه و خودشون خیلی در اون نقشی نداشته باشن و دخیل نباشن.

برای مواردی که Resolution Switching هستند میتونین آیتمهای زیر رو مدنظر قرار بدین:

• تا جایی که ممکن هست از تصاویر SVG که در هر سایزی خوب نمایش داده میشن استفاده کنید
• زمانی که قالب سایت رو میسازید و یا اون رو تغییر میدین، طراح قالب سایز تصاویر رو برای تصاویر متفاوت مشخص کنه و قرار بده
• از srcset با توصیف گر width استفاده کنید و از قدرت سرور و این ویژگی بهره ببرید
• نویسنده ای که داره متنی رو مینوسه، نباید در مورد تصاویر و سایز اون نگرانی داشته باشه و کاری رو اون نباید انجام بده. تنها کاری که نویسنده باید بکنه اینه که تصویر بزرگ و با کیفیت رو در اختیار سایت قرار بده و بقیه کار با استفاده از سرور و کدهای برنامه نویسی انجام بشه و سایزهای مورد نیاز تهیه بشه.

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

سیستمهای مدیریت محتوا یا CMS ها، هر کدام به نوبه خود روشهایی رو برای تغییر سایز تصاویر و واکنشگرا کردن اونا در نظر گرفتن. گروه تصاویر واکنشگرا یا RICG یک پلاگین رو برای وردپرس تهیه کرده و هم اکنون دارن بر روی اینکه این قابلیت ها رو به هسته اصلی وردپرس اضافه کنن، تلاش میکنن. همچنین Drupal 8 از ماژول تصاویر واکنشگرا استفاده میکنه. (جزئیات بیشتر)

امیدوارم که این سری آموزشی تونسته باشه شما رو بیشتر با استانداردها و روشهای واکنشگرا کردن تصاویر آشنا بکنه.

موفق و سربلند باشید.

یا علی