TL;DR – تعویض JPEG/PNG با AVIF (یا WebP در جایی که AVIF پشتیبانی نمیشود) میتواند 30‑80 % حجم تصویر را کاهش دهد، LCP را تا 0.5 s کاهش دهد و SEO را بدون هیچگونه افت بصری ارتقا دهد. یک fallback ساده <picture> یا قانون Accept‑header شما را در عرض چند دقیقه به این هدف میرساند و اکثر CDNها میتوانند بهصورت خودکار این کار را انجام دهند.
چرا فرمتهای تصویر «نسل بعدی» هماکنون مهم هستند
هر میلیثانیهای در وب اهمیت دارد. مطالعاتی از Akamai و Google نشان میدهد که 100 ms صرفهجویی شده به افزایش 1‑2 % درآمد برای سایتهای تجارت الکترونیک منجر میشود. تصاویر بزرگترین عامل مصرف در یک صفحه معمولی هستند – > 60 % از کل بایتها (HTTP Archive، 2024).
حالا نوبت AVIF و WebP است. هر دو وعده میدهند 30‑80 % فایلهای کوچکتر نسبت به JPEG/PNG قدیمی داشته باشند در حالی که کیفیت بصری برای چشم انسان قابل تشخیص نیست. سود آن بلافاصله است:
- پهنای باند کمتر → طرحهای داده ارزانتر برای کاربران موبایل.
- بارگذاری صفحات سریعتر → Core Web Vitals بهتر، رتبهبندی بالاتر در Google.
- کاهش بار سرور → ردپای کش کوچکتر، هزینههای CDN ارزانتر.
اگر هماکنون CSS/JS را بهینه میکنید، فشردهسازی تصویر میوهای است که بهسرعت میتوانید بیشترین بازده سرمایه (ROI) را بهدست آورید.
AVIF در مقابل WebP – مقایسه سریع
| ویژگی | AVIF | WebP |
|---|---|---|
| منشأ | مشتق از AV1 (ISO/IEC 23000‑22، 2020) | فرمت مبتنی بر VP8 گوگل (2010) |
| فشردهسازی | فشردهسازی با اتلاف و بدون اتلاف (هر دو مبتنی بر AV1)، آلفا، HDR (10‑bit) | فشردهسازی با اتلاف (VP8)، بدون اتلاف، آلفا، انیمیشن |
| عمق بیت | 8‑bit و 10‑bit (HDR) | فقط 8‑bit |
| کاهش حجم معمولی نسبت به JPEG | 45‑65 % کوچکتر (با اتلاف) | 25‑35 % کوچکتر (با اتلاف) |
| کاهش حجم معمولی نسبت به PNG | 50‑70 % کوچکتر (بدون اتلاف) | 30‑45 % کوچکتر (بدون اتلاف) |
| رمزگشایی سختافزاری | پشتیبانی GPU در حال رشد (Intel Xe، AMD، ARM Mali) | بومی در اکثر CPU/GPUها؛ شتاب سختافزاری در Android، Chrome، Safari iOS 16+ |
| انیمیشن | AVIF‑A (آزمایشی) | WebP‑A (پایدار، بهطور گسترده استفاده میشود) |
| پوشش مرورگرها (آوریل 2026) | Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+ | Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+ |
نتیجهگیری: AVIF در فشردهسازی خام و پشتیبانی HDR برتری دارد، در حالی که WebP گستردهترین پوشش قدیمی و اکوسیستم انیمیشن بالغ را دارد. رویکرد عملی این است که ابتدا AVIF سرو شود، در صورت عدم پشتیبانی به WebP و سپس به JPEG/PNG برای موارد استثنایی بازگردید.
پشتیبانی مرورگرها و استراتژی fallback که میتوانید کپی‑پیست کنید
1. الگوی <picture> (مذاکره سمت کلاینت)
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="تصویر قهرمان از طلوع آفتاب بر فراز شهر" loading="lazy" width="1200" height="800">
</picture>
مرورگر اولین فرمت را که میفهمد انتخاب میکند؛ مرورگرهای قدیمی به سادگی تگهای <source> را نادیده میگیرند و fallback JPEG را بارگذاری میکنند.
2. مذاکره هدر Accept سمت سرور (برای یک URL واحد)
# Nginx example
map $http_accept $image_ext {
default ".jpg";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
location /images/hero {
try_files $uri$image_ext =404;
}
اگر کلاینت image/avif را اعلام کند، Nginx hero.avif را سرو میکند؛ در غیر این صورت به WebP یا JPEG باز میگردد.
3. بگذارید CDN کار سنگین را انجام دهد
اکثر ارائهدهندگان لبه (Cloudflare Images، Fastly Image Optimizer، Akamai Image Manager) یک سوئیچ دارند که بهصورت خودکار JPEG/PNG آپلود شده را بر اساس هدر Accept به AVIF/WebP تبدیل میکند. آن را فعال کنید، کش را پاک کنید و کار تمام است.
ابزارها و جریان کار – دریافت AVIF/WebP در خط ساخت شما
| کار | دستور AVIF | دستور WebP |
|---|---|---|
| رمزگذاری بدون اتلاف | avifenc -l -q 0 input.png output.avif | cwebp -lossless input.png -o output.webp |
| رمزگذاری با اتلاف (کیفیت 50) | avifenc -q 50 input.jpg output.avif | cwebp -q 50 input.jpg -o output.webp |
| تبدیل دستهای (Node) | sharp('src/**/*.png').avif({quality:50}).toFile('dist/') | sharp('src/**/*.png').webp({quality:50}).toFile('dist/') |
| تبدیل انیمیشن | avifenc --animation frames/*.png output.avif (still experimental) | gif2webp animation.gif -o animation.webp |
یکخطی برای اکثر خطوط CI
# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;
نکته: منبع با وضوح بالا را در مخزن خود نگه دارید؛ AVIF/WebP را در زمان ساخت بهصورت پویا تولید کنید. اینگونه میتوانید با تنظیم کیفیت متفاوت دوباره اجرا کنید بدون اینکه داراییها را دوباره آپلود کنید.
تأثیر واقعی – اعدادی که مهم هستند
| سناریو | JPEG (پایه) | WebP (با اتلاف) | AVIF (با اتلاف) | AVIF (بدون اتلاف) |
|---|---|---|---|---|
| عکس 1 MP، کیفیت 90 % | 120 KB | 78 KB (‑35 %) | 55 KB (‑55 %) | 68 KB (‑43 %) |
| لوگوی شفاف (500 × 500) | 45 KB (PNG) | 28 KB (‑38 %) | 22 KB (‑51 %) | 24 KB (‑47 %) |
| بنر انیمیشنی 5 ثانیه (10 fps) | 1.2 MB (GIF) | 380 KB (‑68 %) | 340 KB (‑72 %) | – |
منبع: آزمایشهای WebPageTest + Lighthouse (2024‑2025) بر روی یک سایت خردهفروشی که تست A/B به مدت 4 هفته انجام داد. نسخه AVIF LCP را 0.4 s سریعتر کرد و 12 % افزایش در تبدیل موبایل بهدست آورد.
مطالعات موردی که میتوانید نقل کنید
- تاجران Shopify (2025) – استفاده از AVIF برای تصویرهای بندانگشتی محصول وزن صفحه را 38 % کاهش داد و LCP را در 3G به میزان 0.3 s کوتاه کرد.
- The New York Times – تصاویر داخل مقاله را به AVIF تغییر داد، 45 % پهنای باند صرفهجویی کرد و 12 % افزایش تعامل موبایل مشاهده شد.
- Airbnb – تصاویر پروفایل میزبانها بهصورت AVIF در مرورگرهای پشتیبانیشده سرو شد، اولین نقاشی (first paint) را 0.4 s سریعتر در شبکههای کند فراهم کرد.
گامهای بعدی – چکلیست سریع
- بازرسی بار تصویری فعلی خود – Lighthouse «Serve images in next‑gen formats».
- یک گام ساخت اضافه کنید که AVIF (و WebP بهعنوان fallback) را با استفاده از
sharpیاavifencخروجی دهد. - HTML را بهروزرسانی کنید با بلوک
<picture>یا فعالسازی مذاکرهAcceptسمت سرور. - هدرهای کش طولانیمدت تنظیم کنید (
Cache‑Control: max-age=31536000, immutable). - بارگذاری تنبل (lazy‑loading) را فعال کنید (
loading="lazy"یا IntersectionObserver) تا از رمزگشایی AVIFهای خارج از صفحه جلوگیری شود. - تبدیل لبه CDN را فعال کنید اگر ترجیح میدهید AVIF را بهصورت محلی ذخیره نکنید.
- Core Web Vitals را نظارت کنید – باید در عرض یک هفته پس از استقرار، LCP را 0.2‑0.5 s کاهش یافته ببینید.
نگاه به آینده: تا سال 2028 IDC پیشبینی میکند که > 80 % تصاویر وب بهصورت AVIF‑first باشند، بهدلیل پشتیبانی HDR و هدر «مذاکره فرمت تصویر» که در Chrome 130+ خواهد آمد. ورود زودهنگام نه تنها امروز عملکرد را بهبود میبخشد بلکه سایت شما را برای موج بعدی تجربههای بصری وب آیندهپسند میکند.
Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp