ارائه تصاویر AVIF

۱. مقدمه

تصاویر به طور متوسط ​​بیش از ۶۰٪ از بایت‌های مورد نیاز برای بارگذاری یک صفحه وب را تشکیل می‌دهند. با استفاده از AVIF می‌توانید تصاویر خود را کوچک‌تر کرده و وب‌سایت خود را سریع‌تر بارگذاری کنید.

AVIF چیست؟

AVIF یک فرمت تصویری است که از بیتریم ویدیویی AV1 گرفته شده است. AVIF برای فشرده‌سازی کارآمد ساخته شده است.

چرا آویف؟

تصاویر AVIF با کیفیت یکسان یا بهتر، بسیار کوچک‌تر از تصاویر JPEG، PNG، GIF یا WebP هستند.

آنچه یاد خواهید گرفت

  • نحوه ایجاد تصاویر AVIF از تصاویر شما
  • نحوه رندر کردن تصاویر AVIF در یک صفحه وب

آنچه نیاز دارید

۲. ایجاد تصاویر AVIF با Squoosh

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

  1. https://squoosh.app را باز کنید
  2. یک تصویر محلی را روی Squoosh رها کنید.

اسکرین شات اسکواش

  1. از کادر کشویی Compress، گزینه AVIF را انتخاب کنید.

کادر کشویی Squoosh

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

دکمه دانلود اسکواش

تصویر نمونه اصلی ۳۳۴۰ کیلوبایت و تصویر فشرده‌شده ۳۷۸ کیلوبایت است. تصویر نمونه تقریباً ۱۰ برابر کوچکتر از تصویر اصلی فشرده شده است!

  1. تصویر AVIF را دانلود کنید

روی دکمه دانلود کلیک کنید و تصویر AVIF در درایو محلی شما ذخیره می‌شود.

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

۳. ساخت رمزگذار خط فرمان avifenc

avifenc یک برنامه خط فرمان است که می‌تواند تصاویر PNG و JPEG را به تصاویر AVIF تبدیل کند. avifenc از libavif استفاده می‌کند که کتابخانه‌ای است که می‌تواند تصاویر AVIF را رمزگشایی و رمزگذاری کند. اگر تصاویر زیادی دارید که می‌خواهید به AVIF تبدیل کنید، استفاده از رمزگذار خط فرمان، avifenc، احتمالاً انتخاب خوبی است.

  1. کد را دریافت کنید. 
git clone https://github.com/AOMediaCodec/libavif.git
  1. دایرکتوری را به libavif تغییر دهید. 
cd libavif/

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

  1. ابزار کدگذاری خط فرمان، avifenc، را بسازید.

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

mkdir build

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

cd build

فایل‌های ساخت برای avifenc را ایجاد کنید.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

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

make

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

۴. ایجاد تصاویر AVIF با avifenc

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

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

./avifenc happy_dog.jpg example.avif

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

  1. تغییر کیفیت رمزگذاری AVIF.

معمولاً تنها پارامتری که ممکن است بخواهید در کدگذاری AVIF تغییر دهید، پارامتر quality است. quality پارامتری است که کیفیت تصویر فشرده‌شده را با اندازه فایل معاوضه می‌کند. مثلاً یک فایل با کیفیت بالا ( -q 90 ) بسیار بزرگتر از یک فایل با کیفیت پایین ( -q 20 ) خواهد بود، اما فایل با کیفیت بالا بسیار بهتر به نظر می‌رسد.

۵. تصاویر AVIF را در یک صفحه وب رندر کنید.

حالا بیایید تمام زحماتتان را به جهانیان نشان دهید.

  1. یک صفحه وب برای نمایش تصویر AVIF خود ایجاد کنید.

یک فایل با نام avif_example.html ایجاد کنید.

avif_example.html را در ویرایشگر متن خود باز کنید و این کد را تایپ کنید:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

فایل منبع (در مورد من happy_dog.jpg ) و فایل AVIF خود ( eaxmple.avif ) را در همان دایرکتوری avif_example.html کپی کنید.

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

  1. صفحه وب را در کروم باز کنید.

یک راه برای باز کردن فایل html، کشیدن و رها کردن avif_example.html به داخل کروم است. گزینه دیگر برای باز کردن فایل html، استفاده از avif_example.html از یک سرور HTTP است.

