نحوه استفاده از تصاویر WebP در وردپرس (و کوچک کردن اندازه پرونده تصویر تا 35٪)

تصاویر WebP توسط مرورگرهای معروف مانند موارد زیر پشتیبانی می شوند:

• Chrome ( دسک تاپ و موبایل ).
• Firefox ( دسک تاپ و موبایل ).
• لبه.
• اپرا ( دسک تاپ و موبایل ).

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

در کل ، حدود 77٪ از کاربران اینترنت از مرورگری استفاده می کنید که از WebP پشتیبانی می کند. بنابراین اگرچه مطمئناً از پشتیبانی اکثریت برخوردار است ، 23٪ آن بسیار بزرگ است که نمی توان آن را نادیده گرفت ( در آموزش WordPress WebP ما در زیر ، ما به شما نشان خواهیم داد که چگونه این کار را انجام دهید تا همه بازدیدکنندگان شما تجربه خوبی داشته باشند ):

پشتیبانی از WebP

مقایسه اندازه WebP در مقابل JPG و PNG

طبق آزمایشات Google ، تصاویر WebP عبارتند از:

• 25-34٪ کوچکتر از تصاویر قابل مقایسه با JPEG.
• 26٪ کوچکتر از تصاویر PNG قابل مقایسه است.

اگر می خواهید درباره روش Google بیشتر بدانید ، می توانید لینک مستقیم به نتایج کامل را در زیر پیدا کنید:

هر دو آزمون بر اساس بیش از 11000 تصویر از جمله: ساخته شده اند

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

از آنجا که همه مرورگرها از تصاویر WebP پشتیبانی نمی کنند ، نمی توانید فقط پرونده های تصویری WebP را در کتابخانه رسانه خود بارگذاری کنید a > و مستقیماً از آنها در وردپرس استفاده کنید ، همانطور که می توانید با JPEG و PNG استفاده کنید.

باز هم ، 23٪ از افراد (از جمله همه کاربران Safari) از یک مرورگر وب استفاده می کنند که از WebP پشتیبانی نمی کند. اگر تصاویر WebP را تبدیل کرده و مستقیماً در محتوای خود استفاده کنید ، آن بازدیدکنندگان نمی توانند تصاویر شما را ببینند ، که تجربه مرور آنها را از بین می برد.

در زیر برخی از بهترین افزونه های وردپرس WebP را مشاهده خواهیم کرد که همه آنها با Kinsta و CDN Kinsta .

ShortPixel

افزونه وردپرس ShortPixel

ShortPixel یک وردپرس محبوب است افزونه بهینه سازی تصویر که می تواند به شما در تغییر اندازه و فشرده سازی خودکار تصاویری که در سایت وردپرس خود آپلود می کنید ، کمک کند.

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

ShortPixel یک برنامه رایگان محدود دارد که به شما امکان می دهد 100 ~ تصویر در ماه به صورت رایگان بهینه کنید. پس از آن ، برنامه های پرداختی با پرداخت 4.000 دلار در ماه برای حداکثر 5000 تصویر / اعتبار یا 9.99 دلار یکبار مصرف برای یک بسته 10،000 واحدی شروع می شود.

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

شما می توانید اعتبار ShortPixel خود را به وب سایت های نامحدود گسترش دهید – هیچ محدودیتی برای هر سایت وجود ندارد ( و همه وب سایت های شما می توانند از همان حساب ShortPixel استفاده کنند ).

برای استفاده از ShortPixel برای ارائه تصاویر WebP در وردپرس ، باید پلاگین از WordPress.org و کلید API خود را اضافه کنید ( که می توانید با ثبت نام در یک حساب ShortPixel رایگان دریافت کنید).

در برگه عمومی می توانید تنظیمات اساسی را برای نحوه بهینه سازی تصویر تنظیم کنید. به عنوان مثال ، از چه سطح فشرده سازی استفاده کنید و اندازه تصاویر را تغییر دهید یا تغییر ندهید:

نحوه تنظیم سطح فشرده سازی و ابعاد تصویر در ShortPixel

div >

برای فعال کردن تصاویر WebP ، به برگه پیشرفته بروید و:

1. کادر تصاویر WebP را علامت بزنید
2. برای تحویل نسخه های WebP کادر را علامت بزنید (این بعد از بررسی اولین کادر ظاهر می شود)
3. دکمه رادیو را برای استفاده از نحو برچسب انتخاب کنید (این بعد از بررسی کادر قبلی ظاهر می شود)
4. پیش فرض را ترک کنید فقط از طریق انتخاب قلاب های وردپرس
   

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

سپس ، تغییرات خود را ذخیره کنید.

اگر میزبان Kinsta هستید ، ShortPixel به شما پیغام هشدار درباره پیکربندی فایلهای پیکربندی سرور در Nginx را می دهد. برای پیکربندی این تنظیمات ، می توانید با پشتیبانی Kinsta تماس بگیرید و ما خوشحال خواهیم شد که پیکربندی سرور را برای شما تنظیم کنیم.

تصور کنید h3>

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

Imagify یک پلاگین محبوب بهینه سازی تصویر از همان توسعه دهنده WP Rocket (که یکی از معدود افزونه های حافظه پنهانی است که با Kinsta کار می کند ).

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

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

بنابراین اگر می خواهید تصاویر بزرگ زیادی را بهینه کنید ، روش ShortPixel ممکن است ارزان تر باشد. اما اگر شما نیاز به بهینه سازی بسیاری از تصاویر کوچک دارید ، ممکن است رویکرد Imagify ارزان تر باشد.

