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

1. مقدمه

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

AVIF چیست؟

AVIF یک فرمت تصویر جدید است که از bitream ویدیویی AV1 مشتق شده است. AVIF برای کارایی فشرده سازی ساخته شده است.

چرا AVIF؟

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

آنچه خواهید آموخت

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

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

• کروم نسخه 85 یا بالاتر
• یک ویرایشگر متن
• cmake
• git
• نینجا
• یک تصویر من یکی را اینجا ارائه کردم
• FFmpeg

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

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

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

3. AVIF را از کادر کشویی Compress انتخاب کنید.

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

تصویر نمونه اولیه 3340 کیلوبایت و تصویر فشرده شده 378 کیلوبایت است. تصویر نمونه تقریبا 10 برابر کوچکتر از تصویر اصلی فشرده شده است!

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

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

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

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

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

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

کروم از libavif برای ارائه تصاویر AVIF استفاده می کند.

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

git clone 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

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

make

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

4. ایجاد تصاویر AVIF با avivenc

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

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

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420" تنظیمات توصیه شده برای تصاویر AVIF هستند.

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

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

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

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

./avifenc happy_dog.jpg example.avif --jobs 8

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

5. تصاویر 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 پشتیبانی می‌کند، تصویر AVIF را ارائه می‌کند، اگر مرورگر از AVIF پشتیبانی نمی‌کند، به JPEG تبدیل می‌شود. می توانید اطلاعات بیشتری در مورد آن بیابید اینجا .

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

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

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

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

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

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

فایل‌های Y4m فشرده نیستند، بنابراین می‌توانند بسیار بزرگ باشند.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

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

من یک فایل y4m برای شما ایجاد کردم تا در صورتی که فایل رسانه منبع ندارید از آن استفاده کنید: ice_qcif_15fps.y4m . فایل از Xiph.org Video Test Media است.

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

avifenc ice_qcif_15fps.y4m animated.avif

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

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

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

من یک فایل gif برای شما ایجاد کردم تا در صورتی که فایل رسانه منبع ندارید از آن استفاده کنید: ice_qcif_15fps.gif .

توجه داشته باشید که فایل گیف 35 برابر بزرگتر و کیفیت بسیار بدتری دارد.

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 کپی کنید.

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

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

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

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

به جز با AVIF متحرک، کیفیت بسیار بهتر.

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

7. تبریک می گویم!

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

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