هر فرمتِ تصویر مجموعه‌ای از مبادله‌ها میانِ اندازهٔ فایل، کیفیت و ویژگی‌هایی مثل شفافیت یا انیمیشن است. اشتباهش را انتخاب کنید و به فایل‌های حجیم، متنِ تار، یا گرافیک‌هایی که نمایش داده نمی‌شوند می‌رسید. در ادامه هرکدام از فرمت‌های رایج را به زبانِ ساده می‌بینید، و پس از آن جدولی که می‌توانید دمِ دست نگه دارید.

دو خانوادهٔ بزرگ

فرمت‌های فایل تصویر به زبان ساده — PNG، JPG، WebP، AVIF، GIF، SVG — visual 1
دو خانوادهٔ بزرگ

پیش از فرمت‌های تک، یک تمایز بیشترشان را توضیح می‌دهد:

  • تصاویرِ رَستری (Raster) شبکه‌هایی از پیکسل‌اند. عکس‌ها رَستری‌اند. به‌قدرِ کافی زوم کنید و مربع‌ها را می‌بینید. PNG، JPG، WebP، AVIF و GIF همگی رَستری‌اند.
  • تصاویرِ برداری (Vector) ریاضی‌اند — خط‌ها، منحنی‌ها و شکل‌هایی که با مختصات تعریف می‌شوند. بدونِ تار شدن به هر اندازه‌ای مقیاس می‌گیرند. SVG فرمتِ برداریِ روی وب است.

ایدهٔ کلیدیِ دیگر با اُفت در برابر بی‌اُفت است. فرمت‌های با اُفت (JPG، معمولاً AVIF/WebP) بخشی از جزئیات را دور می‌ریزند تا فایل را کوچک کنند. فرمت‌های بی‌اُفت (PNG، GIF، WebP بی‌اُفت) هر پیکسل را دقیقاً حفظ می‌کنند.

فرمت‌ها، یکی‌یکی

فرمت‌های فایل تصویر به زبان ساده — PNG، JPG، WebP، AVIF، GIF، SVG — visual 2
فرمت‌ها، یکی‌یکی

JPG (JPEG) — اسبِ کاریِ عکس‌ها. با اُفت، کوچک، و به‌معنای واقعی همه‌جا خواندنی. بدونِ شفافیت، بدونِ انیمیشن. ذخیرهٔ دوبارهٔ مکرر به‌آرامی تنزلش می‌دهد. برای عکس‌ها و هر جایی که به بیشترین سازگاری نیاز دارد به کارش ببرید.

PNG — بی‌اُفت، از شفافیت پشتیبانی می‌کند. انتخابِ درست برای اسکرین‌شات‌ها، لوگوها، آیکون‌ها و نمودارها — هر چیزی با متن یا لبه‌های سخت. عکس‌ها در PNG بزرگ‌اند، پس برای آن‌ها به کارش نبرید.

WebP — فرمتی مدرن که هر دو کار را انجام می‌دهد: حالتِ با اُفت در اندازه از JPG جلو می‌زند (~۲۵–۳۵٪ کوچک‌تر)، حالتِ بی‌اُفت از شفافیت پشتیبانی می‌کند و جمع‌وجور می‌ماند. انیمیشن را هم مدیریت می‌کند. حالا در مرورگرها همگانی پشتیبانی می‌شود. ایده‌آل برای وب؛ کمتر برای ایمیل یا نرم‌افزارِ قدیمی‌تر.

AVIF — جدیدترین و بهترین فشرده‌سازِ این‌جا، تقریباً نصفِ اندازهٔ JPEG با کیفیتِ مشابه، همراه با شفافیت و HDR. مرورگرها می‌توانند خوب نمایشش دهند، اما نمی‌توانند به‌طورِ قابل‌اعتماد از یک بوم کدگذاری‌اش کنند — پس ابزارهای مرورگری وقتی AVIF درخواست کنید به WebP برمی‌گردند. کدگذاریِ واقعیِ AVIF به یک سرور یا برنامهٔ بومی نیاز دارد.

GIF — قدیمی، محدود به ۲۵۶ رنگ، اما کلاسیکِ انیمیشنِ ساده. برای هر چیزی فراتر از یک حلقهٔ کوتاه، WebP (یا یک ویدیو) کوچک‌تر و واضح‌تر است. برای آیکون‌های انیمیشنیِ ریز خوب است؛ برای عکس‌ها ضعیف.

SVG — برداری، پس بی‌نهایت بدونِ تار مقیاس می‌گیرد و برای گرافیک‌های ساده ریز می‌ماند. عالی برای لوگوها، آیکون‌ها و تصویرسازی‌ها. کد است، نه پیکسل، پس نمی‌تواند یک عکس را بازنمایی کند.

جدول مقایسه

فرمت نوع فشرده‌سازی شفافیت انیمیشن بهترین برای
JPG رَستری با اُفت خیر خیر عکس‌ها، بیشترین سازگاری
PNG رَستری بی‌اُفت بله خیر اسکرین‌شات، لوگو، متن
WebP رَستری هر دو بله بله تصاویر وب، کوچک + آلفا
AVIF رَستری با اُفت/بی‌اُفت بله بله بیشترین فشرده‌سازی (سمتِ سرور)
GIF رَستری بی‌اُفت فقط ۱ بیتی بله انیمیشن‌های ساده
SVG برداری ندارد بله بله (با CSS/JS) لوگو، آیکون، تصویرسازی

چطور سریع انتخاب کنیم

  • عکس؟ JPG برای سازگاری، WebP برای وب.
  • اسکرین‌شات، لوگو یا متن؟ PNG (رَستری) یا SVG (اگر یک گرافیکِ واقعاً برداری است).
  • به شفافیت نیاز دارید؟ PNG، WebP، AVIF یا SVG — هرگز JPG.
  • انیمیشن؟ WebP برای کیفیت و اندازه، GIF فقط برای سادگیِ میراثی.
  • انتشار در یک وب‌سایت؟ WebP معمولاً پیش‌فرضِ هوشمندانه است.

تبدیل میانِ آن‌ها

وقتی فرمتِ اشتباهی دارید، برای درست‌کردنش لازم نیست چیزی آپلود کنید. تبدیل‌کنندهٔ تصویر میانِ PNG، JPG و WebP درست در مرورگرِ شما با استفاده از Canvas سوئیچ می‌کند — نه حسابِ کاربری، چیزی منتقل نمی‌شود، و پس از نخستین بازدید آفلاین کار می‌کند. دسته‌ها را مدیریت می‌کند، و اگر AVIF درخواست کنید به WebP برمی‌گردد (کوچک‌تر از JPG/PNG و همه‌جا پشتیبانی‌شده) چون مرورگرها نمی‌توانند AVIF را به‌طورِ قابل‌اعتماد کدگذاری کنند.

جدولِ بالا را در ذهن نگه دارید و انتخابِ فرمت دیگر حدس‌زدن نیست: فرمت را با محتوا (عکس در برابر گرافیک) منطبق کنید، سپس با مقصد (وب، ایمیل، چاپ)، و تقریباً هربار درست انتخاب خواهید کرد.