استفاده از فرمت های مدرن تصاویر: AVIF و WebP

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

تصاویر محبوب‌ترین نوع منابع (Resource Type) در وب هستند و اغلب بیشترین حجم را نیز به خود اختصاص می‌دهند. کاربران از تصاویر باکیفیت استقبال می‌کنند، اما باید دقت کرد که تصاویر شاخص (Hero Images)، عکس‌های محصولات و حتی تصاویر طنز گربه‌ها، تا حد امکان با بیشترین سرعت و بهینه‌ترین شکل ممکن بارگذاری شوند.

اگر در حال بهینه‌سازی وب‌سایت خود برای معیارهای Web Vitals هستید، جالب است بدانید که تصاویر در حدود ۴۲ درصد از عناصر Largest Contentful Paint (LCP) وب‌سایت‌ها را تشکیل می‌دهند. معیارهای کلیدی عملکرد از دید کاربر (User-Centric Metrics) اغلب به حجم، تعداد، چیدمان و اولویت بارگذاری تصاویر در صفحه وابسته هستند. به همین دلیل، بخش قابل‌توجهی از توصیه‌های ما درباره بهبود عملکرد وب‌سایت به بهینه‌سازی تصاویر اختصاص دارد.

در ادامه، خلاصه‌ای از توصیه‌های اصلی را مشاهده می‌کنید.

چرا به فرمت‌های مدرن تصاویر نیاز داریم؟

هنگام نمایش تصاویر در وب، فرمت‌های مختلفی برای انتخاب در اختیار داریم. تفاوت اصلی میان این فرمت‌ها در Image Codec مورد استفاده برای Encode و Decode تصاویر است.

Image Codec الگوریتمی است که برای فشرده‌سازی و رمزگذاری تصاویر در یک نوع فایل مشخص و همچنین رمزگشایی آن‌ها برای نمایش روی صفحه‌نمایش استفاده می‌شود.

ارزیابی Codecها

برای انتخاب فرمت تصویر مناسب، می‌توانید معیارهای مختلفی را بررسی کنید.

- فشرده‌سازی (Compression)

کارایی یک Codec را می‌توان عمدتاً بر اساس میزان فشرده‌سازی آن ارزیابی کرد. میزان فشرده‌سازی اهمیت زیادی دارد، زیرا هرچه فشرده‌سازی بیشتر باشد، حجم فایل کاهش پیدا می‌کند و داده کمتری برای انتقال تصویر از طریق شبکه موردنیاز خواهد بود.

کاهش حجم فایل مستقیماً بر معیار Largest Contentful Paint (LCP) صفحه تأثیر می‌گذارد، زیرا منابع تصویری موردنیاز صفحه با سرعت بیشتری بارگذاری می‌شوند.

- کیفیت (Quality)

در حالت ایده‌آل، فشرده‌سازی نباید باعث از بین رفتن هیچ‌یک از داده‌های تصویر شود، به این نوع فشرده‌سازی، بدون اتلاف (Lossless) گفته می‌شود.

فرمت‌هایی که در فرایند فشرده‌سازی بخشی از داده‌های تصویر را از بین می‌برند و در نتیجه کیفیت تصویر را کاهش می‌دهند، با عنوان فشرده‌سازی با اتلاف (Lossy) شناخته می‌شوند.

برای اندازه‌گیری میزان شباهت ساختاری (Structural Similarity) میان تصاویر و بررسی قابل‌قبول بودن افت کیفیت، می‌توانید از ابزارهایی مانند DSSIM یا ssimulacra استفاده کنید.

- سرعت Encode و Decode

الگوریتم‌های پیچیده فشرده‌سازی ممکن است برای Encode و Decode تصاویر به قدرت پردازشی بیشتری نیاز داشته باشند. این موضوع به زمان انجام عملیات Encode نیز بستگی دارد، اینکه این کار از قبل انجام شود (Static/Build) یا هنگام درخواست کاربر (On-Demand).

در تصاویر استاتیک، عملیات Encode ممکن است تنها یک‌بار انجام شود، اما مرورگر همچنان باید پیش از نمایش تصویر، آن را Decode کند. فرآیند پیچیده Decode می‌تواند سرعت رندر تصاویر را کاهش دهد.

میزان فشرده‌سازی، کیفیت تصویر و سرعت Decode از مهم‌ترین عواملی هستند که هنگام مقایسه عملکرد فرمت‌های تصویری در وب باید در نظر گرفته شوند.

برخی کاربردها ممکن است به فرمت‌هایی با قابلیت‌های دیگری نیز نیاز داشته باشند، از جمله:

• پشتیبانی نرم‌افزاری (Software Support): ممکن است یک فرمت تصویر عملکرد بسیار خوبی داشته باشد، اما اگر مرورگرها، CDNها و سایر ابزارهای پردازش تصویر از آن پشتیبانی نکنند، عملاً قابل‌استفاده نخواهد بود.
• پشتیبانی از انیمیشن (Animation): برخی تصاویر در وب به قابلیت انیمیشن نیاز دارند، مانند GIF. البته بهتر است در حالت ایده‌آل، چنین تصاویری را با ویدئو جایگزین کنید.
• شفافیت آلفا (Alpha Transparency): امکان ایجاد تصاویر با سطوح مختلف شفافیت از طریق کانال آلفا، مانند تصاویر PNG با پس‌زمینه شفاف.
• پشتیبانی از تصویربرداری با دامنه دینامیکی بالا (HDR) و طیف رنگی گسترده (Wide Color Gamut).
• رمزگشایی تدریجی (Progressive Decoding): امکان بارگذاری تدریجی تصاویر که به کاربران اجازه می‌دهد پیش از تکمیل بارگذاری، پیش‌نمایشی قابل‌قبول از تصویر مشاهده کنند.
• نقشه عمق (Depth Maps): قابلیتی که امکان اعمال جلوه‌های بصری روی پیش‌زمینه یا پس‌زمینه تصویر را فراهم می‌کند.
• تصاویر چندلایه: امکان استفاده از چندین لایه روی یکدیگر، برای مثال، قرار دادن متن، حاشیه و سایر عناصر روی تصویر.

