استفاده از AVIF برای فشرده سازی تصاویر در سایت شما

Jai Krishnan

Wan-Teh Chang

Jeremy Wagner

ما اغلب در مورد نفخ در وب سایت ها از تصاویر می نویسیم ، و ابزارهایی مانند Lighthouse زمانی که بارگذاری تصویر تأثیر منفی بر تجربه کاربر دارد، مانند افزایش زمان بارگذاری یا حذف پهنای باند از منابع مهم تر، برجسته می شود. یکی از راه‌های رفع این مشکل استفاده از فشرده‌سازی مدرن برای کاهش حجم فایل‌های تصاویر است و یک گزینه جدید برای توسعه‌دهندگان وب، فرمت تصویر AVIF است. این پست وبلاگ در مورد به روز رسانی های اخیر برای ابزار منبع باز برای AVIF صحبت می کند، کتابخانه های رمزگذاری لیباوم و لیبایف را معرفی می کند، و شامل آموزش استفاده از این کتابخانه ها برای رمزگذاری موثر تصاویر AVIF است.

AVIF یک فرمت تصویری است که بر اساس کدک ویدیویی AV1 است و توسط Alliance for Open Media استاندارد شده است. AVIF مزایای فشرده سازی قابل توجهی را نسبت به سایر فرمت های تصویر مانند JPEG و WebP ارائه می دهد. در حالی که صرفه جویی دقیق به محتوا، تنظیمات رمزگذاری و هدف کیفیت بستگی دارد، ما و دیگران بیش از 50 درصد صرفه جویی در مقایسه با JPEG داشته ایم.

علاوه بر این، AVIF پشتیبانی کدک و کانتینر را برای ویژگی‌های جدید تصویر مانند محدوده دینامیکی بالا و گستره رنگ گسترده ، سنتز دانه‌های فیلم و رمزگشایی پیشرونده اضافه می‌کند.

چه جدید است

از زمان دریافت پشتیبانی AVIF در کروم M85، پشتیبانی AVIF در اکوسیستم منبع باز در تعدادی از موارد بهبود یافته است.

لیباوم

Libaom یک رمزگذار و رمزگشای AV1 منبع باز است که توسط شرکت‌های Alliance for Open Media نگهداری می‌شود و در بسیاری از خدمات تولیدی در Google و سایر شرکت‌های عضو استفاده می‌شود. بین انتشار لیباوم 2.0.0 - تقریباً همزمان با اضافه شدن پشتیبانی AVIF توسط کروم - و نسخه 3.1.0 اخیر، بهینه سازی های قابل توجهی برای رمزگذاری تصاویر ثابت به پایگاه کد اضافه شده است. این موارد عبارتند از:

• بهینه سازی برای رمزگذاری چند رشته ای و کاشی.
• کاهش 5 برابری در استفاده از حافظه
• کاهش 6.5 برابری در استفاده از CPU، همانطور که در نمودار زیر نشان داده شده است.

این تغییرات هزینه رمزگذاری AVIF را به شدت کاهش می دهد - به ویژه تصاویری که اغلب بارگذاری می شوند یا دارای اولویت بالایی هستند در سایت شما. همانطور که رمزگذاری سخت افزاری AV1 در سرورها و سرویس های ابری در دسترس تر می شود، هزینه ایجاد تصاویر AVIF همچنان کاهش می یابد.

لیباویف

Libavif ، پیاده سازی مرجع AVIF، یک muxer و تجزیه کننده AVIF منبع باز است که در کروم برای رمزگشایی تصاویر AVIF استفاده می شود. همچنین می‌تواند با libaom برای ایجاد تصاویر AVIF از تصاویر فشرده‌نشده موجود، یا رمزگذاری از تصاویر وب موجود (JPEG، PNG و غیره) استفاده شود.

Libavif اخیراً پشتیبانی از طیف گسترده‌تری از تنظیمات رمزگذار، از جمله ادغام با تنظیمات پیشرفته‌تر رمزگذار لیباوم را اضافه کرده است. بهینه سازی در خط لوله پردازش مانند تبدیل سریع YUV به RGB با استفاده از libyuv و پشتیبانی آلفای از پیش ضرب شده، روند رمزگشایی را سرعت بیشتری می بخشد. و در نهایت، پشتیبانی از حالت رمزگذاری تمام درونی که به تازگی در libaom 3.1.0 اضافه شده است، تمام پیشرفت های libaom ذکر شده در بالا را به ارمغان می آورد.

رمزگذاری تصاویر AVIF با آویفنک

یک راه سریع برای آزمایش AVIF Squoosh.app است. Squoosh یک نسخه WebAssembly از libavif را اجرا می کند و بسیاری از ویژگی های مشابه ابزارهای خط فرمان را در معرض نمایش قرار می دهد. این یک راه آسان برای مقایسه AVIF با سایر فرمت های قدیمی و جدید است. همچنین یک نسخه CLI از Squoosh برای برنامه‌های Node وجود دارد.

با این حال، WebAssembly هنوز به تمام عملکردهای اولیه CPU ها دسترسی ندارد، بنابراین اگر می خواهید libavif را در سریع ترین حالت خود اجرا کنید، رمزگذار خط فرمان، avivenc را توصیه می کنیم.

برای درک نحوه رمزگذاری تصاویر AVIF، ما آموزشی را با استفاده از همان تصویر منبع استفاده شده در مثال بالا ارائه خواهیم داد. برای شروع، شما نیاز دارید:

• کروم نسخه 85 یا بالاتر
• cmake
• git
• نینجا

همچنین باید بسته های توسعه را برای zlib، libpng و libjpeg نصب کنید. دستورات توزیع‌های لینوکس دبیان و اوبونتو عبارتند از:

sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev

ساخت رمزگذار خط فرمان avivenc

1. کد را دریافت کنید

برچسب انتشار libavif را بررسی کنید.

git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git

2. دایرکتوری را به libavif تغییر دهید

cd libavif

راه های مختلفی وجود دارد که می توانید آویفنک و لیبایف را برای ساخت پیکربندی کنید. اطلاعات بیشتر را می توانید در libavif بیابید. ما قصد داریم avivenc را بسازیم تا به صورت ایستا به کتابخانه رمزگذار و رمزگشا AV1، libaom مرتبط شود.

3. لیباوم را بگیرید و بسازید

به دایرکتوری وابستگی های خارجی libavif تغییر دهید.

cd ext

دستور بعدی کد منبع libaom را می کشد و لیباوم را به صورت ایستا می سازد.

./aom.cmd

دایرکتوری را به libavif تغییر دهید.

cd ..

4. ابزار رمزگذاری خط فرمان، avivenc را بسازید

ایجاد یک فهرست ساخت برای avivenc ایده خوبی است.

mkdir build

به دایرکتوری ساخت تغییر دهید.

cd build

فایل های بیلد را برای avivenc ایجاد کنید.

cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..

آویفنک بسازید.

make

شما با موفقیت اویفنک را ساختید!

آشنایی با پارامترهای خط فرمان avivenc

avivenc از ساختار خط فرمان استفاده می کند:

./avifenc [options] input.file output.avif

پارامترهای اساسی برای آویفنک مورد استفاده در این آموزش عبارتند از:

گزینه cq-level سطح کوانتیز (0-63) را برای کنترل کیفیت رنگ یا آلفا تنظیم می کند.

یک تصویر AVIF با تنظیمات پیش فرض ایجاد کنید

ابتدایی ترین پارامتر برای اجرای avivenc، تنظیم فایل های ورودی و خروجی است.

./avifenc happy_dog.jpg happy_dog.avif

ما خط فرمان زیر را برای رمزگذاری یک تصویر، مثلاً در سطح کوانتیز 18، توصیه می کنیم:

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif

Avifnc گزینه های زیادی دارد که هم کیفیت و هم سرعت را تحت تأثیر قرار می دهد. اگر می‌خواهید گزینه‌ها را ببینید و در مورد آنها بیشتر بدانید، کافیست ./avifenc را اجرا کنید

شما اکنون تصویر AVIF خود را دارید!

افزایش سرعت رمزگذار

یکی از پارامترهایی که ممکن است بسته به تعداد هسته های دستگاه خود تغییر کند، پارامتر --jobs است. این پارامتر تعیین می کند که آویفنک از چند رشته برای ایجاد تصاویر AVIF استفاده کند. سعی کنید این را در خط فرمان اجرا کنید.

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif

این به avivenc می‌گوید هنگام ایجاد تصویر AVIF از 8 رشته استفاده کند که سرعت رمزگذاری AVIF را تقریباً 5 برابر می‌کند.

اثرات روی بزرگترین رنگ محتوایی (LCP)

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

استفاده از CDN تصویر هنگام بهینه‌سازی تصاویر به شدت توصیه می‌شود، زیرا به تلاش بسیار کمتری نسبت به راه‌اندازی خطوط لوله بهینه‌سازی تصویر در فرآیند ساخت وب‌سایت یا استفاده دستی از باینری‌های رمزگذار برای بهینه‌سازی تصاویر با دست نیاز دارد. با این حال، CDN های تصویر ممکن است برای برخی پروژه ها مقرون به صرفه باشند. اگر این مورد برای شما صادق است، هنگام بهینه سازی با رمزگذار avivenc موارد زیر را در نظر بگیرید:

• با گزینه هایی که رمزگذار ارائه می دهد آشنا شوید. با آزمایش برخی از ویژگی‌های رمزگذاری موجود AVIF، می‌توانید صرفه‌جویی بیشتری پیدا کنید و در عین حال کیفیت تصویر کافی را حفظ کنید.
• AVIF رمزگذاری با اتلاف و بدون اتلاف را فراهم می کند. بسته به محتوای یک تصویر، یک نوع رمزگذاری ممکن است بهتر از دیگری عمل کند. برای مثال، عکس‌هایی که معمولاً به‌عنوان JPEG ارائه می‌شوند، احتمالاً بهترین عملکرد را با رمزگذاری با اتلاف دارند، در حالی که رمزگذاری بدون تلفات احتمالاً برای تصاویر حاوی جزئیات ساده یا هنر خطی که معمولاً به عنوان PNG ارائه می‌شوند، بهترین است.
• اگر از یک بسته‌کننده با پشتیبانی انجمن برای imagemin استفاده می‌کنید، از بسته imagemin-avif استفاده کنید تا باندلر خود را قادر به خروجی انواع تصویر AVIF کنید.

با آزمایش AVIF، ممکن است بتوانید در مواردی که نامزد LCP یک تصویر است، بهبودی در زمان LCP وب سایت خود داشته باشید. برای اطلاعات بیشتر در مورد بهینه سازی LCP، راهنمای بهینه سازی LCP را بخوانید.

نتیجه گیری

با استفاده از libaom، libavif و سایر ابزارهای منبع باز، می توانید بهترین کیفیت تصویر و عملکرد را برای وب سایت خود با استفاده از AVIF دریافت کنید. این قالب هنوز نسبتاً جدید است و بهینه‌سازی‌ها و ادغام‌های ابزار به طور فعال در حال توسعه هستند. اگر سؤال، نظر یا درخواست ویژگی دارید، با فهرست پستی av1-discuss ، انجمن AOM GitHub و ویکی AVIF تماس بگیرید.