WebP در برابر AVIF: مقایسه قالب‌های تصویر نسل جدید برای عملکرد وب

۱. تکامل تصاویر وب: چرا JPEG و PNG منسوخ شده‌اند

بیش از سی سال، وب تقریباً منحصراً به دو قالب تصویر متکی بود: JPEG ‏(که در ۱۹۹۲ برای فشرده‌سازی اتلافی عکاسی معرفی شد) و PNG ‏(که در ۱۹۹۶ برای گرافیک بدون اتلاف و شفافیت آلفا معرفی شد). اگرچه هر دو قالب در دوران اینترنت تلفنی انقلابی بودند، الگوریتم‌های فشرده‌سازی آن‌ها برای نمایشگرهای پرتراکم DPI و شبکه‌های موبایل امروز اساساً ناکارآمدند.

JPEG بر بلوک‌های ساده ۸×۸ پیکسلی تبدیل کسینوسی گسسته (DCT) متکی است. در نرخ‌های بیتی پایین، JPEG به آثار بلوکی مربعی زشت و آزاردهنده و نویز پشه‌ای در اطراف لبه‌های پرکنتراست فرو می‌پاشد. افزون بر این، JPEG استاندارد نه از شفافیت آلفا پشتیبانی می‌کند و نه از گستره‌های رنگی وسیع. PNG اگرچه کیفیت بدون اتلاف و کانال‌های آلفای ۸ بیتی فراهم می‌کند، برای تصاویر عکاسی حجم فایل‌های عظیمی تولید می‌کند، چون فشرده‌سازی DEFLATE آن نمی‌تواند از همبستگی‌های مکانی میان پیکسل‌ها به‌طور مؤثر بهره ببرد.

عملکرد وب مدرن به قالب‌های نسل جدیدی نیاز دارد که حول کدگذاری پیش‌بین درون‌فریمی کدک‌های ویدیویی مدرن مهندسی شده‌اند: WebP ‏(برگرفته از کدک ویدیویی VP8) و AVIF ‏(برگرفته از کدک ویدیویی پیشرفته AV1). هر دو قالب وزن بایتی را در مقایسه با JPEG قدیمی ۳۰٪ تا ۵۰٪ کاهش می‌دهند و وضوح بصری برتری ارائه می‌کنند.

۲. معماری WebP: کدگذاری درون‌فریمی VP8 و فیلترگذاری پیش‌بین بدون اتلاف

WebP که Google توسعه داد و در سال ۲۰۱۰ استاندارد شد، تصاویر بصری را در یک ظرف گسترش‌یافته RIFF بسته‌بندی می‌کند. WebP در دو حالت اساساً متمایز کار می‌کند:

۱. WebP اتلافی (پیش‌بینی درون‌فریمی VP8): WebP اتلافی تصاویر را به ماکروبلوک‌های ۱۶×۱۶ تقسیم می‌کند. WebP به‌جای پردازش مستقل هر بلوک مانند JPEG، مقادیر پیکسلی هر بلوک را بر اساس بلوک‌های همسایه‌ای که پیش‌تر رمزگشایی شده‌اند پیش‌بینی می‌کند (با حالت‌های پیش‌بینی افقی، عمودی، DC و TrueMotion). کدک فقط تفاوت باقی‌مانده (خطای میان پیش‌بینی و واقعیت) را رمزگذاری و داده مورد نیاز را به‌شدت کاهش می‌دهد.

۲. WebP بدون اتلاف (VP8L): برای گرافیک‌ها، لوگوها و اسکرین‌شات‌ها، WebP بدون اتلاف از تبدیل‌های مکانی پیش‌بین پیشرفته، ناهمبسته‌سازی فضای رنگی، نمایه‌سازی کش رنگ محلی و کدگذاری آنتروپی Huffman استفاده می‌کند. فایل‌های WebP بدون اتلاف معمولاً ۲۶٪ کوچک‌تر از PNGهای بهینه‌شده‌اند و ۱۰۰٪ پیکسل‌های بیت به بیت یکسان را حفظ می‌کنند.

۳. پذیرش جهانی در مرورگرها: تا سال ۲۰۲۶، WebP بیش از ۹۷٪ پشتیبانی جهانی مرورگرها را در Google Chrome، ‏Apple Safari ‏(iOS 14+ و macOS Big Sur+)، ‏Mozilla Firefox و Microsoft Edge دارد و همین آن را به گزینه پیش‌فرض امن و جایگزین‌پذیر برای نشر وب مدرن تبدیل کرده است.

۳. معماری AVIF: ابرفشرده‌سازی AV1، رنگ ۱۰ بیتی و HDR

AV1 Image File Format ‏(AVIF) اوج کنونی فناوری فشرده‌سازی تصویر است. AVIF که توسط Alliance for Open Media ‏(AOMedia) — کنسرسیومی شامل Google، ‏Apple، ‏Microsoft، ‏Mozilla، ‏Amazon و Netflix — توسعه یافته، فریم‌های ثابت رمزگذاری‌شده با پیشرفته‌ترین کدک ویدیویی AV1 را درون یک ظرف ISO Base Media File Format ‏(ISOBMFF) قرار می‌دهد.

AVIF پیشرفت‌های نسلی نسبت به WebP را در خود جای داده است:

- بخش‌بندی انعطاف‌پذیر بلوک: AVIF به‌جای ماکروبلوک‌های ثابت ۱۶×۱۶، از بخش‌بندی بازگشتی quadtree از ابربلوک‌های ۱۲۸×۱۲۸ تا زیربلوک‌های ۴×۴ استفاده می‌کند و به کدک اجازه می‌دهد بافت‌های پیچیده را حفظ کند و در عین حال فشرده‌سازی شدید را روی پس‌زمینه‌های صاف اعمال کند.

- پیش‌بینی جهت‌دار پیشرفته: ۵۶ زاویه پیش‌بینی درون‌فریمی جهت‌دار، پیش‌بینی کرومای میان‌مؤلفه‌ای (پیش‌بینی رنگینگی از روشنایی) و فیلترهای هموارسازی جهت‌دار خودکار دارد.

- رنگ عمیق و High Dynamic Range ‏(HDR): در حالی که WebP کاملاً به عمق رنگ ۸ بیتی (۱۶٫۷ میلیون رنگ) محدود است، AVIF به‌طور بومی از عمق رنگ ۱۰ و ۱۲ بیتی، سطوح روشنایی HDR و گستره‌های رنگی وسیع (P3 و Rec. 2020) پشتیبانی می‌کند و نوارشدگی رنگ را در آسمان‌های صاف و گرادیان‌های غروب حذف می‌کند.

- نسبت‌های فشرده‌سازی فوق‌العاده: در کیفیت بصری برابر (که با معیارهای ادراکی SSIM و DSSIM سنجیده می‌شود)، AVIF تقریباً ۲۰٪ کوچک‌تر از WebP و تا ۵۰٪ کوچک‌تر از JPEG بهینه‌شده است.

۴. WebP متحرک و AVIF متحرک: پایان GIF قدیمی

فراتر از عکاسی ثابت، هر دو قالب WebP و AVIF ناقوس مرگ قالب منسوخ GIF سال ۱۹۸۹ را به صدا درآورده‌اند. GIF قدیمی با جدول رنگ کهنه ۸ بیتی (حداکثر ۲۵۶ رنگ در هر فریم) و فشرده‌سازی ابتدایی LZW به‌شدت محدود است و حتی برای حلقه‌های انیمیشن کوتاه فایل‌های غول‌پیکر چندمگابایتی تولید می‌کند.

WebP متحرک رنگ کامل RGB ‏۲۴ بیتی با شفافیت آلفای ۸ بیتی در هر فریم فراهم می‌کند و با حذف دیترینگ رنگی زشت، حجم فایل انیمیشن را در مقایسه با GIF ‏۶۵٪ تا ۸۰٪ کاهش می‌دهد.

AVIF متحرک فشرده‌سازی انیمیشن را باز هم فراتر می‌برد: چون از موتور کامل فشرده‌سازی ویدیویی AV1 ‏(شامل کدگذاری دلتای میان‌فریمی زمانی و جبران بردار حرکت) استفاده می‌کند، فایل AVIF متحرک اغلب ۹۰٪ کوچک‌تر از GIF معادل است. اگر کلیپ‌های ویدیویی دارید که باید به‌صورت انیمیشن پرکارایی منتشر شوند، می‌توانید از ابزار تبدیل کلیپ کوتاه به GIF ما نیز استفاده کنید.

۵. محک عملکرد: مقایسه کنار هم WebP و AVIF

برای درک اینکه هر قالب را چه زمانی به کار بگیرید، این مقایسه مهندسی جامع را در نظر بگیرید:

۱. کارایی فشرده‌سازی: برنده AVIF. در محک‌های عکاسی، AVIF در رده‌های کیفیت بالا و متوسط پیوسته ۱۵٪ تا ۲۵٪ در کاهش بایت از WebP جلو می‌زند و در نرخ‌های بیتی بسیار پایین که WebP جزئیات را نرم می‌کند، به‌طور چشمگیری از آن بهتر عمل می‌کند.

۲. سرعت رمزگذاری و سربار CPU: برنده WebP. WebP ‏۵ تا ۱۰ برابر سریع‌تر از AVIF رمزگذاری می‌کند. رمزگذاری هزاران تصویر با وضوح بالا به AVIF روی سرور ساخت به محاسبات قابل توجه CPU نیاز دارد، در حالی که WebP تقریباً فوراً در web workerها کامپایل می‌شود.

۳. سرعت رمزگشایی روی موبایل: برنده WebP. اگرچه تراشه‌های موبایل مدرن روزبه‌روز بیشتر رمزگشای سخت‌افزاری AV1 دارند، گوشی‌های هوشمند قدیمی‌تر AVIF را به‌صورت نرم‌افزاری در CPU رمزگشایی می‌کنند و کمی بیشتر از WebP باتری مصرف می‌کنند.

۴. پشتیبانی مرورگرها (۲۰۲۶): WebP همه‌جا پشتیبانی می‌شود (۹۷٪+). AVIF در Chrome، ‏Firefox، ‏Safari ‏(iOS 16+ / macOS Ventura+) و Edge پشتیبانی می‌شود و به حدود ۹۳٪ پشتیبانی جهانی می‌رسد.

۶. استقرار عملیاتی: راهبرد تدریجی تگ HTML5 <picture>

معماری مدرن فرانت‌اند وب به‌جای تحمیل انتخاب همه یا هیچ میان قالب‌ها، امکان ارائه پویای قالب بهینه را با عنصر HTML5 <picture> فراهم می‌کند:

<picture>
  <!-- Serve AVIF to cutting-edge browsers (smallest payload) -->
  <source srcset="hero.avif" type="image/avif">
  <!-- Serve WebP to browsers supporting WebP -->
  <source srcset="hero.webp" type="image/webp">
  <!-- Universal fallback for legacy clients and crawlers -->
  <img src="hero.jpg" alt="Hero Banner" width="1200" height="600" loading="lazy" decoding="async">
</picture>

مرورگر منابع را از بالا به پایین ارزیابی و نخستین قالبی را که پشتیبانی می‌کند دانلود می‌کند. بازدیدکنندگان Chrome و Safari مدرن AVIF فوق‌فشرده را دانلود می‌کنند؛ کلاینت‌های قدیمی‌تر WebP دریافت می‌کنند؛ و خزنده‌های وب قدیمی به JPEG بازمی‌گردند و این سازگاری ۱۰۰٪ را با بیشترین سرعت تضمین می‌کند.

۷. تبدیل تصاویر درون مرورگر بدون هیچ خطر حریم خصوصی سرور

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

- برای تبدیل JPEGهای قدیمی به WebP مدرن: از تبدیل JPG به WebP استفاده کنید.

- برای تبدیل PNGهای شفاف به WebP بدون اتلاف: از تبدیل PNG به WebP استفاده کنید.

- برای تولید فایل‌های پیشرفته AVIF: از تبدیل JPG به AVIF یا تبدیل PNG به AVIF استفاده کنید.

- برای بازگرداندن فایل‌های WebP به JPEGهای همگانی: از تبدیل WebP به JPG استفاده کنید.

همه تبدیل‌ها از طریق Web Workerها در RAM مرورگر اجرا می‌شوند و پردازش دسته‌ای فوری را بدون انتقال داده به ابر تضمین می‌کنند.