آموزش استفاده از تصاویر WebP در وردپرس

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

در این مقاله به شما نشان خواهیم داد که چگونه به راحتی از تصاویر WebP در وردپرس استفاده کنید.

WebP چیست؟

WebP یک فرمت فایل جدید برای تصاویر است که در وب استفاده می‌شود. با استفاده از فرمت تصویر WebP، تصاویر شما 25 تا 34 درصد حجم فایل کمتری نسبت به PNG و JPEG خواهند داشت، بدون اینکه کیفیت خود را از دست بدهند.

اگر تصاویر، سرعت وب سایت شما را کاهش می‌دهند، تبدیل آن‌ها به فرمت WebP می‌تواند نمرات تست سرعت بارگذاری صفحه شما را بهبود بخشد.

از آنجایی که WebP یک فرمت فایل جدید است، هنوز توسط همه مرورگرها پشتیبانی نمی‌شود. با این حال، اکثر مرورگرهای مدرن مانند گوگل کروم، فایرفاکس و مایکروسافت اج از تصاویر WebP پشتیبانی می‌کنند.

آیا باید از تصاویر WebP در وردپرس استفاده کنید؟

تصاویر WebP می‌توانند به شما در افزایش سرعت وب‌سایت وردپرسی کمک کنند. بهترین روش توصیه شده برای استفاده، همراه با افزونه کش وردپرس، CDN و موارد دیگر است.

از زمان وردپرس 5.8، تصاویر WebP به طور پیش فرض پشتیبانی می‌شوند. این بدان معنی است که می‌توانید تصاویر WebP خود را بدون استفاده از افزونه در وب‌سایت‌تان ذخیره و آپلود کنید.

افزونه‌های فشرده‌سازی تصویر می‌توانند تصاویر موجود شما را به فرمت WebP تبدیل کنند و تصاویر JPEG یا PNG را به‌عنوان گزینه بازگشتی در مرورگرهایی که هنوز از WebP پشتیبانی نمی‌کنند نمایش دهند.

اگر شما از تصاویر زیادی استفاده می‌کنید و این باعث کاهش سرعت وب‌سایت‌تان می‌شود، پس حتما باید تصاویر WebP را در نظر بگیرید.

استفاده از تصاویر WebP در وردپرس با افزونه EWWW Optimizer

EWWW Image Optimizer یکی از بهترین افزونه‌های فشرده سازی تصاویر وردپرس است که امکان بهینه کردن تصاویر وردپرس را خواهد داد. همچنین از فرمت WebP پشتیبانی می‌کند و می‌‌تواند به طور خودکار آن‌ها را در مرورگرهای پشتیبانی شده نشان دهد.

در ابتدا، لازم است که افزونه را نصب و فعال نمائید. (لینک در انتهای مطلب موجود است)

پس از فعال‌سازی، به منو تنظیمات > EWWW Image Optimizer بروید و تنظیمات افزونه را بررسی کنید. یک ویزارد راه‌اندازی نیز برای انجام تنظیمات وجود دارد، اما می‌توانید برای خروج از ویزارد روی لینک «I know what I am doing» کلیک کنید.

در صفحه بعدی، مجموعه‌ای از گزینه‌های افزونه را مشاهده خواهید کرد. اسکرول کنید و کادر کنار گزینه «WebP Conversion» را علامت بزنید.

پس از آن، روی دکمه ذخیره کلیک کنید تا تنظیمات شما اعمال شوند.

در مرحله بعد، باید به قسمت WebP Conversion بروید. این افزونه برخی از قوانین بازنویسی (Rewrite Rules) را با یک تصویر پیش نمایش قرمز نشان می‌دهد.

شما باید روی دکمه «Insert Rewrite Rules» کلیک کنید؛ افزونه بطور خودکار سعی می‌کند این قوانین بازنویسی را در فایل htaccess. شما درج کند.

اگر افزونه در افزودن قوانین موفق باشد، پیش‌نمایش تصویر قرمز با متن «WebP» سبز ظاهر می‌شود.

گاهی اوقات، ممکن است افزونه در وارد کردن قوانین ناموفق باشد. در این صورت، باید قوانین بازنویسی را از صفحه تنظیمات افزونه کپی کرده و به صورت دستی در پایین فایل htaccess خود جایگذاری کنید.

پس از اتمام کار، به صفحه تنظیمات افزونه برگردید و دوباره روی دکمه «ذخیره» کلیک کنید. اگر پیش‌نمایش سبز شد، به این معنی است که تصاویر WebP را با موفقیت در وب‌سایت وردپرسی خود فعال کرده‌اید.

تبدیل انبوه تصاویر قدیمی به نسخه‌های WebP