فرمت‌های قدیمی و شناخته‌شده: JPEG و PNG

JPEG برای ۲۵ سال یکی از پراستفاده‌ترین فرمت‌های تصاویر بوده است. Encoderهای کلاسیک JPEG معمولاً فشرده‌سازی نسبتاً ضعیفی ارائه می‌دهند، درحالی‌که روش‌های مدرن‌تر Encode کردن JPEG، مانند MozJPEG، این میزان فشرده‌سازی را بهبود می‌دهند، هرچند همچنان به‌اندازه فرمت‌های مدرن بهینه نیستند.

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

JPEG برای تصاویر عکاسی بهترین عملکرد را دارد، درحالی‌که PNG را می‌توان معادل آن برای سایر تصاویر ثابت در نظر گرفت.

PNG فرمتی بدون اتلاف (Lossless) است و از شفافیت آلفا پشتیبانی می‌کند، اما میزان فشرده‌سازی آن، به‌خصوص برای تصاویر عکاسی، نسبتاً پایین است. هر دو فرمت JPEG و PNG بسته به نوع تصویر موردنیاز، به‌طور گسترده استفاده می‌شوند.

بنابراین، هدف فرمت‌های مدرن تصاویر این است که با ارائه فشرده‌سازی بهتر و انعطاف‌پذیری بیشتر برای پشتیبانی از قابلیت‌های مطرح‌شده، محدودیت‌های JPEG و PNG را برطرف کنند.

با این مقدمه، بیایید بررسی کنیم که فرمت‌های AVIF و WebP چه امکاناتی ارائه می‌دهند.

AVIF

فرمت AV1 Image File Format یا به‌اختصار AVIF، یک فرمت تصویر متن‌باز (Open Source) برای ذخیره تصاویر ثابت و متحرک است. این فرمت در فوریه ۲۰۱۹ توسط Alliance for Open Media (AOMedia) منتشر شد.

AVIF نسخه تصویری فرمت ویدئویی محبوب AV1 است. هدف از توسعه آن، ایجاد یک فرمت کدگذاری ویدئو به‌صورت متن‌باز بود که هم از فناوری‌های پیشرفته روز استفاده کند و هم بدون نیاز به پرداخت حق امتیاز (Royalty-Free) در دسترس باشد.

مزایای AVIF

AVIF از فشرده‌سازی بسیار کارآمد با اتلاف و بدون اتلاف پشتیبانی می‌کند و حتی پس از فشرده‌سازی نیز می‌تواند تصاویر باکیفیتی تولید کند.

AVIF در مقایسه با بیشتر فرمت‌های محبوب مورد استفاده در وب، مانند JPEG، WebP و JPEG 2000، عملکرد فشرده‌سازی بهتری دارد.

حجم تصاویر AVIF می‌تواند تا ۱۰ برابر کمتر از تصاویر JPEG با کیفیت بصری مشابه باشد. برخی آزمایش‌ها نیز نشان داده‌اند که AVIF در مقایسه با JPEG و با حفظ کیفیت ادراکی مشابه، می‌تواند حجم فایل را تا ۵۰ درصد کاهش دهد.

البته توجه داشته باشید که در برخی موارد، فشرده‌سازی بدون اتلاف WebP ممکن است عملکرد بهتری نسبت به AVIF داشته باشد. بنابراین، بهتر است عملکرد این دو فرمت را به‌صورت دستی نیز ارزیابی کنید.

در تصویر زیر می‌توانید مقایسه حجم یک تصویر JPEG را با نسخه متناظر آن در فرمت AVIF (با فشرده‌سازی با اتلاف) مشاهده کنید. این تصویر با استفاده از ابزار Squoosh تبدیل شده است.

علاوه بر فشرده‌سازی بهتر، AVIF قابلیت‌های دیگری نیز ارائه می‌دهد:

• AVIF از انیمیشن، Live Photos و موارد مشابه از طریق تصاویر چندلایه ذخیره‌شده در قالب Image Sequences پشتیبانی می‌کند.
• پشتیبانی بهتری از عناصر گرافیکی، لوگوها و اینفوگرافیک‌ها دارد، حوزه‌هایی که JPEG در آن‌ها با محدودیت‌هایی مواجه است.
• فشرده‌سازی بدون اتلاف بهتری نسبت به JPEG ارائه می‌دهد.
• از عمق رنگ ۱۲ بیتی پشتیبانی می‌کند و امکان تولید تصاویر با دامنه دینامیکی بالا (HDR) و طیف رنگی گسترده (WCG) را فراهم می‌سازد. این قابلیت باعث نمایش بهتر طیف روشنایی و تاریکی و دامنه گسترده‌تری از درخشندگی می‌شود.
• از تصاویر تک‌رنگ (Monochrome) و تصاویر چندکاناله (Multichannel) پشتیبانی می‌کند، از جمله تصاویر شفاف که از کانال آلفا استفاده می‌کنند.

مقایسه فرمت‌های تصویری

برای درک بهتر تفاوت کیفیت و میزان فشرده‌سازی فرمت‌های مختلف، می‌توانیم تصاویر را به‌صورت بصری با یکدیگر مقایسه کنیم.

ارزیابی کیفیت و فشرده‌سازی

برای شروع، کیفیت JPEG، WebP و AVIF را با استفاده از تنظیمات پیش‌فرض خروجی باکیفیت در ابزار Squoosh بررسی می‌کنیم. در این آزمایش، عمداً هیچ تنظیمات خاصی را تغییر نمی‌دهیم تا تجربه یک کاربر تازه‌کار را شبیه‌سازی کنیم.

به یاد داشته باشید که باید تنظیمات کیفیت و فرمتی را انتخاب کنید که بیشترین تناسب را با نیازهای شما داشته باشد. اگر زمان کافی برای این کار ندارید، برخی Image CDNها می‌توانند بخشی از این فرایند را به‌صورت خودکار انجام دهند.

در آزمایش اول، یک تصویر ۵۶۰ کیلوبایتی از غروب آفتاب که بافت‌های متنوعی دارد، با هر سه فرمت تبدیل می‌شود. خروجی‌ها از نظر بصری و کیفیت ادراکی شباهت زیادی به تصویر اصلی دارند:

• JPEG با کیفیت ۷۵: حجم ۲۸۹ کیلوبایت
• WebP با کیفیت ۷۵: حجم ۲۰۶ کیلوبایت
• AVIF با کیفیت ۳۰: حجم ۱۰۱ کیلوبایت

این نتایج نشان‌دهنده کاهش حجم تا ۸۱ درصد هستند.

نتیجه جالبی است، اما بیایید کمی دقیق‌تر بررسی کنیم.

مشاهده نتیجه

ابزارهای مختلفی برای مقایسه میزان تفاوت میان فرمت‌های تصویری وجود دارند، از جمله DSSIM و Simulacra.

با استفاده از این ابزارها می‌توانید هنگام مقایسه فرمت‌هایی مانند JPEG با WebP یا WebP با AVIF، تنظیمات کیفیت تقریباً معادل را پیدا کنید.

در آزمایش بعدی، تصاویر با کیفیت‌های قابل‌مقایسه و با هدف دستیابی به کیفیت ۷۰ درصد JPEG کدگذاری شده‌اند.

نتیجه به این صورت است:

• JPEG: حجم ۳۲۳ کیلوبایت
• WebP با کیفیت ۷۵: حجم ۲۱۴ کیلوبایت
• AVIF با کیفیت ۶۰: حجم ۱۱۷ کیلوبایت

حجم فایل‌ها در این آزمایش کمی بیشتر از نتایج حاصل از تنظیمات پیش‌فرض است، اما همچنان تفاوت در میزان فشرده‌سازی قابل‌توجه است.

مشاهده نتیجه

همچنین می‌توانیم تصاویر را در کیفیت‌های پایین‌تر نیز بررسی کنیم، جایی که WebP و AVIF عملکرد درخشانی دارند.

برای مثال:

• JPEG با کیفیت ۱۰: حجم ۳۵ کیلوبایت
• WebP با کیفیت ۱: حجم ۳۵ کیلوبایت
• AVIF با کیفیت ۱۷: حجم ۳۶ کیلوبایت

در این مقایسه، WebP در مقایسه با JPEG آرتیفکت‌های بلوکی بسیار کمتری دارد. AVIF نیز علاوه بر کاهش این آرتیفکت‌ها، جزئیات مهم تصویر را واضح‌تر نمایش می‌دهد.

مشاهده نتیجه

برای مشاهده نمونه‌ای واضح‌تر از تفاوت JPEG و AVIF، می‌توانیم یکی از تصاویر مجموعه داده Kodak را بررسی کنیم که توسط Netflix ارزیابی شده است.

در این مقایسه، یک تصویر JPEG با نمونه‌برداری رنگی 4:4:4 و حجم ۲۰ کیلوبایت با یک تصویر AVIF با همان نمونه‌برداری رنگی و حجم ۱۹٫۸ کیلوبایت مقایسه شده است.

همان‌طور که مشاهده می‌کنید، تصویر JPEG در قسمت آسمان و سقف دارای آرتیفکت‌های بلوکی قابل‌مشاهده است، درحالی‌که تصویر AVIF کیفیت بصری بهتری دارد و این آرتیفکت‌ها در آن کمتر دیده می‌شوند.

البته در تصویر AVIF مقداری از بافت سقف از بین رفته و کمی تاری نیز مشاهده می‌شود. بااین‌حال، با توجه به ضریب فشرده‌سازی کلی ۵۹ برابری، نتیجه همچنان چشمگیر است.

مشاهده نتیجه

در مرحله بعد، کیفیت یک تصویر ساحلی را بررسی می‌کنیم. این تصویر دارای جزئیات ظریف، بافت‌های متنوع و بخش‌هایی با کنتراست پایین در میان ابرهاست.

در این آزمایش، تصویر اصلی با حجم ۴۸۲ کیلوبایت را با خروجی سه فرمت JPEG، WebP و AVIF مقایسه می‌کنیم. برای هر خروجی، محدودیت حجم ۴۵ کیلوبایت در نظر گرفته شده و از تنظیمات پیشرفته استفاده نشده است.

نتایج تنظیمات کیفیت در Squoosh به این صورت است:

• JPEG (MozJPEG): کیفیت ۵۰ درصد
• WebP: کیفیت ۵۴ درصد
• AVIF: کیفیت ۳۶ درصد

مشاهده نتیجه

تصویر JPEG دارای آرتیفکت‌های بلوکی و نوارهای رنگی قابل‌مشاهده (Color Banding) در قسمت ابرها و آب است، درحالی‌که این مشکلات در WebP و AVIF به‌مراتب کمتر دیده می‌شوند.

