نحوه استفاده از تصاویر WebP در وردپرس (۳ روش)

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

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

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

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

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

WebP یک قالب فایل جدید برای تصاویر مورد استفاده در وب است. با استفاده از قالب تصویر WebP ، تصاویر شما بدون از دست دادن کیفیت ، ۲۵-۳۴٪ اندازه فایل از PNG و JPEG کوچکتر خواهند بود.

اگر تصاویر وب سایت شما را کند می کنند ، پس تبدیل آنها به قالب WebP می تواند باعث بهبود شما شود تست سرعت بارگذاری صفحه نمرات

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

از آنجا که WebP یک قالب فایل جدید است ، هنوز توسط همه مرورگرها پشتیبانی نمی شود. با این حال ، بیشتر مرورگرهای مدرن مانند Google Chrome ، Firefox و Microsoft Edge از تصاویر WebP پشتیبانی می کنند.

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

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

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

خطای بارگذاری تصویر WebP در وردپرس

برای رفع آن ، باید از یک پلاگین فشرده سازی تصویر برای تبدیل تصاویر به قالب تصویر WebP استفاده کنید. شما همچنان تصاویر خود را در قالب فایل های پشتیبانی شده از وردپرس مانند PNG ، JPEG و GIF بارگذاری می کنید تا از آنها به عنوان پشتیبان استفاده شود.

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

در اینجا نحوه استفاده از تصاویر WebP در وردپرس آورده شده است. ما چندین روش را به شما نشان خواهیم داد ، بنابراین می توانید یکی از روش های مناسب خود را انتخاب کنید:

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

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

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

پس از فعال شدن ، به آدرس مراجعه کنید تنظیمات »بهینه ساز تصویر EWWW صفحه برای پیکربندی گزینه های پلاگین. با یک جادوگر نصب استقبال خواهید شد ، اما می توانید بر روی پیوند “من می دانم چه کاری انجام می دهم” کلیک کنید تا از جادوگر خارج شوید.

جادوگر EWWW

در صفحه بعدی ، دسته ای از گزینه های افزونه را مشاهده خواهید کرد. به پایین بروید و کادر کنار گزینه “WebP Conversion” را علامت بزنید.

تبدیل WebP در EWWW

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

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

شما باید بر روی دکمه “درج قوانین بازنویسی” کلیک کنید ، و پلاگین به طور خودکار سعی می کند این قوانین بازنویسی را به شما وارد کند پرونده .htaccess.

درج قوانین بازنویسی

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

روش تحویل WebP موفقیت آمیز است

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

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

متناوباً ، می توانید از بین روش های JS WebP Rewriting یا WebP Rewriting به عنوان گزینه های تحویل WebP خود انتخاب کنید. اینها کمی کندتر از روش .htaccess هستند ، اما کار را به اتمام می رسانند.

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

EWWW Image Optimizer به شما امکان می دهد فایلهای تصویری که قبلاً بارگذاری کرده اید را به راحتی به تصاویر WebP تبدیل کنید. به سادگی برو به کتابخانه ی رسانه صفحه را انتخاب کرده و به نمای لیست بروید.

پرونده ها را در رسانه انتخاب کنید

بعد ، باید روی دکمه Screen Options کلیک کنید و “تعداد موارد در هر صفحه” را به ۹۹۹ تغییر دهید. اگر ۱۰۰۰+ تصویر دارید ، آن تصاویر در صفحه بعدی ظاهر می شوند.

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

بهینه سازی انبوه

پس از آن ، بر روی منوی کشویی Bulk Actions کلیک کرده و گزینه Bulk Optimize را انتخاب کنید. در آخر بر روی دکمه Apply کلیک کنید.

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

بهینه سازی را اجرا کنید

پس از آن ، برای ادامه بر روی دکمه “اسکن تصاویر غیربهینه” کلیک کنید. سپس این افزونه تعداد تصاویری را که پیدا کرده است به شما نشان می دهد ، بنابراین می توانید برای ادامه کار بر روی دکمه بهینه سازی کلیک کنید.

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

