راهنمای استفاده از تصاویر webp به صورت عملی

Using WebP Images

2 264

چطور از تصاویر webp استفاده کنیم؟

در مقاله ی قبلی که در مورد webp نوشتم سعی کردم شما را با آن آشنا کرده و مزایای آن را توضیح بدهم اما در این مقاله میخواهم نحوه ی استفاده از تصاویر webp را به شما نشان بدهم.

قبل از شروع باید تذکر بدهم: تصاویر webp فرمتی نسبتا جدید هستند و مرورگرهای قدیمی تر از آن پشتیبانی نمی کنند بنابراین نمی توانیم تمامی تصاویر jpeg یا png سایت خود را با آن ها تعویض کنیم. هنوز چند سالی تا آن وضعیت فاصله داریم بنابراین باید روش دیگری را امتحان کنیم که در این مقاله توضیح داده خواهد شد. با این حال اگر مطمئن هستید که تمام کاربران شما مرورگرهای به روزی دارند می توانید آن را یک جایگزین کامل بدانید.

تبدیل تصاویر به webp با فتوشاپ

می توانید به راحتی و با استفاده از پلاگین فتوشاپ برای تصاویر webp تصاویر عادی خود را به webp تبدیل نمایید. روش کار بدین شکل است که ابتدا تصویر خود را طراحی می کنید و سپس در هنگام ذخیره ی تصویر نباید از گزینه ی Save For Web استفاده کنید بلکه Save As را انتخاب کرده و از منوی ظاهر شده WebP یا WebP Lossless (بدون افت کیفیت) را انتخاب کنید؛ تفاوت این دو مانند png و jpeg است بنابراین هنگام تبدیل تصاویر jpeg به webp از گزینه ی WebP و هنگام تبدیل png به webp از گزینه ی WebP Lossless استفاده کنید.

اگر از گزینه ی WebP Lossless استفاده کنید همه چیز به صورت خودکار انجام می شود اما اگر از گزینه ی WebP استفاده کنید با پنجره ی زیر روبرو می شوید:

تنظیمات خروجی webp در پلاگین webp برای فتوشاپ
تنظیمات خروجی webp در پلاگین webp برای فتوشاپ

هر چه کیفیت بالاتری را انتخاب کنید، حجم تصویر نیز بالاتر خواهد بود. همچنین اگر تعداد زیادی تصویر دارید می توانید آن ها را با استفاده از batch process به صورت یکجا تبدیل به webp کنید. البته راه دیگر استفاده از node.js است.

تبدیل تصاویر به webp با Node

Node.js از ابزارهای بسیار کاربردی برای برنامه نویسی است که البته کاربردهای بسیار دیگری نیز دارد (مانند npm). یکی از پکیج های Node به نام  imagemin به ما اجازه می دهد که با تصاویر کار کنیم (فشرده سازی، تبدیل و …). برای کار با webp باید imagemin را به همراه پلاگین  imagemin-webp نصب کنیم:

زمانی که نصب تمام شد یک فایل جدید به نام webp.js در root پروژه بسازید:

با استفاده از این قالب می توانید تمام تصاویر را به webp تبدیل کنید. البته توجه داشته باشید که فرض این کد این است که تمام تصاویر شما در پوشه ای به نام img قرار دارند. اگر چنین حالتی را دوست ندارید باید مقدار outputFolder را تغییر دهید.

زمانی که کدها را آماده و ذخیره کردید دستور زیر را در ترمینال اجرا کنید:

در تستی که ما انجام دادیم تصاویر 2.75 MB به 1.04 MB کاهش پیدا کردند (حدود 62 درصد فشرده سازی).

استفاده از webp در HTML و CSS

استفاده از webp در HTML مانند دیگر تصاویر است:

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

تصاویر webp در مرورگر های قدیمی نمایش داده نمی شوند.
تصاویر webp در مرورگر های قدیمی نمایش داده نمی شوند.

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

با این کار اگر مرورگری از webp یا picture پشتیبانی نکند مستقیما تصویر داخل تگ img را به کاربر نمایش خواهد داد.

البته مسئله برای CSS به این سادگی نیست. متاسفانه CSS راه حلی برای این موضوع ندارد و برخی از راه حل ها مانند تعیین چندین تصویر پس زمینه ممکن است باعث دانلود هر دو تصویر شوند که از نظر سرعت ضربه ی بزرگی به وب سایت ما می زند.

راه حل Modernizr است. Modernizr یک کتابخانه ی مدرن است که قابلیت های هر مرورگر را تشخیص می دهد و با استفاده از تگ <script> به وبسایت شما اضافه می شود. شما می توانید از طریق این صفحه تنها قسمت مربوط به webp را دانلود کنید تا قسمت های اضافی که نیازی به آن ها نیست به حجم وب سایتتان اضافه نکنند.

زمانی که این کتابخانه در سایت شما بارگذاری شود یکی از دو کلاس زیر را به <html> اضافه می کند:

  • اگر مرورگر از webp پشتیبانی کند کلاس webp اضافه خواهد شد.
  • در غیر این صورت از کلاس no-webp استفاده می شود.

بنابراین می توان گفت:

سوال: کاربرانی که جاوا اسکریپت را غیرفعال کرده اند چطور؟

پاسخ: این دسته از کاربران شاید 1 درصد از ترافیک شما را هم تشکیل ندهند. در تمام مرورگرها از سال های سال پیش جاوا اسکریپت به صورت خودکار فعال است و اکثر کاربران حتی خبر ندارند که می توانند آن را غیرفعال کنند. همچنین امروزه وب سایت ها به شدت به جاوا اسکریپت وابسته هستند و تقریبا هیچ کسی وجود ندارد که از آن استفاده نکند. بنابراین می توانید با خیال راحت این دسته از کاربران را نادیده بگیرید اما اگر واقعا دوست دارید برای آن ها هم کاری انجام دهید میتوانیم کلاسی مانند no-js را به <html> اضافه کنیم:

سپس کد جاوا اسکریپت زیر را به HTML اضافه میکنیم:

اگر کاربر جاوا اسکریپت داشته باشد این کلاس حذف خواهد شد در غیر این صورت باقی میماند. حالا می توانیم در CSS بگوییم:

بنابراین نیازی به راه های پیچیده وجود ندارد. امیدوارم این مقاله به شما نشان داده باشد که راه های استفاده از webp بسیار زیاد است و شما میتوانید بر اساس سلیقه ی خود با آن ها کار کنید.

2 نظر
  1. نسترن
    0

    مقاله عالی بود! تشکر!

    1. امیر زوارمی
      0

      سلام دوست عزیز،
      خوشحالم که براتون مفید بوده

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.