قبلا در اینجا توضیح کوتاهی در مورد فرمت جدید تصویر webp ارائه کردم
در این مطلب به صورت اختصاصی با معرفی افزونه webp express برای وردپرس کمی بیشتر با فرمت webp آشنا می‌شویم و مراحل فعالسازی و استفاده این فرمت در وردپرس را دنبال می کنیم.
WebP فرمت جدید عکسی است که گوگل آن را برای استفاده در وب بنا کرده‌اند. فرمتی که با نوعی فشردهسازی خاص، با حفظ کیفیت عکس در نهایت حجم کم‌تری ارائه میکند که باعث سریع‌تر شدن صفحات وب خواهد شد. این فرمت البته در سال ۲۰۱۰ و به صورت متن باز ارائه شده بود اما به تازگی استفاده از آن رونق بسیار بیشتری پیدا کرده است.
دو نوع فایل با فرمت WebP وجود دارد. آنها که اصطلاحا Lossless یا بدون افت کیفیت کار فشردهسازی را انجام می‌دهند و آنها که Lossy و با افت کیفیت کار را به اتمام می‌رسانند.
پشتیببانی از این فرمت
هنوز بسیاری از برنامه‌های نمایش عکس این فرمت را نمایش نمی‌دهند، از جمله برنامه نمایش عکس پیش‌فرض ویندوز ۱۰ اما مرورگر کروم، مرورگر فایرفاکس، اپرا و مرورگر اج و البته مرورگر اینترنت اکسپلورر ۶ به بعد به راحتی آن را نمایش می‌دهند.
از انجای که تقریبا بیشتر از ۶۰ درصد بازدید‌های از کاربران تلفن هماره صورت میگیرد و از هر ۵ کاربر ۴ کاربر داری مرورگری هستند که از webp پشتیبانی میکند استفاده از این فرمت هم سرعت بارگزاری سایت را افزایش می‌دهد هم در پهنای باند کاربر و هاست صرفه جویی میشود
نتایج سایت caniuse.com
درحالی که وردپرس از فرمت‌های مشهور PNG, JPEG,ICO و GIF پشتیبانی میکند اما اثری از WebP در این لیست وجود ندارد!
ما می‌توانید با افزونه رایگان webp express این قابلیت را به وردپرس اضافه کنید
این افزونه امکان تبدیل گروهی کلیه تصاویر آپلود شده قبلی و همجنین تصاویر آپلود شده بعد از نصب افزونه را به فرمت دارد در عین حال فایل های JPEG و PNG را به مرورگرهایی که از webp پشتیبانی نمی‌کنند،ارسال میکند.
این افزونه از کتابخانه WebP Convert برای تبدیل تصاویر به webp استفاده میکند. WebP Convert قادر است تصاویر را با استفاده از چندین روش تبدیل کند. روش‌های تبدیل محلی عبارتند از: cwebp، gd، imagick. اگر هیچ کدام از این ها در میزبان شما کار نمی کند، جایگزین های ابری وجود دارد: ewww (رایگان نیست) یا اتصال به یک سایت وردپرس که WebP Express را نصب کرده اید و قابلیت سرویس وب را فعال کرده اید می تواند تبدیل را انجام دهد
نمونه تصویر‌های تبدیل شده
روش کار:
ابتدا افزونه را نصب کنید صفحه افزونه webp-express (این افزونه منبع باز استصفحه گیت هاب )
افزونه را فعال کنید و از برگه تنظبمات> WebP Express را انتخاب کنید
در قسمت Operation mode نحوه عملکرد برنامه مشخص میشود گزینه Varied image responses باعث میشود در صورت که مرورگر از WebP پشتیبانی میکند و قایل WebP موجود است به مرورگر تحویل داده شود در غیر این صورت عملیات تبدیل انجام شود
در قسمت Image types to work on هم می توانید فرمت‌های که افزونه با آنها کار میکند را انتخاب کنید (فقط Jpeg یا هر دو PNG و Jpeg )
در قسمت Destination folder هم محل ذخیره فایل‌های تبدیل شده را تعیین میکنید پیش‌فرض گزینه In separate folder است که پوشه wp-content/webp-express/webp-images/doc-root می‌باشد
در قسمت Cache-Control header هم می‌توانید تنظیمات کش را کنترل کنید
در بخش Redirection rules هم تنظیمات ریداکت به فایل WebP را می‌توانید تغییر دهید
بعد از تنظیمات اولیه در بخش Conversion تنظیمات تبدیل را انجام میدهیم
در قسمت Jpeg options می‌توانید خودکار یا با کاهش کیفیت Lossy را انتخاب کنید و با گزینه‌های
در قسمت Metadata می‌توانید متاتگ‌ها را از نسخه معمولی به نسخه WebP کپی کنید
در قسمت Conversion method روش‌های تبدیلی نمایش داده میشود و روشي که هاست و سرور شما پشتیبانی میکند تیک سبز دارد می‌توانید تنظیمات حرفه‌ای تر اعمال کنید
با فعال بودن تیک Convert on upload با بارگذاری تصاویر جدید همزمان تبدیل هم انجام میگیرد( اگر افزونه مشرده سازی دیگری استفاده میکنند آن را غیر فعال کنید برای مثال resmushit در این عملکرد افزونه مشکل ایجاد میکند)
با کلید Bulk convert هم می‌توانید بصورت گروهی کلیه تصاویر قبلی وب سایت را تبدیل کنید
در صورت نیاز هم می‌توانید با Delete converted files فایل‌های تبدیل شده را حذف کنید
در نهایت می‌توانید با کلید Save settings and force new .htaccess rules تغیر مسیر فایل‌ها را با استفاده از .htaccess به وب سایت اعمال کنید
پشنهاد میشود گزینه Alter HTML را نیز فعال کنید
این گزینه باعث تغییر در HTML میشود به طوری که تصاویر webp به مرورگرهایی که از webp پشتیبانی میکنند، تحویل داده شود و همچنین عملکرد کش و CDN را بهبود می‌بخشد
Web service نیز در تنظیمات افزونه وجود دارد
در تست بعمل آمده حجم صفحه اول وب‌نوشت امیر از ۱.۲ مگابایت به ۶۵۰ کلیوبایت کاهش پیدا کرد و سرعت لود صفحات بطور محسوسی بالاتر رفت