چطوری از فرمت جدید تصاویر avif استفاده کنیم؟

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

خب منم غنیمت رو فرصت شمردم، گفتم یه بلاگ پست کوچیک راجع بهش بنویسم..

خب با یه نگاه به همین یه تیکه کد میتونیم متوجه بشیم که خیلی راحته استفاده ازش، کافیه توی بلوک `picture` یه `source` دیگه هم میزاریم. که برای لود کردن avif استفاده می‌شه. ولی این فرمت چیه؟ چطوری میشه تصاویر avif بسازیم و چطوری استفاده کنیم ازش؟ تو این مقاله کوتاه پاسخ این سوالا رو می‌تونین پیدا کنین.

مقایسه با بقیه بازیکنا

این تکنولوژی که بعد از webp اومده و یه next generation format برای تصاویر محسوب میشه، خیلی هیجان انگیزه چون در مقایسه با jpeg و حتی webp که خودش خیلی فرمت کم حجمی بود، کم حجم‌تره!

تصویر فوق کافیه که یه کم ما رو به فکر فرو ببره و بعدش یه کم به چالش بیفتیم تا بتونیم برای این استفاده از این فرمت برنامه‌ریزی کنیم. فرمت AV1 (یا همون .avif) یه سوپر فرمت برای کم حجم‌سازی تصاویره.

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

نکته اونجایی جالب میشه که میریم caniuse رو چک می‌کنیم. نتیجه قابل تامله! فقط ۵ صدم درصد مرورگرها فعلا از این فرمت پشتیبانی می‌کنن.

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

البته احتمال اینکه به زودی شاهد پشتیبانی گسترده ازش باشیم خیلی زیاده. به اضافه اینکه همین الانشم webp رو داریم پشتیبانی می‌کنیم که الان حدود ۸۵ درصد از مرورگرها پشتیبانی ‌میکنن ازش (ولی خب باز می‌ارزه).

الان استفاده کنیم خطا میده؟!

پشتیبانی از avif توی کروم ۸۵ و فایرفاکس ۸۰ اضافه شده و اگه همینطوری توی تگ img لینک یه فایل avif رو بزاریم، آره لود نمیشه و حتی مرورگر فعلی شما هم احتمال خیلی بالایی داره که از این فرمت پشتیبانی نکنه و اگه نسخه canary آخر گوگل کروم نباشین باز نمیشه تصاویر avif. حتی فایرفاکس هم فعلا باید flag مربوط به avif رو از تنظیمات فعال کنید.

ولی این موضوع به معنی عدم استفاده ازش نیست! چون همونطور که می‌دونین میشه از تگ picture استفاده کرد و این تگ اجازه این مورد رو میده که اگه مرورگر از فرمت مورد نظر ما پشتیبانی میکنه. لود تصویر با اون فرمت براش انجام بشه و اصطلاحا به شکل progressive لود تصویر رو انجام میده، پس خیالتون راحت همین امروز برین همه تصاویر رو به فرمت‌های webp و avif هم تبدیل کنین و توی سورس کدهاتون با تگ picture و source لود کنید.

<picture>
	<source srcset=&quotimg/photo.avif&quot type=&quotimage/avif&quot>
	<source srcset=&quotimg/photo.webp&quot type=&quotimage/webp&quot>
	<img src=&quotimg/photo.jpg&quot alt=&quotDescription of Photo&quot>
</picture>

چطوری تصاویر رو تبدیل کنیم؟

خب قطعا کتابخونه‌های تبدیل کننده این فرمت هم خیلی سریع رشد میکنن، مثلا به عنوان یه سرویس آنلاین Squoosh رو میشه عنوان کرد که برای تبدیل به این فرمت استفاده کرد. (البته نسخه دارای avif اینجاست روی netlify). البته روی گیت‌هاب آزمایشگاه گوگل PR فعال داره که روی squoosh بیاد (لینک).

اگه هم می‌خواییم اصطلاحا به شکل programaticly این تبدیل رو انجام بدین یا مثلا توی محیط cli بتونین این تبدیل رو انجام بدین می‌تونین از libavif که با c نوشته شده استفاده کنین، یا روی محیط macos با Homebrew نصبش کنین.

brew install joedrago/repo/avifenc 
avifenc --help

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

منابع:

https://aomediacodec.github.io/av1-avif/

https://www.ctrl.blog/entry/webp-avif-comparison.html

https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

سایر نوشته‌هام