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

زهرا فنودی وردپرس 2021/04/28 19 0

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

?How to Use WebP Images in WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1- استفاده از تصاویر WebP در وردپرس با بهینه ساز EWWW
2– استفاده از تصاویر WebP در وردپرس با WP Rocket
3- استفاده از تصاویر WebP در وردپرس با SG Optimizer

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

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

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه EWWW Image Optimizer است.

پس از فعال سازی ، برای پیکربندی گزینه های پلاگین به صفحه تنظیمات -» EWWW Image Optimizer بروید. با راهنمای نصب  افزونه مواجه خواهید شد ، اما می توانید بر روی پیوند “I know what I am doing” کلیک کنید تا از راهنما خارج شوید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بعد ، باید روی دکمه Screen Options کلیک کنید و “Number of items per page” را به 999 تغییر دهید. اگر 1000+ تصویر دارید ، آن تصاویر در صفحه بعدی ظاهر می شوند.

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

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

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

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

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

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

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

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

تشخیص تصویر WebP

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

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

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

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

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

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

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

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

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

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

بعد، باید به قسمت بهینه سازی بروید. در آنجا باید گزینه های کنار گزینه های “ایجاد نسخه های وب در تصاویر(Create webp versions of images)” و “نمایش تصاویر با قالب وب در سایت (Display images in webp format on the site)” را بررسی کنید.

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

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

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

شما می توانید یکی را انتخاب کنید که برای سایت شما مناسب باشد. پس از آن ، روی دکمه “Save & go to bulk optimizer” در پایین کلیک کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اگر می خواهید از SiteGround’s built in system caching استفاده کنید ، از اینجا می توانید تنظیمات ذخیره را روشن کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

برچسب ها

برچسبی برای نمایش وجود ندارد

توجه

کلیک

اگر با این مشکل آشنا هستید خودتان انجام دهید ولی اگر نمی دانید که این کار را چطور انجام دهید می توانید هم اکنون در ناحیه کاربری ثبت نام کرده و اطلاعات سایت را تیکت کنید تا با اندک هزینه ای کار شما را انجام دهیم . اگر خواستید می توانید برای مشاوره با شماره های ۰۹۱۷۹۰۵۹۳۵۰ و یا ۰۹۳۹۸۶۹۵۲۳۸ با ما در ارتباط باشید.


کلیه حقوق برای وب سایت پنگاش محفوظ می باشد و هر گونه کپی برداری پیگرد قانونی دارد.
تماس