به‌روزرسانی درباره نحوه پذیرش AVIF در بوم‌سازگان.
AVIF قالب تصویر جدیدی است که به‌دلیل نرخ فشرده‌سازی بالا، عملکرد کارآمد، و پذیرش گسترده به‌سرعت درحال محبوب شدن در وب است. AVIF یک قالب تصویر باز و بدون بهره مالکانه است که براساس کدک ویدیویی AV1 استانداردشده توسط «اتحاد رسانه‌های باز» ساخته شده است. این پست وبلاگ نمای کلی‌ای از نحوه پذیرش AVIF در بوم‌سازگان و نوع عملکرد و مزایای کیفیتی که توسعه‌دهندگان می‌توانند از AVIF برای تصاویر ثابت و پویانمایی‌ها انتظار داشته باشند ارائه می‌دهد.
چه چیز جدیدی در بوم‌سازگان AVIF وجود دارد؟
از زمان معرفی AVIF در Chrome، Firefox، و Safari، استفاده از AVIF در وب به‌طور پیوسته درحال رشد بوده است؛ امروزه تقریباً همه مرورگرها از AVIF پشتیبانی می‌کنند.
فقط در Chrome، استفاده از AVIF در مدت کمی بیشتر از یک سال پس‌از اینکه Chrome پشتیبانی از AVIF را در نسخه پایدار اضافه کرد، به حدود یک درصد افزایش یافت.
تعدادی از CDNهای تصویر، مانند Akamai، Cloudflare، Cloudinary و Imgix امروزه تصاویر AVIF را ارائه می‌دهند. Imgix در پست وبلاگی که برای اعلام پشتیبانی از AVIF منتشر کرد، گزارش داد که اندازه فایل AVIF در مقایسه با JPEG ۶۰٪ و در مقایسه با WebP ۳۵٪ کاهش یافته است. این صرفه‌جویی در اندازه فایل منجر به صرفه‌جویی قابل‌توجهی در فضای ذخیره‌سازی می‌شود، اما به بارگیری سریع‌تر صفحه‌ها نیز کمک می‌کند و زمان بزرگ‌ترین نقاشی دارای محتوا (LCP) را سریع‌تر می‌کند. LCP یکی از معیارهای کلیدی اصلی وب است و نشان می‌دهد که بزرگ‌ترین بلوک محتوا در صفحه با چه سرعتی بار شده است. استفاده از کدک‌های مدرن برای فشرده‌سازی تصاویر یکی از تکنیک‌های کلیدی برای کاهش LCP است. Lighthouse ابزار توسعه‌دهنده Chrome عالی‌ای برای آزمایش وب‌سایت شما و دیدن میزان صرفه‌جویی‌ای است که AVIF به‌همراه دارد.
WordPress محبوب‌ترین پلاتفرم وب‌سایت در جهان است و افزونه‌های متعددی برای توسعه‌دهندگان دردسترس است تا تصاویر خود را به AVIF تبدیل کنند، ازجمله:
برای توسعه‌دهندگانی که می‌خواهند خودشان کار را انجام دهند، ابزارهایی مثل ImageMagick و FFmpeg نقطه شروع خوبی هستند.
سرعت کدبندی AVIF
سرعت کدگذاری بالا و کیفیت بصری بالا برای پیاده‌سازی فشرده‌سازی تصویر در مقیاس بزرگ حیاتی هستند. سرعت کدبندی نرم‌افزار AVIF در دو سال گذشته به‌طور قابل‌توجهی بهبود یافته است. درمقایسه با دیگر قالب‌های مدرن تصویر ثابت، AVIF فایل‌های کوچک‌تری با کیفیت بصری مشابه تولید می‌کند (نمودار زیر را ببینید، هرچه پایین‌تر باشد بهتر است) اما کدبندی آن نیز سریع‌تر است.
نمودار زیر (هرچه بالاتر باشد بهتر است) نشان می‌دهد که سرعت کدبندی AVIF در مقایسه با سایر قالب‌های تصویر چگونه است. کدک‌های نسل قبلی مانند WebP از الگوریتم‌های فشرده‌سازی کمتر پیچیده (اما همچنین کمتر کارآمد) بهره می‌برند. با طرح کدبندی چندرشته‌ای، AVIF عملکرد مشابهی برای موارد استفاده رایج ارائه می‌دهد و درعین‌حال دستاوردهای فشرده‌سازی قابل‌توجهی را ارائه می‌دهد.
برای توسعه‌دهندگانی که به مقایسه دقیق‌تر سرعت کدبندی و کیفیت بصری علاقه‌مند هستند، سایت مقایسه کدبندی تصویر حاوی نتایج محک قابل‌تکرار است.
درحالی‌که پیاده‌سازی‌های نرم‌افزاری برای کدک‌های تصویر مدرن مانند AVIF و WebP برای معماری‌های پردازنده x86 و ARM بهینه‌سازی شده‌اند، فشرده‌سازی حجم زیادی از تصاویر در مقیاس بزرگ می‌تواند از نظر محاسباتی پرهزینه باشد. یک جایگزین برای کاهش هزینه‌های فشرده‌سازی، بررسی شتاب سخت‌افزاری است. Bluedot یک کدبند Pulsar-AVIF با شتاب سخت‌افزاری توسعه داده است که روی FPGAهای قابل‌برنامه‌ریزی، مانند Alveo U250 از AMD، اجرا می‌شود. درمقایسه با avifenc مبتنی بر نرم‌افزار، Pulsar-AVIF سرعت را ۷ تا ۲۳ برابر با بازده فشرده‌سازی مشابه بهبود می‌بخشد.
- مجموعه آزمایشی: Kodak (۲۴ تصویر ۷۶۸×۵۱۲)
- کدبندی ۲۴ تصویر به‌طور هم‌زمان (۲۴ فرایند)
- هر فرایند کدبندی نرم‌افزار با ۴ رشته اجرا می‌شود. (-j 4)
توسعه‌دهندگان می‌توانند کدبند Pulsar-AVIF را با ماشین‌های مجازی ابری، مانند Azure NP-Series، مستقر کنند.
ویژگی‌های AVIF برای صفحه‌های وب واکنش‌گرا
AVIF چند ویژگی جالب دارد که به ارائه صفحه‌های وب واکنش‌گراتر کمک می‌کند. این بار کمی به AVIFهای پویانمایی‌شده می‌پردازیم که تا حد زیادی کارآمدترین روش برای ارائه پویانمایی‌های جالب در وب است.
AVIF پویانمایی‌شده
GIF پویانمایی‌شده با وجود اینکه ۳۵ سال قدمت دارد، همچنان قالبی محبوب برای تصاویر پویانمایی‌شده است. بزرگ‌ترین معایب گیف‌های پویانمایی‌شده پشتیبانی از تنها ۲۵۶ رنگ و فشرده‌سازی ضعیف است که منجر به اندازه‌های بسیار بزرگ فایل می‌شود و درعین‌حال وضوح یا نرخ فریم را برای موارد استفاده عملی محدود می‌کند. درمقابل، کدگذاری AVIF پویانمایی‌شده درواقع همان طرح کدگذاری ویدیو AV1 است که درمقایسه با GIF پویانمایی‌شده، صرفه‌جویی قابل‌توجهی در اندازه فایل ارائه می‌دهد.
ما یک محک ساده اجرا کردیم که در آن مجموعه‌ای از گیف‌های پویانمایی‌شده را به هر دو فرمت AVIF و JPEG XL کدگذاری کردیم. در مجموعه آزمایشی، درصد صرفه‌جویی در اندازه فایل میانه تقریباً ۸۶٪ درمقایسه با فایل‌های GIF اصلی و حدود ۷۳٪ درمقایسه با فایل‌های JPEG XL پویانمایی‌شده بود*.
Chrome، Firefox، و Safari همگی از بازپخش AVIF پویانمایی‌شده پشتیبانی می‌کنند.
FFmpeg یکی از ابزارهایی است که برای ایجاد فایل‌های AVIF پویانمایی‌شده استفاده می‌شود، در اینجا نمونه‌ای ساده از تبدیل GIF به AVIF بااستفاده از FFmpeg آورده شده است:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF کیفیت برونداد مطلوب در مقیاس 0 تا 63 است. مقادیر کمتر به‌معنای کیفیت بهتر و اندازه فایل بزرگ‌تر است. 0 از فشرده‌سازی بدون اتلاف استفاده می‌کند. برای فایل‌های AVIF پویانمایی‌شده کوچک، با مقدار 23 شروع کنید.
FFmpeg به‌طور پیش‌فرض از libaom برای کدبندی تصاویر AVIF استفاده می‌کند، اما می‌تواند از rav1e یا SVT-AV1 نیز درصورت دردسترس بودن استفاده کند. اطلاعات بیشتر درباره انتخاب‌های کدبند، تنظیم پارامترهای کدبندی برای توازن سرعت/کیفیت را می‌توانید در راهنمای کدبندی AV1 در FFmpeg پیدا کنید.
مورد استفاده دیگر، بسته‌بندی مجدد ویدیو AV1 در AVIF بدون کدبندی مجدد فایل اصلی است. این کار به‌طور قابل‌توجهی ارزان‌تر از رمزگشایی/رمزگذاری فایل AV1 اصلی است و ویدیو AV1 را برای استفاده با عنصر <img> دردسترس قرار می‌دهد. با ارسال -c:v copy به FFmpeg می‌توان این کار را انجام داد.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
نتیجه‌گیری‌ها
استفاده از AVIF در وب از زمان راه‌اندازی به‌طور پیوسته درحال افزایش بوده است و به‌طور گسترده توسط مرورگرها، CDNهای تصویر، افزایه‌های WordPress، و ابزارهای کدبندی پشتیبانی می‌شود. درمجموع، AVIF انتخابی عالی برای ارائه تصاویر در وب است؛ AVIF به‌سرعت کدبندی و کدگشایی می‌شود و درعین‌حال بهترین کیفیت یا کوچک‌ترین اندازه فایل را ارائه می‌دهد، هرکدام را که برای وب‌سایتتان ترجیح می‌دهید. AVIF کارآمدترین روش برای ارائه پویانمایی در وب است. اگر سؤال، نظر، یا درخواست ویژگی دارید، لطفاً ازطریق فهرست پستی av1-discuss، انجمن AOM Github، و ویکی AVIF با ما تماس بگیرید.