از نظر من، AVIF در مجموع روان‌ترین و یکدست‌ترین تصویر را در میان این سه فرمت ارائه می‌دهد.

مشاهده نتیجه

با توجه به اهمیت بافت تصاویر، می‌توانیم آزمایش مشابهی را با یک پوستر از سریال «The Witcher» محصول Netflix و با هدف رسیدن به حجم ۳۶ کیلوبایت انجام دهیم.

در این مقایسه، تصویر JPEG در قسمت ابرها آرتیفکت‌های بلوکی دارد. تصویر WebP نیز در اطراف نوشته قرمز کمی تار به نظر می‌رسد، زیرا این فرمت بدون استفاده از روش‌های جایگزین، تنها از Chroma Subsampling با روش 4:2:0 پشتیبانی می‌کند.

در این آزمایش، AVIF بهترین کیفیت را ارائه می‌دهد و پس از آن WebP قرار می‌گیرد.

مشاهده نتیجه

در نهایت، بیایید تصویری را بررسی کنیم که نسبت به نمونه‌های قبلی عناصر متنی بیشتری دارد، یعنی یک پوستر.

وقتی کیفیت تصاویر را کاهش می‌دهیم و حجم نسبتاً کمی مانند ۲۵ کیلوبایت را هدف قرار می‌دهیم، تفاوت‌ها واضح‌تر می‌شوند:

• JPEG دارای نوارهای رنگی شدید و هاله‌هایی در اطراف متن است. همچنین آرتیفکت‌های بلوکی مشخصی در لبه‌ها دیده می‌شوند.
• WebP بخش زیادی از این آرتیفکت‌های بلوکی را برطرف می‌کند و کیفیت تصویر را تا حدودی بهبود می‌دهد.
• AVIF لبه‌های تیز را بهتر از JPEG و WebP حفظ می‌کند و در نهایت تصویری یکدست‌تر و روان‌تر تولید می‌کند.

مشاهده نتیجه

مقایسه‌های بیشتری درباره کیفیت و عملکرد فرمت‌های مختلف برای تصاویر عکاسی و تصاویر گرافیکی نیز در دسترس هستند.

ابزارها و پشتیبانی از AVIF

از زمان انتشار AVIF در سال ۲۰۱۹، میزان پشتیبانی از این فرمت به‌طور قابل‌توجهی افزایش یافته است.

در گذشته روش مستقیمی برای ایجاد یا مشاهده فایل‌های AVIF وجود نداشت، اما امروزه با استفاده از ابزارهای متن‌باز موجود، به‌راحتی می‌توانید این فایل‌ها را ایجاد و مشاهده کنید.

تصاویر AVIF در مرورگرها

فرمت AVIF در آگوست ۲۰۲۰ و با انتشار Chrome 85 به نسخه دسکتاپ مرورگر Chrome اضافه شد.

این فرمت همچنین در نسخه اندروید Chrome، مرورگر Opera، نسخه دسکتاپ Firefox و Opera برای اندروید پشتیبانی می‌شود.

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

<img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

برای اطمینان از اینکه حداقل یک فرمت تصویری پشتیبانی‌شده به تمام مرورگرها ارائه می‌شود، می‌توانید AVIF را با استفاده از روش Progressive Enhancement پیاده‌سازی کنید.

برای این کار دو روش وجود دارد.

Progressive Enhancement

استفاده از عنصر <picture>

از آنجا که عنصر <picture> به مرورگر اجازه می‌دهد تصاویری را که نمی‌شناسد نادیده بگیرد، می‌توانید چند تصویر را بر اساس ترتیب اولویت در آن قرار دهید.

مرورگر اولین فرمتی را انتخاب می‌کند که از آن پشتیبانی می‌کند.

<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <source srcset="img/photo.webp" type="image/webp">
  <img src="img/photo.jpg" alt="Description" width="360" height="240">
</picture>

در این مثال، ابتدا AVIF در اولویت قرار دارد. اگر مرورگر از آن پشتیبانی نکند، سراغ WebP می‌رود و در نهایت، در صورت پشتیبانی نکردن از دو فرمت قبلی، تصویر JPEG نمایش داده می‌شود.

استفاده از Content Negotiation

Content Negotiation به سرور اجازه می‌دهد بر اساس قابلیت‌های مرورگر، فرمت‌های مختلفی از یک منبع را ارائه دهد.

مرورگرهایی که از یک فرمت مشخص پشتیبانی می‌کنند، می‌توانند با اضافه کردن آن فرمت به هدر درخواست Accept، این موضوع را به سرور اعلام کنند.

برای مثال، هدر Accept مربوط به تصاویر در مرورگر Chrome به شکل زیر است:

Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

کدی که برای بررسی پشتیبانی از AVIF در Event Handler مربوط به Fetch استفاده می‌شود، می‌تواند چیزی شبیه به نمونه زیر باشد:

const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);

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

ایجاد Markup موردنیاز برای پیاده‌سازی Progressive Enhancement ممکن است کمی دشوار باشد.

Image CDNها این امکان را فراهم می‌کنند که مناسب‌ترین فرمت تصویر به‌صورت خودکار و متناسب با مرورگر کاربر ارائه شود.

بااین‌حال، اگر از Image CDN استفاده نمی‌کنید، می‌توانید ابزارهایی مانند just-gimme-an-img را بررسی کنید.

این ابزار می‌تواند برای یک تصویر مشخص، Markup مربوط به عنصر <picture> را با فرمت‌ها و عرض‌های مختلف تولید کند. همچنین تصاویر متناظر با Markup را با استفاده از Squoosh و به‌صورت کاملاً سمت کاربر (Client-Side) ایجاد می‌کند.

