WebP یک فرمت تصویر مدرن با هدف کمک به وب سایت ها برای ارائه محتوای رسانه ای بدون کاهش سرعت وب سایت خود است که توسط گوگل توسعه یافته است. طبق تحقیقات گوگل، تصاویر WebP با فشرده سازی بدون اتلاف 26 درصد کوچکتر از PNGهای قابل مقایسه و 25 تا 34 درصد کوچکتر از JPEG با شاخص کیفیت SSIM یکسان هستند. تصاویر WebP بدون اتلاف نیز از شفافیت با «هزینه» نسبتاً کم از نظر بایت های اضافه شده به تصویر پشتیبانی میکنند.
WebP همچنین دارای گزینه فشرده سازی با اتلاف است. WebP با فشرده سازی با اتلاف باعث میشود اندازه فایل 3 برابر کوچکتر از PNG های قابل مقایسه باشد.
فناوری تصویر WebP
تصاویر WebP بر اساس فرمت فایل تبادل منابع (RIFF) ذخیره می شوند. RIFF بسیار سبک وزن هستند و تنها 20 بایت سربار دارند (در حالی که امکان افزودن ابرداده های بیشتری وجود دارد). RIFF میتواند تصاویر با طول جانبی تا 16383 پیکسل را پشتیبانی کند.
فراتر از موارد استفاده اولیه از یک فایل حاوی یک تصویر واحد، WebP همچنین از متادیتا در قالب های Exif یا XMP، شفافیت و نمایه های رنگی با استفاده از استاندارد کنسرسیوم رنگ بین المللی (ICC) پشتیبانی میکند.
الگوریتم فشرده سازی با اتلاف WebP
فشرده سازی با اتلاف WebP مبتنی بر کدگذاری درون فریم است که برای VP8 توسعه یافته است، که در اصل توسط Google توسعه یافته و منبع باز (open-sourced) است. از یک طرح تبدیل مبتنی بر بلوک با هشت بیت عمق رنگ استفاده می کند.
فشرده سازی WebP از مفهوم پیش بینی بلوک استفاده میکند. هر بلوک در یک تصویر بر اساس سه بلوک بالای آن و یک بلوک در سمت چپ پیش بینی میشود. پیشبینی در یکی از چهار حالت انجام می شود: افقی، عمودی، تک رنگ (DC) و TrueMotion. بلوک هایی که میتوان به طور دقیق پیش بینی کرد توسط قالب ذخیره نمیشوند.
هنگامی که بلوک ها نمیتوانند به طور دقیق توسط الگوریتم پیش بینی شوند، آنها با استفاده از یکی از دو تکنیک تبدیل فشرده می شوند:
- تبدیل کسینوس گسسته (DCT)
- تبدیل سریع والش هادامارد (FWHT)
پس از این تبدیل، محتوا تحت کدگذاری آنتروپی قرار می گیرد، یک طرح فشرده سازی بدون تلفات.
فشرده سازی بدون ضرر WebP
فشرده سازی بدون تلفات WebP الگوریتم جدیدتری است که توسط Jyrki Alakuijala، مهندس گوگل توسعه داده شده است. از چندین تکنیک فشرده سازی استفاده می کند:
تکنیک های سنتی، از جمله رنگ های نمایه شده، کدگذاری هافمن و کدگذاری فرهنگ لغت.
تکنیک های پیشرفته، از جمله کدهای آنتروپی اختصاصی برای هر کانال رنگی و حافظه پنهان رنگی از رنگ های اخیر.
نرم افزار مبدل
گوگل یک مبدل خط فرمان برای WebP ارائه کرد که بر روی لینوکس اجرا میشود، معروف به cwebp و یک کتابخانه رمزگشایی که با فرمت WebM به اشتراک گذاشته شده است. مبدل های نسخه منبع باز اکنون برای ویندوز و سایر سیستم عامل ها در دسترس هستند.
مزایا و معایب WebP
مزایای فرمت WebP
- بهبود عملکرد وب سایت: فرمت WebP سبک تر از JPEG و PNG است، بنابراین صفحه ای با تصاویر WebP سریعتر برای کاربران بارگذاری میشود.
- صرفه جویی در پهنای باند: WebP پهنای باند را آزاد میکند و به وبسایت ها اجازه میدهد تا تجربه رسانه ای غنی تری ارائه دهند.
- بهبود بهینه سازی موتور جستجو (SEO): به عنوان بخشی از توصیه های Core Web Vitals Google، به صراحت استفاده از قالب های تصویر مدرن مانند WebP را توصیه میکند.
- کیفیت تصویر بالاتر: با WebP نیازی به فدا کردن کیفیت تصویر برای بارگذاری سریعتر نیست.
- پشتیبانی از ویژگی های تصویر اضافی: برخلاف برخی فرمت های دیگر، WebP از شفافیت و انیمیشن پشتیبانی میکند.
معایب قالب WebP
- در اصل برای اینترنت طراحی شده است و برای مشاهده آفلاین تصاویر کارایی ندارد.
- مرورگرهای قدیمی تر، مانند Edge 12-17 و Firefox 2-64، از WebP پشتیبانی نمیکنند
- در برخی موارد، فشرده سازی WebP میتواند کمی کیفیت تصویر را کاهش دهد. این هنگام کار با تصاویر با وضوح بالا که باید با وفاداری بالا نمایش داده شوند، مهم است.
جایگزین های WebP
WebP در مقابل PNG
PNG یک فرمت تصویری پرکاربرد است. مانند WebP از شفافیت پشتیبانی میکند که یک عنصر مهم برای طراحی وب است. شفافیت به شما این امکان را میدهد که تصاویر خود را طوری ساختار دهید که با یکدیگر در تضاد نباشند و در عین حال چارچوب طراحی ثابتی را حفظ کنید.
مزایای اصلی WebP نسبت به PNG عبارتند از:
- WebP با کیفیت تصویر یکسان، 23 درصد حجم فایل کمتری نسبت به PNG ارائه میدهد.
- WebP از انیمیشن پشتیبانی میکند، در حالی که PNG پشتیبانی نمیکند.
مزیت اصلی JPG نسبت به WebP این است که توسط همه مرورگرها پشتیبانی می شود.
WebP در مقابل JPEG
JPEG فرمتی است که به طور گسترده در اینترنت مورد استفاده قرار میگیرد و ابتدا در سال 1992 منتشر شد. از یک الگوریتم فشرده سازی با اتلاف استفاده میکند که به کاربران امکان میدهد سطح فشرده سازی را به صورت درصد تعریف کنند و تعادلی بین کیفیت و اندازه فایل پیدا کنند.
مزایای اصلی WebP نسبت به JPEG عبارتند از:
- WebP اندازه فایل هایی را ارائه میدهد که 25-35٪ کوچکتر از JPEG برای همان سطح کیفیت، همانطور که توسط شاخص تشابه ساختاری (SSIM) اندازه گیری می شود.
- WebP از انیمیشن پشتیبانی میکند، در حالی که JPEG این کار را نمیکند.
مانند PNG، مزیت اصلی JPEG این است که بیشتر توسط مرورگرها و دستگاه ها پشتیبانی می شود.
WebP در مقابل AVIF
AVIF مخفف فرمت فایل تصویری AV1 است که یک فرمت منبع باز برای ذخیره تصاویر متحرک و ثابت است. AVIF که در سال 2019 توسط AOMedia منتشر شد، یک نسخه تصویری از فرمت ویدیویی AV1 است. این از فریم های ویدیویی با استفاده از کُدِک AV1 مشتق شده و دارای محدودیت هایی در اندازه تصویر است — محدودیت پیش فرض AVIF 8K (7680 x 4320 پیکسل) است. با این حال، کاربران میتوانند با استفاده از کاشی های رمزگذاری شده جداگانه از آن فراتر روند.
WebP دارای محدودیت سخت وضوح تصویر 16383×16383 پیکسل است در حالیکه بزرگتر از حد پیش فرض AVIF است، اما هیچ راه حلی مانند AVIF وجود ندارد. هیچ کدام از این فرمت ها JPEG 200 یا PNG را که حداکثر 5000 مگاپیکسل محدودیت دارند مقایسه نمیکند. WebP از مرورگر پشتیبانی بیشتری نسبت به AVIF دارد.
فرمت WebP قصد دارد تصاویری باکیفیت بالاتر در اندازه فایل قابل مقایسه با JPEG ارائه دهد. با این حال، AVIF با حفظ کیفیت تصویر (هم برای فشرده سازی با اتلاف و هم برای فشرده سازی بدون اتلاف) فشرده سازی بیشتری را فراهم میکند. فشرده سازی WebP میتواند عوارض جانبی مانند مسدود شدن و باند رنگی داشته باشد.
تبدیل WebP حساس به مرورگر با Cloudinary
چالش اصلی WebP این است که توسط همه مرورگرها و پلتفرم ها پشتیبانی نمیشود. برای ارائه تصاویر WebP در وبسایت خود و بهره مندی از مزایای اندازه تصویر کمتر و عملکرد بهبود یافته، باید:
- تبدیل تصاویر موجود به WebP
- هم نسخه اصلی و هم نسخه WebP را ذخیره کنید
- کدی را در سایت خود پیاده کنید که نسخه WebP را برای مرورگرهای پشتیبانی کننده و نسخه بازگشتی مانند PNG یا JPG را برای مرورگرهای دیگر نشان میدهد.
Cloudinary میتواند تنها با یک خط کد به این امر کمک کند! در اینجا به این صورت است:
- یک حساب کاربری رایگان Cloudinary ثبت نام کنید
- تصاویر موجود خود را در فضای ذخیره سازی ابری Cloudinary آپلود کنید.
- با استفاده از یک URL خاص مانند این تصویر را به سایت خود اضافه کنید: https://res.cloudinary.com/demo/image/upload/w_300,f_auto/nice_beach.jpg
- پارامتر f_auto عملکرد جادویی دارد - حتی اگر فایل اصلی JPG است، در مرورگرهای پشتیبانی شده، Cloudinary به طور خودکار فایل را به WebP تبدیل می کند.
با یک مرحله ساده، میتوانید تمام تصاویر خود را برای مرورگرهای پشتیبانی شده به WebP تبدیل کنید، در حالی که به ارائه فرمت های سنتی برای مرورگرهای پشتیبانی نشده ادامه می دهید.
منبع: cloudinary.com