در مقاله ی قبلی که در مورد 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 برای فتوشاپ
هر چه کیفیت بالاتری را انتخاب کنید، حجم تصویر نیز بالاتر خواهد بود. همچنین اگر تعداد زیادی تصویر دارید می توانید آن ها را با استفاده از 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 مانند دیگر تصاویر است: