shadcn.io— هزاران بلوک آمادهٔ shadcn/ui
رفتن به محتوا

AVIF در برابر WebP — فایل کوچک‌تر همیشه فایل درست نیست

یک شب خجالت‌آور را صرف مقایسهٔ A/B همان تصویر هدر به‌صورت WebP و AVIF کردم، بین دو تب مرورگر جابه‌جا می‌شدم و می‌کوشیدم تفاوتی را که چشمم واقعاً ببیند شکار کنم. AVIF ‏31% کوچک‌تر بود. نتوانستم از هم تشخیصشان بدهم. آنجا نشستم با این حس که پول مفت پیدا کرده‌ام — و بعد همان دسته را روی پوشه‌ای از 200 تصویر اجرا کردم و نکتهٔ اصلی یادم آمد.

AVIF بیشتر وقت‌ها فایل کوچک‌تر است. این بخش درست است و ارزش دانستن دارد. اما «کوچک‌تر» فقط یکی از ستون‌های جدول است، و تصمیم واقعی در ستون‌های دیگر زندگی می‌کند.

کجا AVIF می‌بَرد

AVIF روی کدک ویدیویی AV1 ساخته شده، و طراحی‌اش واقعاً تازه‌تر و زیرکانه‌تر از WebP است. روی محتوای عکسی معمولاً 15 تا 30% کوچک‌تر از یک WebP با کیفیت بصری همسان درمی‌آید. گرادیان‌های نرم — آسمان، پوست، سایه‌های ملایم — را بدون آن آرتیفکت‌های بلوکی که کدک‌های قدیمی‌تر رویشان می‌مالند مدیریت می‌کند. از HDR و گسترهٔ رنگی وسیع پشتیبانی می‌کند، که WebP نمی‌کند. یک کانال آلفای کامل را هم نگه می‌دارد، درست مثل WebP.

چند عدد تقریبی از همان پوشه‌ای که گفتم، همه با تنظیم کیفیتی که نتوانستم تفاوتی در آن ببینم:

منبعWebPAVIF
یک عکس هدر — PNG سه‌ممیزیک‌مگابایتیحدود 360 KBحدود 250 KB
یک عکس محصول — JPG یک‌ممیزچهارمگابایتیحدود 180 KBحدود 140 KB
یک تصویرسازی تخت رابط کاربریحدود 28 KBحدود 30 KB

به سطر آخر دوباره نگاه کنید. روی گرافیک تخت و ساده، AVIF گاهی بزرگ‌تر درمی‌آید. زیرکی‌اش برای پیچیدگی عکسی تنظیم شده، و در یک تصویرسازی دورنگ چیزی برای جویدن ندارد. WebP، یا حتی PNG، آنجا می‌تواند ببَرد.

کجا AVIF برایتان هزینه دارد

بردِ حجمی رایگان نیست. دو بهای واقعی:

زمان کدگذاری. AVIF به‌مراتب کندتر فشرده می‌شود. روی یک تصویر واحد، کدگذاری AVIF می‌تواند چند برابر بیشتر از WebP طول بکشد — گاهی همان فرق بین «آنی» و «چند ثانیه صبر برای هر فایل». برای یک تصویر هدر، مهم نیست. برای دسته‌ای 200تایی، تک‌تک ثانیه‌ها را حس می‌کنید. WebP آن‌قدر سریع کدگذاری می‌شود که عملاً مجانی است.

رمزگشایی و پشتیبانی. حالا هر مرورگری که مردم واقعاً از آن استفاده می‌کنند AVIF را رمزگشایی می‌کند — Chrome از سال 2020، Firefox کمی بعد، Safari از نسخهٔ 16 در اواخر 2022. در سال 2026 این بخش عمدهٔ ترافیک واقعی را پوشش می‌دهد. اما «پشتیبانی‌شده» و «همگانی» یک کلمه نیستند. WebP چند سال اشباع بیشتری پشت سرش دارد، و روی گوشی‌های ضعیف سریع‌تر رمزگشایی می‌شود، جایی که رمزگشایی AV1 می‌تواند باتری و پردازنده را به‌طور محسوسی مصرف کند. بعضی کلاینت‌های ایمیل و وب‌ویوهای تعبیه‌شدهٔ قدیمی هنوز اصلاً به AVIF دست نمی‌زنند.

پرسش 20 درصد

پس تصمیم واقعی به این می‌رسد: آیا آن حدود 20% اضافه برای این تصویر، در این جا، اهمیت دارد؟

برای یک تصویر هدر بزرگ روی صفحهٔ فرود — همان دارایی سنگینی که هر بازدیدکننده دانلودش می‌کند — بله. کندن 100 کیلوبایت از چیزی که اولین رنگ‌آمیزی صفحه‌تان را کنترل می‌کند ارزش یک کدگذاری کندتر را دارد که فقط یک‌بار می‌پردازید. این روشن‌ترین موردی است که برای AVIF می‌شناسم.

برای یک شبکهٔ بندانگشتی، اسکرین‌شات‌های درون‌متنی یک بلاگ، یا هر چیزی که به‌صورت WebP از پیش زیر حدود 50 کیلوبایت است، پاسخ معمولاً نه است. بیست درصدِ یک عدد کوچک، عددی کوچک‌تر است. زمان کدگذاری و کمی سازگاری را داده‌اید تا بایت‌هایی را صرفه‌جویی کنید که کسی منتظرشان نبود. WebP آنجا پیش‌فرض آرام‌تری است.

کِی زحمت AVIF را به خود نمی‌دهم

اگر فایلی قرار است جایی بیرون از یک مرورگر مدرن برود — یک خبرنامهٔ ایمیلی، یک سیستم مدیریت محتوای قدیمی، سیستم شریکی که کنترلش دست من نیست — روی AVIF قمار نمی‌کنم. از WebP استفاده می‌کنم، یا JPG ساده اگر بخواهم ریسک صفر باشد. کوچک‌ترین فایلی که رندر نمی‌شود هیچ ارزشی ندارد.

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

اینکه واقعاً چطور تصمیم می‌گیرم

روند صادقانه‌ام: چیزهای سنگین عکسی را به AVIF تبدیل می‌کنم و چیزهای سبک، ساده و پُرپخش را به‌صورت WebP نگه می‌دارم. یک قالب برای حکمرانی بر همه نیست. انتخاب برای هر تصویر است.

اگر خواستید خودتان مقایسه را امتحان کنید، هر دو همین‌جا در مرورگر شما اجرا می‌شوند — WebP به AVIF برای فشردن بیشتر دارایی‌های WebP موجود، و PNG به AVIF برای رفتن مستقیم از یک نسخهٔ مادر. هیچ چیزی جایی آپلود نمی‌شود؛ کدگذاری روی دستگاه شما رخ می‌دهد، که همین هم دلیلی است که کندی AVIF را دست‌اول حس می‌کنید. این باگ نیست. این کدک است که برای فایلی کوچک‌تر کار بیشتری می‌کند، درست جلوی چشم شما.

تصویر هدر خودتان را از هر دو رد کنید. اگر نمی‌توانید تفاوت را ببینید و AVIF به‌طور معناداری کوچک‌تر است، پاسخ را دارید. فقط فرض نکنید پاسخ برای 200 فایل بعدی هم همان است.

نوشته‌های مرتبط


همهٔ نوشته‌ها