تبدیل تصویر WebP به پایان رسید

در حال آزمایش تحویل تصویر WebP

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

در حال بررسی تصویر

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

تأیید کنید تصویر WebP ارائه شده است

اگر افزونه قادر به ارائه تصویر وب نیست ، می توانید به صفحه تنظیمات افزونه برگردید. از اینجا می توانید گزینه تحویل WebP را به روش های “JS WebP Rewriting” یا “ WebP Rewriting” تغییر دهید.

روش ۲٫ استفاده از تصاویر WebP در وردپرس با Imagify

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

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

پس از فعال سازی ، باید بازدید کنید تنظیمات »تصور کنید صفحه برای پیکربندی تنظیمات افزونه. از اینجا. برای ادامه بر روی دکمه “ایجاد یک کلید API رایگان” کلیک کنید.

کلید Imagify API را ایجاد کنید

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

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

تنظیمات WebP را تصور کنید

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

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

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

تنظیمات را ذخیره کنید و بهینه ساز تصویر را شروع کنید

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

وضعیت بهینه سازی

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

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

پس از انجام بهینه سازی ، می توانید از یک صفحه یا پست حاوی چند تصویر بازدید کنید. ماوس را به سمت یک تصویر ببرید و سپس کلیک راست کنید تا “باز کردن تصویر در برگه جدید” را انتخاب کنید.

در حال بررسی تصویر

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

تأیید کنید تصویر WebP ارائه شده است

روش ۳٫ استفاده از تصاویر WebP در وردپرس با SG Optimizer

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

SiteGround یکی از بهترین میزبانی وردپرس شرکت ها آنها یک پلاگین SG Optimizer رایگان به کاربران خود ارائه می دهند که به شما امکان می دهد عملکرد وردپرس خود را بهینه کنید. این گزینه همچنین شامل گزینه بهینه سازی تصاویر وردپرس است.

ابتدا باید نصب را فعال و فعال کنید SG Optimizer پلاگین

پس از فعال شدن ، افزونه مورد جدیدی را به نوار کناری مدیر شما با عنوان “SG Optimizer” اضافه می کند. با کلیک بر روی آن به صفحه تنظیمات افزونه منتقل می شوید.

تنظیمات SG Optimizer

اگر می خواهید از SiteGround ساخته شده در سیستم حافظه پنهان استفاده کنید ، از اینجا می توانید تنظیمات کش را روشن کنید.

پس از آن ، می توانید به تب Media Optimization بروید و گزینه “ایجاد WebP Copy of New Images” را روشن کنید.

تصاویر WebP را در SG Optimizer فعال کنید

در زیر آن ، گزینه “ایجاد انبوه پرونده های WebP” را مشاهده خواهید کرد. با کلیک بر روی آن تولید نسخه های WebP برای همه پرونده های تصویری موجود در کتابخانه رسانه WordPress شما آغاز می شود.

به صورت انبوه تصاویر WebP تولید می کند

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

آزمایش تصاویر WebP در SG Optimizer

برای دیدن اینکه آیا وب سایت شما تصاویر WebP را ارائه می دهد ، باید یک صفحه در سایت خود با چند تصویر باز کنید.

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

مشاهده تصاویر WebP در ابزارهای توسعه دهنده

از اینجا ، روی تب ‘img’ کلیک کنید و سپس صفحه را دوباره بارگیری کنید (CTRL + R در ویندوز و Command + R در Mac). با بارگیری مجدد وب سایت ، تمام تصاویر بارگیری شده در کنسول توسعه دهنده را مشاهده خواهید کرد.

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

اگر این مقاله را دوست داشتید ، لطفاً مشترک ما شوید کانال یوتیوب برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک.

پست نحوه استفاده از تصاویر WebP در وردپرس (۳ روش) اولین بار در ظاهر شد WPBeginner.




منبع محتوا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پنج × 5 =