Imagify دارای یک لایه رایگان محدود است که به شما امکان می دهد 25 مگابایت بهینه سازی در هر ماه داشته باشید. پس از آن ، برنامه های پرداختی از 4.99 دلار در ماه با حداکثر 1 گیگابایت یا 9.99 دلار برای اعتبار یکبار مصرف 1 گیگابایتی شروع می شود.

مانند ShortPixel ، می توانید محدودیت حساب خود را در وب سایت های نامحدود گسترش دهید.

برای استفاده از Imagify برای ارائه تصاویر WordPress WebP ، باید افزونه را نصب کنید. از WordPress.org و برای شروع کلید API خود را اضافه کنید.

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

نحوه تنظیم سطح فشرده سازی در Imagify

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

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

کادر را علامت بزنید

3. برای استفاده از برچسب دکمه رادیو را انتخاب کنید
4. اگر میزبان Kinsta هستید و از Kinsta CDN استفاده می کنید ، آدرس URL Kinsta CDN خود را وارد کنید (از جمله https: //) در اگر از جعبه CDN استفاده می کنید (ما به شما خواهیم گفت شما می توانید URL Kinsta CDN را در زیر پیدا کنید)
   

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

اگر با استفاده از Kinsta CDN استفاده می کنید ، با باز کردن سایت خود در داشبورد MyKinsta و بازدید از برگه Kinsta CDN تنظیمات سایت:

نحوه یافتن Kinsta CDN URL

مانند ShortPixel ، اگر میزبان Kinsta هستید ، باید یک Nginx ایجاد کنید. قانون برای سطل های حافظه پنهان WebP (به سادگی با پشتیبانی Kinsta تماس بگیرید).

Optimole

افزونه وردپرس Optimole

Optimole یک افزونه بهینه سازی تصویر وردپرس است که عملکرد کمی متفاوت از Imagify و ShortPixel دارد . Optimole می تواند به طور خودکار تصاویر شما را فشرده و تغییر اندازه دهد. با این حال ، این همچنین دارای دو ویژگی قابل توجه دیگر است:

1. این می تواند تصاویر خود را از طریق CDN خود (با پشتیبانی آمازون CloudFront) ارائه دهد.
2. تصاویر تطبیقی ​​در زمان واقعی ارائه می دهد که به موجب آن Optimole تصویری با اندازه بهینه برای هر بازدید کننده ارائه می دهد. به عنوان مثال ، شخصی که در یک صفحه کوچک در حال مرور است ، با وضوح تصویری کمتری از شخصی که در صفحه شبکیه چشم مرور می کند ، دریافت می کند.

این رویکرد مشابه سایر خدمات بهینه سازی / دستکاری در زمان واقعی مانند Cloudinary ، imgix ، پردازش تصویر KeyCDN و غیره است.

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

Optimole یک برنامه رایگان محدود دارد که می تواند ارائه تصاویر برای حدود 5000 ~ بازدید کننده در ماه را انجام دهد. پس از آن ، برنامه های پرداختی با 19 دلار در ماه برای 25000 پوند بازدید کننده آغاز می شود.

برای شروع ، باید افزونه را از وردپرس نصب کنید. org و آن را با استفاده از یک کلید API فعال کنید ( که با ثبت نام در یک حساب Optimole رایگان می توانید آن را دریافت کنید.)

پس از انجام این کار ، Optimole شروع به بهینه سازی خودکار تصاویر شما و تحویل آنها از طریق CDN خود می کند. پشتیبانی WebP به طور پیش فرض روشن است ، بنابراین نیازی به فعال سازی دستی آن نیست.

برای پیکربندی تنظیمات دیگر ، مانند سطح فشرده سازی و رفتار مقیاس بندی ، می توانید به تنظیمات رسانه → Optimole بروید:

منطقه تنظیمات Optimole – تصاویر WordPress WebP به طور پیش فرض فعال هستند

از آنجا که Optimole تحویل تصاویر شما را از طریق CDN خود انجام می دهد ، در صورت میزبانی در Kinsta نیازی به تنظیم قوانین Nginx نیست.
در حالی که while اندازه تصویر کاهش می یابد ، سرعت سایت را افزایش دهید. بیاموزید که چگونه از قالب WebP در سایت #WordPress خود استفاده کنید ? برای توییت کلیک کنید

خلاصه h2>

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

WebP یک قالب تصویری مدرن است که می تواند در مقایسه با پرونده های مقایسه ای JPEG یا PNG ، 25 ~ کاهش اندازه پرونده را ارائه دهد.

اکثر مرورگرهای مدرن از WebP پشتیبانی می کنند و حدود 77٪ از کاربران اینترنت دارای مرورگری هستند که از WebP پشتیبانی می کند. با این حال ، برخی از مرورگرها ، به خصوص Safari ، هنوز پشتیبانی WebP را ارائه نمی دهند ، بنابراین شما نمی توانید تصاویر WebP را به همه بازدید کنندگان ارائه دهید.

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

سه افزونه که می تواند به شما در انجام این کار کمک کند:

• ShortPixel.
• تصور کنید.
• Optimole.

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

آیا در مورد نحوه استفاده از WebP در وردپرس س questionsالی دارید؟ از ما در نظرات بپرسید

---

اگر از این مقاله لذت بردید ، پس از آن دوست دارید Kinsta’s WordPress platform hosting. وب سایت خود را توربوشارژ کرده و از تیم پیشکسوت وردپرس ما پشتیبانی 24/7 ساعته دریافت کنید. زیرساختهای Google Cloud ما بر مقیاس گذاری خودکار ، عملکرد و امنیت تمرکز دارند. بگذارید تفاوت Kinsta را به شما نشان دهیم! برنامه های ما را بررسی کنید a >