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

طراحی سایت

..WebP چیست و نحوه تبدیل تصاویر WebP در وردپرس..
طراحی سایت

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

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

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

فرمت تصویر WebP چیست

فرمت WebP یک فرمت تصویری است که توسط گوگل ارائه شده است. این فرمت در مقابل فرمت های JPEG یا JPG و PNG می تواند جایگزین خوبی باشد و در حال حاضر در کروم ، اپرا و فایرفاکس پشتیبانی می شود.

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

مقایسه تصاویر WebP با فرمت JPEG و PNG

اگر بخواهیم در مورد فرمت تصاویر WebP مطمئن شویم که چه تفاوتی با سایر فرمت ها دارد باید در نظر بگیریم، گوگل در مقایسه فشرده سازی تصاویر WebP  نتایج زیر بدست آمده است. تصاویر WebP:

  • به نسبت 25-34٪از تصویر JPEG کوچکتر هست.
  • به نسبت 26% از تصاویر PNP کوچک تر هست.

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

تصاویر WebP در وردپرس

این پیغام در پیج اسپید پیشنهاد می کند تا تصاویر را به فرمت WebP  تبدیل کنیم. حال سوال اینجاست که چگونه WebP گوگل حجم تصاویر را کاهش می دهد ؟

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

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

در نهایت قاب تصویر (کلید) فقط از پیکسل هایی که رمزگشایی شده استفاده می کند و سعی می کند قسمت های ناشناخته را ( با استفاده از همین پیش بینی ) به آن اضافه کند. داده های اضافی پس از آن می تواند از بلوک جدا شوند و فشرده سازی کارآمد تر شود.

چرا از تصاویر با فرمت WebP استفاده کنیم

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

تصاویر حداکثر 60٪ -65٪ از حجم کل صفحات وب را تشکیل می دهد. زمان آپلود صفحات سایت اهمیت ویژه ای به خصوص برای نمایش موبایل دارد. ( تصاویر کوچکتر باعث صرفه جویی پهنای باند و عمر باتری تلفن همراه می باشند و برای کاربران اهمیت پیدا می کند)

کیفیت تصاویر ترجیحا باید بتواند با تغییر اندازه و فشرده سازی، قابل تنظیم باشد. WebP به طور متوسط 30٪ فشرده سازی بیشتری را نسبت به JPEG و JPEG 2000 ، بدون از دست دادن کیفیت تصویر انجام می دهد.

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

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

مرورگر های کروم، فایرفاکس و اپرا در هر دو نسخه موبایل و دسک تاپ، همچنین Edge (حدود 77% کاربران) نمایش داده می شوند. اما اینترنت اکسپلورر ، سافاری و غیره این فرمت را پشتیبانی نمی کند (در حدود 23% کاربران از این مرورگرها استفاده می کنند)

تصاویر WebP در وردپرس

چگونه از تصاویر WebP در ودرپرس استفاده کنیم

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

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

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

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

ShortPixel

تصاویر WebP در وردپرس

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

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

این افزونه یک برنامه رایگان ارائه می کند که می توانید 100 تصویر را در هر ماه و پس از آن با پرداخت 4.99 دلار در ماه 5000تصویر و با 9.99 دلار در ماه 10.000 تصویر بهینه سازی کنید.

هر تصویر وردپرسی (حتی تصاویر بندانگشتی در اشکال مختلف) را که بخواهید افزونه ShortPixel آن را محاسبه می کند. هیچ محدودیتی برای اندازه فایل های خود ندارید .همچنین از اکانت پرداختی این افزونه می توانید برای چند وب سایت استفاده کنید.

برای استفاده از افزونه ShortPixel باید آن را در وردپرس خود نصب کرده و بعد از فعال سازی آن تنظیمات تصویر زیر برای شما باز می شود که می توانید کلید API خود را اضافه کنید یا با ثبت نام یک حساب کاربری ShortPixel دریافت کنید. (اگر روی دکمه request key کلیک کنید ShortPixel به صورت خودکار کلید API را به تنظیمات وردپرس اضافه می کند)

تصاویر WebP در وردپرس

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

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

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

اگر کیفیت تصاویر اهمیت بالایی دارد ( مثل وبلاگ عکاسی ) می توانید یکی از گزینه های glossy یا  lossless را برای تنظیم انتخاب کنید.

  • گزینه also include thumbnails برای فشرده سازی تصاویر بندانگشتی.
  • گزینه image backup در مواقعی که با محدودیت هست مواجه نیستید فعال کردن این گزینه تصاویر فشرده شده را ذخیره می کند.
  • گزینه Resize large image اجازه می دهد تا ابعاد اصلی تصاویر آپلود شده را به طور خودکار تغییر دهید.

برای فعال کردن تصاویر WebP برگه Advanced باز کنید ، تیک WebP Images و دریافت نسخه WebP  بزنید.

تصاویر WebP در وردپرس

افزونه  ShortPixel یک پیغام هشدار دهنده درباره تنظیم پرونده های پیکربندی سرور در Nginx می دهد که باید آن را نیز انجام دهید.

افزونه Imagify

تصاویر WebP در وردپرس

افزونه Imagify پیشرفته ترین ابزار برای بهینه سازی تصاویر است. بعد از فعال کردن آن تمام تصاویر از جمله تصاویر بندانگشتی زمان آپلود شدن در وردپرس به طور خودکار بهینه و همپنین برای تبدیل تصاویر به WebP به صورت رایگان استفاده می شود.

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

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

  • تصاویر در ابعاد بزرگ دارید:  افزونه ShortPixel امکانات بهتری بر اساس قیمت ارزان تر است.
  • تصاویر بندانگشتی و کوچک : افزونه Imagify انتخاب بهتری برای چنین امکاناتی دارد.

افزونه Imagify یک طرح رایگان دارد که تا 25 گیگا بایت در هر ماه بهینه سازی را امکان پذیر می کند. برای شروع کار با این افزونه باید بعد از اینکه آن را نصب کردید و کلید API خود را اضافه کنید تا راه اندازی و فعال شود

در مرحله بعدی باید در قسمت General Settings سطح فشرده سازی خود را تعیین کنید.

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

  • کادر نسخه های مختلف تصویر
  • نمایش تصویر فرمت webp
تصاویر WebP در وردپرس

اگر در هاست خود از CDN استفاده می کنید می توانید در داشبورد خود برگه تنظیمات سایت آدرس صفحات URL CDN خود را وارد کنید.

در تنظیمات خود باید از طریق Nginx حافظه کش خود را تنظیم کنید.

افزونه Optimole

تصاویر WebP در وردپرس

افزونه Optimole برای سرعت بخشیدن به وب سایت شما و ارائه تصاویر با کیفیت بالا و کاملا مناسب برای هر دستگاه است. البته این افزونه کمی متفاوت از دو افزونه معرفی شده قبلی است ولی می تواند به طور خودکار تصاویر را فشرده کند و تغییر اندازه دهد.

ویژگی های افزونه  Optimole :

  • تصاویر کوچک با کیفیت ارائه می کند
  • کاملا خودکار است
  • از انواع تصاویر پشتیبانی می کند.
  • تصاویر از طریق سیستم توزیع محتوا CND رایگان ارائه می شود.
  • براساس دستگاه واقعی بازدیدکننده بهینه نمی شود.
  • امکان آپلود (Lazy load) بدون جی کوئری را دارد.
  • نسخه کاملا کاربری خود را در پکیج رایگان ارائه می کند.

افزونه  Optimole یک اتوماسیون کامل و طیف وسیعی از ویژگی های تکاملی برای تنظیم تصاویر حجیم و صفحات خراب دارد. برای تنظیم تصاویر خود می توانید مسیر (Media → Optimole → Settings) بروید.

تصاویر WebP در وردپرس

افزونه Optimole می تواند تصاویر شما را از طریق CDN تحویل دهد و نیازی به تنظیم Nginx نیست.

پایان

تصاویر حداقل 50% حجم یک صفحه سایت را دارند. (بستگی به نوع سایت و عوامل دیگر دارد) پس استفاده از روش های بهینه سازی تصاویر می تواند برای هر وی سایتی مفید باشد.

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

در آخر خوشحال می شویم که نظرات و پیشنهادات خودتان را راجع این موضوع در نظرات برای ما درج کنید.

53
14 مرداد 1399
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

18794
24 فروردین 1398
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند. علت استفاده از...

3915
27 آذر 1398
سئو

چگونه ویدیو کلاس های آنلاین (وبینار) را ضبط کنیم؟| آموزش ۳ روش

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

3723
08 اردیبهشت 1399