استقرار AVIF برای وب سایت های واکنش گرا بیشتر

به روز رسانی در مورد نحوه پذیرش AVIF در اکوسیستم.

جانی هووپونن
Jani Huoponen
ویگنش ونکاتاسوبرامانیان
Vignesh Venkatasubramanian

AVIF یک فرمت تصویر جدید است که به دلیل نرخ فشرده سازی بالا، عملکرد کارآمد و پذیرش گسترده، به سرعت در حال محبوبیت در وب است. AVIF یک فرمت تصویر باز و بدون حق امتیاز است که بر اساس کدک ویدیویی AV1 استاندارد شده توسط Alliance for Open Media است. این پست وبلاگ یک نمای کلی از نحوه استفاده از AVIF در اکوسیستم ارائه می دهد و توسعه دهندگان چه نوع عملکرد و مزایای کیفی می توانند از AVIF برای تصاویر ثابت و انیمیشن ها انتظار داشته باشند.

چه چیزی با اکوسیستم AVIF جدید است؟

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

تنها در کروم، پس از اینکه کروم پشتیبانی AVIF را در حالت پایدار اضافه کرد، در مدت کمی بیش از یک سال، استفاده از AVIF به تقریباً یک درصد افزایش یافت.

نمودار خطی استفاده از AVIF در Chrome از مه 2021 تا مارس 2023. پشتیبانی به طور پیوسته از 0٪ به کمتر از 1.4٪ افزایش یافته است.

تعدادی از CDN های تصویر، مانند Akamai ، Cloudflare ، Clodinary و Imgix امروزه تصاویر AVIF را ارائه می کنند. در یک پست وبلاگی که پشتیبانی از AVIF را اعلام کرد، Imgix 60٪ در اندازه فایل در مقایسه با JPEG و 35٪ در مقایسه با WebP صرفه جویی را گزارش کرد. این صرفه جویی در اندازه فایل منجر به صرفه جویی قابل توجهی در فضای ذخیره سازی می شود، اما همچنین به بارگذاری سریعتر صفحات کمک می کند و باعث می شود تا زمان های Largest Contentful Paint (LCP) سریعتر انجام شود. LCP یکی از Core Web Vitals است و نشان دهنده سرعت بارگیری بزرگترین بلوک محتوا در صفحه است. استفاده از کدک های مدرن برای فشرده سازی تصاویر یکی از تکنیک های کلیدی برای کاهش LCP است. Lighthouse یک ابزار توسعه دهنده Chrome عالی برای آزمایش وب سایت شما و دیدن میزان صرفه جویی AVIF است.

وردپرس محبوب ترین پلتفرم وب سایت در جهان است و پلاگین های مختلفی برای توسعه دهندگان برای تبدیل تصاویر خود به AVIF در دسترس است، مانند:

برای توسعه دهندگان دستی بیشتر، ابزارهایی مانند ImageMagick و FFmpeg نقطه شروع خوبی هستند.

سرعت رمزگذاری AVIF

سرعت رمزگذاری سریع و کیفیت بصری بالا برای به کارگیری فشرده سازی تصویر در مقیاس بسیار مهم است. سرعت رمزگذاری نرم افزار AVIF طی دو سال گذشته به طور قابل توجهی بهبود یافته است. در مقایسه با سایر فرمت‌های تصویر ثابت مدرن، AVIF فایل‌های کوچک‌تری را با کیفیت بصری مشابه تولید می‌کند (نمودار زیر را ببینید، پایین‌تر بهتر است) اما همچنین رمزگذاری سریع‌تر است.

یک نمودار میله ای که اندازه فایل های کدک مختلف تصویر را به عنوان درصدی از خروجی TurboJPEG مقایسه می کند. AVIF پایین ترین است، سپس JPEG XL، سپس WebP، و در نهایت MozJPEG.

نمودار زیر (بالاتر بهتر) نشان می دهد که چگونه سرعت رمزگذاری AVIF در مقایسه با سایر فرمت های تصویری است. کدک های نسل قبلی مانند WebP از الگوریتم های فشرده سازی کمتر پیچیده (اما کارآمدتر) بهره می برند. با یک طرح رمزگذاری چند رشته ای، AVIF عملکرد مشابهی را برای موارد استفاده معمول به دست می آورد و در عین حال دستاوردهای فشرده سازی قابل توجهی را ارائه می دهد.

مقایسه سرعت رمزگذاری کدک تصویر رمزگذارهای مقایسه شده عبارتند از AVIF متوسط، متوسط ​​JPEG XL، میانگین WebP (یک رشته) و متوسط ​​MozJPEG (یک رشته). AVIF به طور کلی یکی از سریع‌ترین رمزگذارهای تصویر از نظر بهترین کیفیت و تلاش پیش‌فرض است، اما کندترین رمزگذار برای عملکرد در حین پرواز است.

برای توسعه دهندگانی که علاقه مند به مقایسه دقیق تر سرعت رمزگذاری و کیفیت بصری هستند، سایت Image Coding Comparisons حاوی نتایج محک قابل تکرار است.

