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

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

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

WebP یک قالب تصویری مدرن است که می تواند به شما کمک کند تا اندازه تصاویر خود را بدون تغییر در شکل آنها کاهش دهید. به طور متوسط ​​، یادگیری نحوه تبدیل یک تصویر به WebP می تواند اندازه آن را 25-35 with کاهش دهد ، بدون اینکه کیفیت قابل افتی باشد.

به همین دلیل در این پست وبلاگ به عمق موضوع خواهیم پرداخت!

آماده هستید؟ بیایید شروع کنیم!

WebP چیست؟ h2>

بنابراین … فایل WebP چیست؟ به طور خلاصه ، WebP یک قالب تصویری است که توسط Google ساخته شده است. به عنوان مثال ، شما قالب های تصویری مانند JPEG یا JPG و PNG دارید ، درست است؟ خوب ، WebP یک قالب فایل جایگزین برای تصاویر است. بررسی کنید که چگونه انواع مختلف فایل تصویر می تواند بر سرعت وب سایت شما تأثیر بگذارد.

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

به عنوان مثال ، در مطالعه فشرده سازی GoogleP WebP ، Google دریافت که یک فایل تصویری WebP به طور متوسط ​​is

است

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

به همین دلیل است که اگر سایت خود را از طریق PageSpeed ​​Insights اجرا کنید ، یکی از این موارد بسیاری از توصیه ها این است که تصاویر را در قالب های نسل بعدی مانند WebP ارائه دهید :

Google PageSpeed Insights suggests using WebP images

Google PageSpeed ​​Insights استفاده از تصاویر WebP را پیشنهاد می کند

بنابراین قالب WebP Google چگونه این کاهش در اندازه پرونده را به دست می آورد؟

WebP از هر دو فشرده سازی بدون ضرر و بدون اتلاف پشتیبانی می کند ، بنابراین کاهش دقیق به این بستگی دارد که از ضرر استفاده می کنید یا فشرده سازی بدون اتلاف

با فشرده سازی کم WebP ، WebP از چیزی به نام “کدگذاری پیش بینی” برای کاهش اندازه پرونده استفاده می کند. برنامه نویسی پیش بینی کننده از مقادیر پیکسل های همسایه در یک تصویر برای پیش بینی مقادیر استفاده می کند و فقط تفاوت را رمزگذاری می کند. این بر اساس رمزگذاری قاب کلید VP8 است.

WebP بدون Loss از مجموعه روشهای بسیار پیچیده ای که توسط تیم WebP تهیه شده استفاده می کند.

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

کدام مرورگرهای وب از WebP پشتیبانی می کنند؟ h2>

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

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

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

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

اینترنت اکسپلورر همچنین از پشتیبانی WebP برخوردار نیست (اما Edge از WebP پشتیبانی نمی کند زیرا مبتنی بر Chromium است).

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

WebP web browser support

پشتیبانی از 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 در وردپرس ، می توانید از یک افزونه وردپرس استفاده کنید که تصاویر اصلی شما را به قالب WebP تبدیل کند و همچنین اگر مرورگر بازدید کننده این کار را انجام ندهد ، تصویر اصلی را به عنوان نسخه پشتیبان تهیه می کند از WebP پشتیبانی کنید.

به عنوان مثال ، اگر یک فایل JPEG را در سایت خود بارگذاری کنید ، این افزونه:

  • فایل JPEG را به WebP تبدیل کرده و از نسخه WebP برای بازدیدکنندگان در حال مرور با Chrome ، Firefox و غیره استفاده کنید.
  • فایل JPEG اصلی را به بازدیدکنندگان در حال مرور با Safari و سایر مرورگرهایی که از WebP پشتیبانی نمی کنند نشان دهید.

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

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

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

ShortPixel

ShortPixel WordPress plugin

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

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

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

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

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

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

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

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

How to set compression level and image dimensions in ShortPixel

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

div >

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

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

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

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

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

تصور کنید h3>

Imagify WordPress plugin

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

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 خود را اضافه کنید.

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

How to set compression level in Imagify

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

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

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

  4. برای استفاده از برچسب دکمه رادیو را انتخاب کنید
  5. اگر میزبان Kinsta هستید و از Kinsta CDN استفاده می کنید ، آدرس URL Kinsta CDN خود را وارد کنید (از جمله https: //) در اگر از جعبه CDN استفاده می کنید (ما به شما خواهیم گفت شما می توانید URL Kinsta CDN را در زیر پیدا کنید)
How to enable WordPress WebP images in Imagify

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

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

How to find Kinsta CDN URL

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

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

Optimole

Optimole WordPress plugin

افزونه وردپرس 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 بروید:

The Optimole settings area - WordPress WebP images are enabled by default

منطقه تنظیمات 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 >

منبع:
https://kinsta.com/blog/webp/.

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