حالا تصویر AVIF شما باید در کروم رندر شود. می‌توانید این را با کلیک راست روی تصویر و انتخاب Save image as... آزمایش کنید، که باید یک کادر محاوره‌ای با example.avif باز شود. گزینه دیگر این است که Chrome Developer Tools را باز کنید و ببینید example.avif دانلود شده است.

۶. ایجاد تصاویر متحرک AVIF با FFmpeg

  1. یک تصویر متحرک AVIF ایجاد کنید.

این دستور را اجرا کنید تا یک تصویر متحرک AVIF از یک فایل y4m ایجاد شود.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

  1. تصویر متحرک AVIF را در یک صفحه وب رندر کنید.

یک فایل با نام avif_animated_example.html ایجاد کنید.

avif_animated_example.html را در ویرایشگر متن خود باز کنید و این کد را تایپ کنید: 

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

فایل منبع (در مورد بالا ice_qcif_15fps.gif ) و فایل AVIF خود ( animated.avif ) را در همان دایرکتوری avif_animated_example.html کپی کنید.

  1. صفحه وب را در کروم باز کنید.

یک راه برای باز کردن فایل html، کشیدن و رها کردن avif_animated_example.html به داخل کروم است. گزینه دیگر برای باز کردن فایل html، استفاده از avif_animated_example.html از یک سرور HTTP است.

حالا تصویر متحرک AVIF شما باید در کروم رندر شده باشد.

اگر از رسانه نمونه ارائه شده استفاده می‌کنید، باید تقریباً چیزی شبیه به این باشد:

پیست یخ متحرک

می‌توانید با کلیک راست روی تصویر و انتخاب Save image as... بررسی کنید که آیا این یک تصویر متحرک AVIF است یا خیر، که باید یک کادر محاوره‌ای حاوی animated.avif باز شود. گزینه دیگر این است که Chrome Developer Tools را باز کنید و ببینید که animated.avif دانلود شده است.

۷. ایجاد تصاویر متحرک AVIF با avifenc

  1. رسانه منبع خود را به فرمت y4m تبدیل کنید.

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. یک تصویر متحرک AVIF ایجاد کنید.

این دستور را اجرا کنید تا یک تصویر متحرک AVIF از یک فایل y4m ایجاد شود. 

./avifenc ice_qcif_15fps.y4m animated.avif

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

  1. تصویر متحرک AVIF را در یک صفحه وب رندر کنید.

یک فایل با نام avif_animated_example.html ایجاد کنید.

avif_animated_example.html را در ویرایشگر متن خود باز کنید و این کد را تایپ کنید: 

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

فایل منبع (در مورد بالا ice_qcif_15fps.gif ) و فایل AVIF خود ( animated.avif ) را در همان دایرکتوری avif_animated_example.html کپی کنید.

  1. صفحه وب را در کروم باز کنید.

یک راه برای باز کردن فایل html، کشیدن و رها کردن avif_animated_example.html به داخل کروم است. گزینه دیگر برای باز کردن فایل html، استفاده از avif_animated_example.html از یک سرور HTTP است.

حالا تصویر متحرک AVIF شما باید در کروم رندر شده باشد.

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

پیست یخ متحرک

می‌توانید با کلیک راست روی تصویر و انتخاب Save image as... بررسی کنید که آیا این یک تصویر متحرک AVIF است یا خیر، که باید یک کادر محاوره‌ای حاوی animated.avif باز شود. گزینه دیگر این است که Chrome Developer Tools را باز کنید و ببینید که animated.avif دانلود شده است.

  1. تغییر کیفیت رمزگذاری AVIF.

فایل ice_qcif_15fps.gif حدود ۷ برابر بزرگتر و با کیفیت بسیار بدتر است. می‌توانید با تغییر پارامتر کیفیت به ۲۰، کیفیت AVIF را تقریباً با کیفیت ice_qcif_15fps.gif مطابقت دهید. 

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

حالا فایل متحرک AVIF و ice_qcif_15fps.gif تقریباً کیفیت یکسانی دارند، اما فایل GIF حدود ۲۲ برابر بزرگتر است.

۸. تبریک می‌گویم!

شما آزمایشگاه کد تصاویر AVIF را به پایان رسانده‌اید!

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