next-gen-web-graphics-avif-webp on File Format Blog https://blog.fileformat.com/fa/tag/next-gen-web-graphics-avif-webp/ Recent content in next-gen-web-graphics-avif-webp on File Format Blog Hugo -- gohugo.io fa Fri, 10 Apr 2026 00:00:00 +0000 چگونه سرعت سایت را با AVIF و WebP افزایش دهیم: راهنمای کامل https://blog.fileformat.com/fa/images/next-gen-web-graphics-avif-webp/ Fri, 10 Apr 2026 00:00:00 +0000 https://blog.fileformat.com/fa/images/next-gen-web-graphics-avif-webp/ یاد بگیرید چگونه تعویض JPEG/PNG با AVIF و WebP می‌تواند اندازه تصاویر را تا 80٪ کاهش دهد. LCP خود را بهبود دهید، رتبه‌بندی SEO را ارتقا دهید و امروز راه‌حل‌های جایگزین آسان را پیاده کنید. 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 سریع‌تر در شبکه‌های کند فراهم کرد.

گام‌های بعدی – چک‌لیست سریع

  1. بازرسی بار تصویری فعلی خود – Lighthouse «Serve images in next‑gen formats».
  2. یک گام ساخت اضافه کنید که AVIF (و WebP به‌عنوان fallback) را با استفاده از sharp یا avifenc خروجی دهد.
  3. HTML را به‌روزرسانی کنید با بلوک <picture> یا فعال‌سازی مذاکره Accept سمت سرور.
  4. هدرهای کش طولانی‌مدت تنظیم کنید (Cache‑Control: max-age=31536000, immutable).
  5. بارگذاری تنبل (lazy‑loading) را فعال کنید (loading="lazy" یا IntersectionObserver) تا از رمزگشایی AVIFهای خارج از صفحه جلوگیری شود.
  6. تبدیل لبه CDN را فعال کنید اگر ترجیح می‌دهید AVIF را به‌صورت محلی ذخیره نکنید.
  7. 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

]]>