توجه داشته باشید که Encode کردن تصاویر در چندین فرمت با استفاده از این ابزار ممکن است کمی زمان‌بر باشد، بنابراین شاید بهتر باشد تا آماده شدن خروجی، یک فنجان قهوه بنوشید!

Encode و Decode کردن فایل‌های AVIF

چندین پروژه متن‌باز روش‌های مختلفی برای Encode و Decode فایل‌های AVIF ارائه می‌دهند.

کتابخانه‌ها (Libraries)

• Libaom: یک Encoder و Decoder متن‌باز است که توسط AOMedia، توسعه‌دهندگان AVIF، نگهداری می‌شود. این کتابخانه به‌طور مداوم با بهینه‌سازی‌های جدید به‌روزرسانی می‌شود تا هزینه Encode کردن AVIF، به‌خصوص برای تصاویری که به‌دفعات یا با اولویت بالا بارگذاری می‌شوند، کاهش پیدا کند.
• Libavif: یک Muxer و Parser متن‌باز برای AVIF است که در Chrome برای Decode کردن تصاویر AVIF استفاده می‌شود. می‌توانید Libavif را همراه با Libaom به کار ببرید تا از تصاویر اصلی و فشرده‌نشده، فایل AVIF ایجاد کنید یا تصاویر را از فرمت‌های دیگر به AVIF تبدیل کنید.
• Libheif: یکی دیگر از کتابخانه‌های محبوب برای Encode و Decode فرمت‌های AVIF و HEIF است.
• Cavif: ابزار دیگری برای کار با AVIF است.

به لطف تلاش‌های Ben Morss، کتابخانه libgd نیز از AVIF پشتیبانی می‌کند و این قابلیت قرار بود در نوامبر به PHP نیز اضافه شود.

اپلیکیشن‌های وب و دسکتاپ (Web Apps and Desktop Apps)

ابزار Squoosh که یک اپلیکیشن تحت وب برای استفاده از فشرده‌سازهای مختلف تصاویر است، از AVIF نیز پشتیبانی می‌کند. بنابراین، تبدیل تصاویر به فایل‌های .avif به‌صورت آنلاین نسبتاً ساده است.

در محیط دسکتاپ نیز نرم‌افزار GIMP از خروجی AVIF پشتیبانی می‌کند. ImageMagick و Paint.NET نیز از این فرمت پشتیبانی می‌کنند. همچنین افزونه‌هایی برای پشتیبانی از AVIF در Photoshop در دسترس هستند.

کتابخانه‌های JavaScript

• AVIF.js: یک Polyfill برای مرورگرهایی است که هنوز از AVIF پشتیبانی نمی‌کنند. این ابزار با استفاده از Service Worker API، رویداد Fetch را رهگیری کرده و فایل‌های AVIF را Decode می‌کند.
• Sharp: یک ماژول Node.js است که می‌تواند تصاویر بزرگ با فرمت‌های استاندارد را به تصاویر کوچک‌تر و مناسب وب، از جمله AVIF، تبدیل کند.

ابزارهای کاربردی (Utilities)

ابزارهای تبدیل و پردازش تصاویر نیز از فرمت AVIF پشتیبانی می‌کنند. برای ایجاد و Decode کردن فایل‌های AVIF می‌توانید از MP4Box استفاده کنید.

در کدنویسی (In Code)

پروژه go-avif یک Encoder برای AVIF در زبان Go با استفاده از Libaom پیاده‌سازی کرده است.

این پروژه همراه با ابزاری به نام avif ارائه می‌شود که می‌تواند فایل‌های JPEG یا PNG را به AVIF تبدیل کند.

اگر به یادگیری نحوه ایجاد تصاویر AVIF با استفاده از Squoosh یا ساخت Encoder خط فرمان avifenc علاقه‌مند هستید، می‌توانید به Codelab مربوط به نحوه ارائه فایل‌های AVIF مراجعه کنید.

AVIF و عملکرد وب‌سایت (Performance)

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

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

در حال حاضر، بررسی Best Practices در ابزار Lighthouse نیز فشرده‌سازی تصاویر با AVIF را عاملی مؤثر در بهبود عملکرد وب‌سایت در نظر می‌گیرد.

Lighthouse تمام تصاویر BMP، JPEG و PNG موجود در صفحه را جمع‌آوری می‌کند، آن‌ها را به WebP تبدیل کرده و حجم احتمالی نسخه AVIF را تخمین می‌زند.

این تخمین به Lighthouse کمک می‌کند تا میزان صرفه‌جویی احتمالی را در بخش Serve images in next-gen formats گزارش کند.

Tim Vereecke گزارش داده است که پس از تبدیل ۱۴ میلیون تصویر وب‌سایت به AVIF، با استفاده از روش Real User Monitoring (RUM)، میزان کاهش حجم داده‌ها به ۲۵ درصد رسیده و تأثیر مثبتی بر معیار LCP مشاهده شده است، این نتایج در مقایسه با JPEG به دست آمده‌اند.

محدودیت‌ها و نکات مهم AVIF (Gotchas)

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

استفاده از AVIF در قالب Progressive Enhancement به رفع این مشکل کمک می‌کند.

بااین‌حال، AVIF در چند زمینه دیگر نیز هنوز با استانداردهای ایده‌آل یک فرمت مدرن فاصله دارد.

