۱. مقدمه
تصاویر به‌طور میانگین بیش‌از ۶۰٪ بایت‌های موردنیاز برای بار کردن صفحه وب را تشکیل می‌دهند. بااستفاده از AVIF می‌توانید تصاویرتان را کوچک‌تر کنید و سرعت بار شدن وب‌سایتتان را افزایش دهید.
AVIF چیست؟
AVIF قالب تصویری است که از جریان بیت ویدیو AV1 گرفته شده است. AVIF برای کارایی در فشرده‌سازی ساخته شده است.
چرا AVIF؟
تصاویر AVIF بسیار کوچک‌تر از تصاویر JPEG، PNG، GIF، یا WebP با کیفیت یکسان یا بهتر هستند.
آنچه خواهید آموخت
- نحوه ایجاد تصاویر AVIF از تصاویر
- نحوه پرداز کردن تصاویر AVIF در صفحه وب
آنچه نیاز خواهید داشت
- هر مرورگر اصلی.
- ویرایشگر نوشتار
- cmake
- git
- نینجا
- تصویر. یک مورد را در این پیوند ارائه کرده‌ام.
- FFmpeg
۲. ایجاد کردن تصاویر AVIF با Squoosh
Squoosh برنامه وب فشرده‌سازی تصویر است که می‌تواند تصاویرتان را به تصاویر AVIF تبدیل کند.
- Squoosh را باز کنید.
- تصویر محلی را روی Squoosh رها کنید.
- AVIF را از چارگوش کرکره‌ای «فشرده کردن» انتخاب کنید.
سپس Squoosh تصویرتان را به تصویر AVIF فشرده می‌کند. وقتی Squoosh کارش تمام شد، دکمه بارگیری را با برخی آمار مربوط به تصویر AVIF در گوشه پایین سمت راست نشان می‌دهد.
تصویر نمونه اصلی ۳۳۴۰ کیلوبایت و تصویر فشرده ۳۷۸ کیلوبایت است. تصویر نمونه تقریباً ۱۰ برابر کوچک‌تر از تصویر اصلی فشرده شده است!
- بارگیری تصویر AVIF
روی دکمه بارگیری کلیک کنید و تصویر AVIF در درایو محلی شما ذخیره خواهد شد.
اکنون تصویر AVIF خودتان را دارید!
۳. درحال ساختن کدبند خط فرمان avifenc
avifenc برنامه‌ای با خط فرمان است که می‌تواند تصاویر PNG و JPEG را به تصاویر AVIF تبدیل کند. avifenc از libavif استفاده می‌کند که کتابخانه‌ای است که می‌تواند تصاویر AVIF را رمزگشایی و رمزگذاری کند. اگر تصاویر زیادی دارید که می‌خواهید به AVIF تبدیل کنید، استفاده از کدبند خط فرمان، avifenc، احتمالاً انتخاب خوبی است.
- کد را دریافت کنید.
git clone https://github.com/AOMediaCodec/libavif.git
- دایرکتوری را به libavif تغییر دهید.
cd libavif/
روش‌های مختلفی برای پیکربندی avifenc و libavif برای ساخت وجود دارد. می‌توانید اطلاعات بیشتر را در libavif پیدا کنید. ما قصد داریم avifenc را بسازیم تا به‌طور ایستا به کدبند libaom، رمزگشای dav1d، و کتابخانه‌های پردازش libyuv پیوند داده شود.
- ابزار کدبندی خط فرمان، avifenc، را بسازید.
ایجاد فهرست راهنمای ساخت برای avifenc ایده خوبی است.
mkdir build
به دایرکتوری ساخت تغییر دهید.
cd build
فایل‌های ساخت را برای avifenc ایجاد کنید.
cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../
avifenc را بسازید.
make
avifenc را باموفقیت ساختید!
۴. ایجاد تصاویر AVIF با avifenc
- تصویر AVIF با تنظیمات پیش‌فرض ایجاد کنید.
اساسی‌ترین پارامترها برای اجرای avifenc، تنظیم فایل‌های ورودی و خروجی است.
./avifenc happy_dog.jpg example.avif
اکنون دومین تصویر AVIF خودتان را دارید!
- درحال تغییر کیفیت کدبندی AVIF.
معمولاً تنها پارامتری که ممکن است بخواهید در کدبندی AVIF تغییر دهید، پارامتر quality است. quality پارامتری است که کیفیت تصویر فشرده‌شده را با اندازه فایل معاوضه می‌کند. برای مثال، فایل با کیفیت بالا (-q 90) بسیار بزرگتر از فایل با کیفیت پایین (-q 20) خواهد بود، اما فایل با کیفیت بالا بسیار بهتر به نظر می‌رسد.
۵. تصاویر AVIF را در صفحه وب پرداز می‌کند.
اکنون بیایید همه تلاش‌هایتان را به دنیا نشان دهیم.
- صفحه وبی برای ارائه کردن تصویر 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 (example.avif) را در همان دایرکتوری avif_example.html کپی کنید.
ما از عنصر picture برای ارائه تصویر AVIF استفاده می‌کنیم، اگر مرورگر از AVIF پشتیبانی کند، و اگر مرورگر پشتیبانی نکند، به JPEG بازمی‌گردیم. درباره عنصر picture بیشتر بدانید.
- صفحه وب را در Chrome باز کنید.
یک راه برای باز کردن فایل html این است که avif_example.html را به Chrome بکشید. گزینه دیگر برای باز کردن فایل html، ارائه avif_example.html از سرور HTTP است.
اکنون تصویر AVIF شما باید در Chrome پرداز شود. می‌توانید این را با کلیک راست کردن روی تصویر و انتخاب Save image as... آزمایش کنید، که باید چارگوش گفتگویی با example.avif باز کند. گزینه دیگر این است که «ابزارهای توسعه‌دهنده Chrome» را باز کنید و ببینید که example.avif بارگیری شده است.
۶. ایجاد تصاویر AVIF پویانمایی‌شده با FFmpeg
- تصویر AVIF پویانمایی‌شده ایجاد کنید.
برای ایجاد تصویر AVIF پویانمایی‌شده از فایل y4m، این فرمان را اجرا کنید.
ffmpeg -i ice_qcif_15fps.y4m animated.avif
اکنون تصویر AVIF پویانمایی‌شده خودتان را دارید!
- تصویر 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 کپی کنید.
- صفحه وب را در Chrome باز کنید.
یکی از روش‌های باز کردن فایل html کشیدن avif_animated_example.html به Chrome است. گزینه دیگر برای باز کردن فایل html این است که avif_animated_example.html را از سرور HTTP ارائه دهید.
اکنون تصویر AVIF پویانمایی‌شده شما باید در Chrome رندر شود.
اگر از رسانه نمونه ارائه‌شده استفاده می‌کنید، باید تقریباً به این شکل باشد:
می‌توانید با کلیک راست روی تصویر و انتخاب Save image as...، که چارگوش گفتگویی با animated.avif باز می‌کند، آزمایش کنید که این تصویر AVIF پویانمایی‌شده است. گزینه دیگر این است که «ابزارهای توسعه‌دهنده Chrome» را باز کنید و ببینید که animated.avif بارگیری شده است.
۷. ایجاد تصاویر AVIF پویانمایی‌شده با avifenc
- رسانه منبع خود را به قالب y4m تبدیل کنید.
avifenc از y4m به‌عنوان ورودی برای ایجاد تصاویر AVIF پویانمایی‌شده پشتیبانی می‌کند. یک گزینه عالی برای ایجاد فایل‌های y4m استفاده از FFmpeg است.
ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
- تصویر AVIF پویانمایی‌شده‌ای بساز.
برای ایجاد تصویر AVIF پویانمایی‌شده از فایل y4m، این فرمان را اجرا کنید.
./avifenc ice_qcif_15fps.y4m animated.avif
اکنون تصویر AVIF پویانمایی‌شده دوم خودتان را دارید!
- تصویر 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 کپی کنید.
- صفحه وب را در Chrome باز کنید.
یکی از روش‌های باز کردن فایل html کشیدن avif_animated_example.html به Chrome است. گزینه دیگر برای باز کردن فایل html این است که avif_animated_example.html را از سرور HTTP ارائه دهید.
اکنون تصویر AVIF پویانمایی‌شده شما باید در Chrome رندر شود.
اگر از رسانه نمونه ارائه‌شده استفاده می‌کنید، باید به این شکل باشد:
می‌توانید با کلیک راست روی تصویر و انتخاب Save image as...، که چارگوش گفتگویی با animated.avif باز می‌کند، آزمایش کنید که این تصویر AVIF پویانمایی‌شده است. گزینه دیگر این است که «ابزارهای توسعه‌دهنده Chrome» را باز کنید و ببینید که animated.avif بارگیری شده است.
- درحال تغییر کیفیت کدبندی 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 در پست عالی جیک آرچیبالد بیشتر بدانید.