در حالی که پیاده‌سازی نرم‌افزار برای کدک‌های تصویر مدرن مانند AVIF و WebP برای معماری‌های پردازنده‌های x86 و ARM بهینه‌سازی شده‌اند، فشرده‌سازی مقادیر زیادی از تصاویر در مقیاس می‌تواند از نظر محاسباتی گران باشد. یک جایگزین برای کاهش هزینه های فشرده سازی، بررسی شتاب سخت افزاری است. Bluedot یک رمزگذار Pulsar-AVIF با شتاب سخت افزاری را توسعه داده است که بر روی FPGA های قابل برنامه ریزی مانند Alveo U250 AMD اجرا می شود. Pulsar-AVIF در مقایسه با avivenc مبتنی بر نرم‌افزار، 7 تا 23 برابر سرعت را با راندمان فشرده‌سازی مشابه بهبود می‌بخشد.

رمزگذار زمان رمزگذاری (ms) فریم بر ثانیه استفاده از CPU مشخصات سخت افزاری
Pulsar-AVIF
(FPGA)
60 409.85 305% AMD Alveo U250 1ea + Intel(R) Xeon(R)
سی پی یو پلاتینیوم 8171 با فرکانس 2.6 گیگاهرتز، 10 هسته
آویفنک
(لیباوم)
405 59.26 3200% CPU Intel(R) Xeon(R) Platinum 8370C در
2.8 گیگاهرتز، 32 هسته
آویفنک
(SVT-AV1)
1325 18.11 3200% CPU Intel(R) Xeon(R) Platinum 8370C در
2.8 گیگاهرتز، 32 هسته
مقایسه سرعت کد AVIF
  • مجموعه تست: کداک (24 تصویر 768x512)
  • رمزگذاری 24 تصویر به طور همزمان (24 فرآیند)
  • هر فرآیند رمزگذاری نرم افزار با 4 رشته اجرا می شود. (-j 4)


توسعه‌دهندگان می‌توانند رمزگذار Pulsar-AVIF را با ماشین‌های مجازی ابری مانند سری NP Azure مستقر کنند.

ویژگی های AVIF برای صفحات وب واکنش گرا

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

AVIF متحرک

GIF متحرک با وجود 35 سال قدمت هنوز یک فرمت محبوب برای تصاویر متحرک است. بزرگترین اشکالات GIFهای متحرک پشتیبانی از 256 رنگ فقط و فشرده سازی ضعیف است که منجر به اندازه فایل های بسیار بزرگ می شود و در عین حال وضوح یا نرخ فریم را برای موارد استفاده عملی محدود می کند. در مقابل، کد نویسی AVIF متحرک در واقع همان طرح کدگذاری ویدیویی AV1 است که در مقایسه با GIF متحرک صرفه جویی قابل توجهی در اندازه فایل ایجاد می کند.

ما یک بنچمارک ساده را اجرا کردیم که در آن مجموعه ای از GIF های متحرک را در AVIF و JPEG XL کدگذاری کردیم. در مجموعه آزمایشی، میانگین درصد صرفه جویی در اندازه فایل تقریباً 86٪ در مقایسه با فایل های GIF اصلی و حدود 73٪ در مقایسه با فایل های متحرک JPEG XL* بود.

مقایسه عملکرد کدک تصویر متحرک. AVIF از GIF و JPEG XL از نظر اندازه متوسط ​​و متوسط ​​​​فایل بهتر است.
* نسخه های libavif و libjxl: libavif نسخه 4cff6a3 (نسخه libaom v3.5.0)، libjxl نسخه 176b1c03. مجموعه تست: 15 نمونه GIF از ویکی پدیا .

کروم، فایرفاکس و سافاری همگی از پخش متحرک AVIF پشتیبانی می کنند.

FFmpeg یکی از ابزارهایی است که برای ایجاد فایل های متحرک AVIF استفاده می شود، در اینجا یک مثال اساسی از تبدیل GIF به AVIF با استفاده از FFmpeg آورده شده است:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF کیفیت خروجی مطلوب در مقیاس 0 تا 63 است. مقادیر کمتر به معنای کیفیت بهتر و حجم فایل بیشتر است. 0 از فشرده سازی بدون تلفات استفاده می کند. برای فایل های AVIF متحرک کوچک با مقدار 23 شروع کنید.

FFmpeg به طور پیش‌فرض از لیباوم برای رمزگذاری تصاویر 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 های تصویر، افزونه های وردپرس و ابزارهای رمزگذاری پشتیبانی می شود. در مجموع، AVIF یک انتخاب عالی برای ارائه تصاویر در وب است. AVIF برای رمزگذاری و رمزگشایی سریع است در حالی که بهترین کیفیت یا کوچکترین اندازه فایل را ارائه می دهد، هر کدام که برای وب سایت خود ترجیح می دهید. AVIF کارآمدترین راه برای ارائه انیمیشن در وب است. اگر سؤال، نظر یا درخواست ویژگی دارید، لطفاً با فهرست پستی av1-discuss ، انجمن AOM Github و ویکی AVIF تماس بگیرید.

تصویر قهرمان از Unsplash , توسط Amal S .