• نسخه‌های جدید Chrome (نسخه ۹۴ به بعد) از Progressive Rendering برای AVIF پشتیبانی می‌کنند، اما نسخه‌های قدیمی‌تر این قابلیت را ندارند. در زمان نگارش مقاله، هنوز Encoder مناسبی برای تولید آسان چنین تصاویری وجود نداشت، البته امید می‌رود این وضعیت در آینده تغییر کند.
• Encode و ایجاد تصاویر AVIF زمان بیشتری نیاز دارد. این موضوع برای وب‌سایت‌هایی که تصاویر را به‌صورت پویا و در لحظه ایجاد می‌کنند، می‌تواند مشکل‌ساز باشد. بااین‌حال، تیم توسعه AVIF در حال بهبود سرعت Encode است.

مشارکت‌کنندگان AVIF در Google نیز از پیشرفت‌های قابل‌توجهی در عملکرد این فرمت خبر داده‌اند.

از اول ژانویه ۲۰۲۱، زمان Transcode کردن AVIF حدود ۴۷ درصد بهبود پیدا کرده است (در Speed 6 که سرعت پیش‌فرض فعلی Libavif است). این بهبود در مجموع سال به ۷۳ درصد رسیده است.

همچنین از ماه جولای، زمان Transcode در Speed 9، که برای On-the-Fly Encoding استفاده می‌شود، حدود ۷۲ درصد بهبود یافته است.

• Decode کردن تصاویر AVIF برای نمایش نیز ممکن است در مقایسه با سایر Codecها به قدرت پردازشی CPU بیشتری نیاز داشته باشد، هرچند کاهش حجم فایل‌ها می‌تواند این موضوع را جبران کند.
• برخی CDNها هنوز AVIF را به‌صورت پیش‌فرض در حالت انتخاب خودکار فرمت پشتیبانی نمی‌کنند، زیرا تولید این فرمت در اولین درخواست ممکن است همچنان کندتر باشد.

WebP

تا اینجا چندین بار به WebP اشاره کردیم، اما بهتر است نگاهی کوتاه به تاریخچه آن داشته باشیم.

Google در سال ۲۰۱۱ فرمت WebP را با هدف افزایش سرعت وب توسعه داد.

این فرمت به دلیل توانایی فشرده‌سازی تصاویر و کاهش حجم آن‌ها در مقایسه با JPEG و PNG، به‌مرور مورد پذیرش قرار گرفت و به‌طور گسترده استفاده شد.

WebP از هر دو روش فشرده‌سازی با اتلاف (Lossy) و بدون اتلاف (Lossless) با کیفیت بصری قابل‌قبول پشتیبانی می‌کند. همچنین قابلیت شفافیت کانال آلفا و نمایش انیمیشن را در اختیار توسعه‌دهندگان قرار می‌دهد.

فشرده‌سازی با اتلاف در WebP بر اساس Codec ویدئویی VP8 طراحی شده و برای Encode کردن تصاویر از روش Predictive Encoding استفاده می‌کند.

در این روش، مقادیر پیکسل‌های بلوک‌های مجاور برای پیش‌بینی مقدار پیکسل‌های یک بلوک استفاده می‌شوند و تنها اختلاف میان این مقادیر Encode می‌شود.

تصاویر WebP بدون اتلاف نیز با اعمال چندین تکنیک تبدیل (Transformation) روی تصاویر تولید و فشرده‌سازی می‌شوند.

مزایای WebP

تصاویر WebP بدون اتلاف معمولاً ۲۶ درصد حجم کمتری نسبت به PNG دارند.

همچنین تصاویر WebP با فشرده‌سازی با اتلاف، در مقایسه با تصاویر JPEG با کیفیت مشابه، حدود ۲۵ تا ۳۴ درصد کوچک‌تر هستند.

پشتیبانی از انیمیشن نیز WebP را به جایگزین مناسبی برای تصاویر GIF تبدیل می‌کند.

در تصویر زیر، یک تصویر PNG با پس‌زمینه شفاف در سمت چپ و نسخه متناظر آن با فرمت WebP در سمت راست نمایش داده شده است. این تصویر با استفاده از Squoosh ایجاد شده و حجم آن ۲۶ درصد کاهش یافته است.

علاوه بر این، WebP مزایای دیگری نیز دارد:

شفافیت (Transparency)

WebP دارای یک کانال شفافیت ۸ بیتی بدون اتلاف است که تنها ۲۲ درصد بایت بیشتری نسبت به PNG مصرف می‌کند.

این فرمت همچنین از شفافیت RGB با فشرده‌سازی با اتلاف پشتیبانی می‌کند، قابلیتی که به‌طور اختصاصی در WebP ارائه شده است.

فراداده (Metadata)

فرمت WebP از فراداده تصاویر EXIF و فراداده اسناد دیجیتال Extensible Metadata Platform (XMP) پشتیبانی می‌کند.

همچنین ممکن است شامل پروفایل رنگی ICC باشد.

انیمیشن (Animation)

WebP از تصاویر متحرک با رنگ واقعی (True-Color Animated Images) پشتیبانی می‌کند.

نکته: در مورد تصاویر شفاف و شبیه به تصاویر برداری (Vector-Like)، مانند نمونه بالا، ممکن است نسخه بهینه‌شده SVG در نهایت تصویر واضح‌تر و کم‌حجم‌تری نسبت به فرمت‌های Raster ارائه دهد.

ابزارها و پشتیبانی از WebP

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

ارائه و مشاهده فایل‌های WebP

امروزه تقریباً تمام نسخه‌های جدید مرورگرهای اصلی از WebP پشتیبانی می‌کنند.

اگر توسعه‌دهندگان بخواهند تصاویر WebP را در مرورگرهای دیگر نیز ارائه دهند، می‌توانند از عنصر <picture> یا هدرهای درخواست استفاده کنند، همان‌طور که در بخش AVIF توضیح داده شد.

شبکه‌های توزیع محتوای تصاویر (Image CDN) نیز از تصاویر Responsive با قابلیت انتخاب خودکار فرمت پشتیبانی می‌کنند. این سرویس‌ها بسته به پشتیبانی مرورگر، می‌توانند تصاویر را در فرمت WebP یا AVIF ارائه دهند.

افزونه‌های WebP برای سیستم‌های مدیریت محتوای محبوب مانند WordPress، Joomla و Drupal نیز در دسترس هستند.

پشتیبانی اولیه از WebP از نسخه WordPress 5.8 به هسته وردپرس اضافه شد.

برای مشاهده تصاویر WebP، کافی است آن‌ها را در مرورگری باز کنید که از این فرمت پشتیبانی می‌کند.

علاوه بر این، با نصب افزونه‌های مربوطه می‌توانید تصاویر WebP را در سیستم‌عامل‌های Windows و macOS نیز مشاهده کنید.

برای مثال، نصب افزونه Quick Look مربوط به WebP با نام qlImageSize امکان مشاهده فایل‌های WebP را از طریق ابزار Quick Look فراهم می‌کند.

تیم توسعه WebP نیز کتابخانه‌ها و ابزارهای از پیش کامپایل‌شده‌ای برای Codec این فرمت در سیستم‌عامل‌های Windows، macOS و Linux منتشر کرده است.

در Windows، با استفاده از این ابزارها می‌توانید تصاویر WebP را در File Explorer یا Windows Photo Viewer مشاهده کنید.

تبدیل تصاویر به WebP

علاوه بر کتابخانه‌های ارائه‌شده توسط تیم WebP، ابزارهای رایگان، متن‌باز و تجاری متعددی برای ویرایش تصاویر از این فرمت پشتیبانی می‌کنند.

ابزارهای کاربردی (Utilities)

همانند AVIF، ابزار Squoosh امکان تبدیل تصاویر به WebP را به‌صورت آنلاین فراهم می‌کند.

ابزار XnConvert نیز یک نرم‌افزار دسکتاپ است که می‌توانید آن را نصب کرده و برای تبدیل فرمت‌های مختلف تصاویر، از جمله WebP، به کار ببرید.

XnConvert قابلیت‌های دیگری نیز دارد، از جمله:

• حذف و ویرایش Metadata
• برش و تغییر اندازه تصاویر
• تنظیم روشنایی و کنتراست
• سفارشی‌سازی عمق رنگ
• محو کردن و افزایش وضوح تصاویر
• اعمال Mask و Watermark
• انجام سایر عملیات پردازش تصویر

ماژول‌های Node.js

Imagemin یکی از ماژول‌های محبوب برای کاهش حجم تصاویر است که افزونه‌ای با نام imagemin-webp برای تبدیل تصاویر به WebP دارد.

این افزونه از هر دو روش فشرده‌سازی WebP با اتلاف و بدون اتلاف پشتیبانی می‌کند.

سایر ابزارها

اپلیکیشن‌های مختلفی برای تبدیل و پردازش تصاویر از فرمت WebP پشتیبانی می‌کنند. از جمله:

• Sketch
• GIMP
• ImageMagick

همچنین یک افزونه Photoshop برای پشتیبانی از WebP در دسترس است.

استفاده از WebP در محیط Production

به دلیل مزایای فشرده‌سازی WebP در مقایسه با JPEG و PNG، بسیاری از شرکت‌های بزرگ از این فرمت در محیط Production استفاده می‌کنند تا هزینه‌ها را کاهش دهند و زمان بارگذاری صفحات وب را بهبود ببخشند.

Google گزارش کرده است که با استفاده از WebP در مقایسه با سایر روش‌های فشرده‌سازی با اتلاف، حدود ۳۰ تا ۳۵ درصد صرفه‌جویی در حجم داده‌ها داشته است.

این شرکت روزانه ۴۳ میلیارد درخواست تصویر را پردازش می‌کند که ۲۶ درصد آن‌ها مربوط به فشرده‌سازی بدون اتلاف هستند.

Facebook نیز برای دسترسی بهتر به کاربران خود در بازارهای نوظهور، که هزینه اینترنت در آن‌ها بالاست، ارائه تصاویر WebP به کاربران Android را آغاز کرد.

نتیجه این اقدام، به گفته Facebook، «صرفه‌جویی ۲۵ تا ۳۵ درصدی در مصرف داده در مقایسه با JPG و ۸۰ درصدی در مقایسه با PNG» بوده است.

محدودیت‌ها و نکات مهم WebP (Gotchas)

در روزهای ابتدایی عرضه WebP، یکی از بزرگ‌ترین مشکلات آن، پشتیبانی محدود مرورگرها و ابزارهای نرم‌افزاری بود.

بااین‌حال، WebP همچنان در برخی قابلیت‌هایی که از یک فرمت مدرن انتظار می‌رود، با محدودیت‌هایی مواجه است.

• WebP به دقت رنگ ۸ بیتی محدود است. در نتیجه، نمی‌تواند از تصاویر HDR یا تصاویر دارای طیف رنگی گسترده (Wide Gamut) پشتیبانی کند.
• WebP از تصاویر با فشرده‌سازی با اتلاف، بدون استفاده از Chroma Subsampling پشتیبانی نمی‌کند.

WebP با فشرده‌سازی با اتلاف، به‌طور انحصاری از فرمت ۸ بیتی YCbCr 4:2:0 استفاده می‌کند، درحالی‌که WebP بدون اتلاف با فرمت RGBA کار می‌کند.

این محدودیت می‌تواند بر کیفیت تصاویری که دارای جزئیات ظریف، بافت‌های رنگی یا متن‌های رنگی هستند، تأثیر بگذارد. در ادامه می‌توانید نمونه‌ای از این مشکل را مشاهده کنید.

- WebP از Progressive Decoding پشتیبانی نمی‌کند، اما قابلیت Incremental Decoding را ارائه می‌دهد.

این قابلیت تا حدودی می‌تواند نبود Progressive Decoding را جبران کند، بااین‌حال، تأثیر آن بر نحوه رندر تصاویر ممکن است متفاوت باشد.

در حالت ایده‌آل، بهتر است فایل‌های WebP را از باکیفیت‌ترین فایل‌های منبع (Source Files) موجود تولید کنید.

تبدیل فایل‌های JPEG بی‌کیفیت به WebP چندان کارآمد نیست، زیرا در این حالت، کیفیت تصویر را دو بار از دست می‌دهید.

جمع‌بندی

با جمع‌بندی اطلاعات مربوط به چهار فرمت JPEG، PNG، AVIF و WebP و مقایسه نقاط قوت و ضعف آن‌ها، می‌توانیم جدول زیر را ارائه کنیم.

نکته: تعداد ستاره‌های استفاده‌شده در جدول بر اساس یک ارزیابی کلی تعیین شده‌اند و ممکن است با توجه به کاربردهای خاص، متفاوت باشند.

هنگام بررسی این جدول، باید چند نکته کلیدی را در نظر داشته باشید:

1. میزان فشرده‌سازی تصاویر عکاسی و غیرعکاسی متفاوت است.

میزان فشرده‌سازی تصاویر عکاسی و غیرعکاسی ممکن است بر اساس میزان وفاداری به تصویر اصلی (Fidelity یا Quality) تفاوت داشته باشد. در جدول، یک امتیاز کلی برای این معیار در نظر گرفته شده است.

2. تنظیمات کیفیت و Chroma Subsampling را متناسب با کاربرد تصویر انتخاب کنید.

تصاویر با وفاداری پایین تا متوسط (Low to Medium Fidelity) در بسیاری از کاربردهای وب، مانند وب‌سایت‌های خبری، شبکه‌های اجتماعی و فروشگاه‌های اینترنتی، کیفیت قابل‌قبولی دارند.

اما وب‌سایت‌های آرشیو تصاویر، فیلم و عکاسی به تصاویر با وفاداری و کیفیت بالا نیاز دارند.

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

3. نبود Progressive Decoding و سرعت پردازش ممکن است در استفاده از AVIF مشکل‌ساز باشد.

در وب‌سایت‌هایی که از تصاویر با حجم متوسط استفاده می‌کنند، کاهش حجم حاصل از فشرده‌سازی می‌تواند کندی پردازش و نبود Progressive Decoding را جبران کند، زیرا تصاویر سریع‌تر دانلود می‌شوند.

4. هنگام مقایسه میزان فشرده‌سازی فرمت‌های مختلف، حجم فایل‌ها را در DSSIM یکسان مقایسه کنید.

برای مقایسه منصفانه، باید کیفیت ادراکی تصاویر یکسان باشد.

5. تنظیمات Quality برای فرمت‌های مختلف لزوماً یکسان نیستند.

برای دستیابی به کیفیت تصویری مشابه، ممکن است لازم باشد از مقادیر Quality متفاوتی در فرمت‌های مختلف استفاده کنید.

برای مثال، یک تصویر JPEG با Quality برابر ۶۰ ممکن است از نظر کیفیت مشابه تصویری در فرمت AVIF با Quality برابر ۵۰ و WebP با Quality برابر ۶۵ باشد، همان‌طور که در این مقاله پیشنهاد شده است.

6. برای اندازه‌گیری تأثیر واقعی فرمت‌های مختلف بر LCP، هنوز به مطالعات گسترده‌تری نیاز داریم.

7. فرمت‌های دیگری مانند JPEG XL و HEIC در این مقایسه بررسی نشده‌اند.

JPEG XL هنوز در مراحل نسبتاً ابتدایی توسعه و پذیرش قرار دارد. از طرف دیگر، HEIC تنها در دستگاه‌های Apple پشتیبانی می‌شود، درحالی‌که Safari از آن پشتیبانی نمی‌کند.

هزینه‌های مربوط به حق امتیاز و مجوز استفاده (Royalty and License Fees) نیز پشتیبانی از HEIC را پیچیده‌تر می‌کنند.

در مجموع، AVIF بیشتر قابلیت‌های موردانتظار از یک فرمت تصویری مدرن را پوشش می‌دهد. از طرف دیگر، WebP از پشتیبانی گسترده‌تری برخوردار است و در مقایسه با JPEG و PNG، فشرده‌سازی بهتری ارائه می‌دهد.

به همین دلیل، هنگام بهینه‌سازی تصاویر وب‌سایت خود، حتماً باید پشتیبانی از WebP را در نظر بگیرید.

همچنین اگر AVIF با نیازهای شما سازگار است، می‌توانید آن را به‌عنوان یک Progressive Enhancement به وب‌سایت خود اضافه کنید. با گسترش پشتیبانی از این فرمت در مرورگرها و پلتفرم‌های مختلف، استفاده از آن می‌تواند ارزش قابل‌توجهی ایجاد کند.

با توسعه ابزارهای مقایسه کیفیت و بهبود سرعت Encode، استفاده از AVIF نیز به‌مرور ساده‌تر و کاربردی‌تر خواهد شد.