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

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

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

• فرمت تصویر WebP چیست
• مقایسه سایز فرمت با فرمت JPG و PNG
• چرا از تصاویر با فرمت WebP استفاده کنیم
• کدام مرورگرهای وب از فرمت WebP پشتیبانی می کنند
• چگونه از تصاویر WebP در ودرپرس استفاده کنیم

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• گزینه Also Include Thumbnails برای فشرده سازی تصاویر بندانگشتی.
• گزینه Image Backup در مواقعی که با محدودیت هست مواجه نیستید فعال کردن این گزینه تصاویر فشرده شده را ذخیره می کند.
• گزینه Resize Large Image اجازه می دهد تا ابعاد اصلی تصاویر آپلود شده را به طور خودکار تغییر دهید.

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

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

افزونه Imagify

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

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

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

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

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

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

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

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

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

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

افزونه Optimole

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

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

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

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

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

پایان

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

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

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