EWWW Image Optimizer به شما اجازه می‌دهد تا فایل‌های تصویری آپلود شده قبلی خود را به راحتی به تصاویر WebP تبدیل کنید.

به صفحه رسانه > کتابخانه بروید و نمای لیست را فعال کنید.

در مرحله بعد، باید روی دکمه «تنظیمات صفحه» در بالا کلیک کنید و مقدار گزینه «تعداد موردها در هر برگه» را به 999 تغییر دهید. اگر بیش از 1000 تصویر دارید، آن تصاویر در صفحه بعدی ظاهر می‌شوند.

به این ترتیب می‌توانید به سرعت تعداد زیادی از تصاویر را برای بهینه سازی انبوه انتخاب کنید. در مرحله بعد، روی تیک انتخاب همه موارد در بالای جدول کلیک کنید تا همه تصاویر انتخاب شوند.

پس از آن، روی منوی کشویی «کارهای دسته‌جمعی» کلیک و گزینه «Bulk Optimize» را جهت بهینه‌سازی انبود انتخاب نمائید. در نهایت بر روی دکمه «اجرا» کلیک کنید.

در صفحه بعدی، افزونه به شما این امکان را می‌دهد که فشرده سازی تصویر را غیرفعال و فقط آن‌ها را به WebP تبدیل کنید. اگر تصاویر شما از قبل بهینه شده‌اند، می‌توانید این گزینه را تیک بزنید.

پس از آن، برای ادامه روی دکمه «Scan for Unoptimized Images» کلیک کنید. سپس افزونه تعداد تصاویری را که پیدا کرده است به شما نشان می‌دهد. برای ادامه روی دکمه Optimize کلیک کنید.

اکنون تصاویر شما بهینه می‌شوند و EWWW Optimizer نسخه‌های WebP را برای تصاویر شما تولید می‌کند.

بررسی فعال‌سازی تصاویر WebP

پس از بهینه کردن تصاویر، به یکی از پست‌های وبلاگ خود که شامل چندین تصویر است مراجعه کنید. ماوس را روی هر تصویر ببرید و آن‌ها را در تب جدید باز کنید.

در نوار آدرس مرورگر می‌توانید ببینید که یک پسوند webp. در انتهای آدرس فایل دارد.

استفاده از تصاویر WebP در وردپرس با افزونه Imagify

Imagify یک افزونه وردپرس بهینه سازی تصویر است که توسط تیم پشتیبان WP Rocket، بهترین افزونه کش وردپرس تولید شده است. این افزونه به شما کمک می‌کند تصاویر را به راحتی بهینه سازی و به فرمت تصویر WebP تبدیل کنید.

اولین کاری که باید انجام دهید این است که افزونه Imagify را نصب و فعال کنید. (لینک در انتهای مطلب موجود است)

پس از فعال سازی، برای پیکربندی تنظیمات افزونه باید به صفحه تنظیمات > Imagify مراجعه و سپس روی دکمه «Create a Free API Key» کلیک کنید.

در این قسمت، از شما خواسته می‌شود که یک آدرس ایمیل تجاری وارد کنید. پس از آن، می‌توانید صندوق ورودی خود را برای ایمیلی حاوی کلید API خود بررسی کنید. کلید را کپی کرده و در فیلد «ENTER YOUR API KEY BELOW» در صفحه تنظیمات افزونه قرار داده و روی دکمه «Save Changes» کلیک کنید.

در مرحله بعد باید به قسمت Optimization بروید. در آن قسمت باید گزینه‌های کنار «Create webp versions of images» و «Display images in webp format on the site» را تیک بزنید.

همچنین مشاهده می‌کنید که دو روش برای فعال‌سازی تصاویر WebP وجود دارد. روش اول فایل htaccess است و روش دوم از یک تگ استفاده می‌کند.

روش htaccess سریع‌تر است، اما اگر از سرویس CDN استفاده می‌کنید، کار نمی‌کند و بهتر است از روش تگ که مشکلی با CDN ندارد استفاده کنید؛ اما امکان دارد که برخی از قالب‌های وردپرس را دچار مشکل کند.

شما می توانید روشی را انتخاب کنید که برای سایت شما مناسب باشد. پس از آن، روی دکمه «Save & Go to Bulk Optimizer» در پایین صفحه کلیک کنید.

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

اگر تصاویر زیادی دارید، ممکن است مدتی طول بکشد. می‌توانید صفحه را ببندید و بعداً به آن بازگردید؛ زیرا بستن صفحه روند بهینه‌سازی تصویر را متوقف نمی‌کند.

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

امیدواریم این مقاله، در شیوه استفاده از تصاویر WebP در وردپرس به شما کمک کرده باشد. برای آموزش‌های بیشتر با وبیت همراه باشید.