ابزارهای تصویر

JPG، PNG، WebP یا AVIF؟ چطور فرمت مناسب تصویر را انتخاب کنیم

عکس‌های یکسان را با کیفیت ظاهری برابر به‌صورت JPG، WebP و AVIF ذخیره کردیم و حجم فایل‌ها را مقایسه کردیم. در این راهنما می‌خوانید هر فرمت برای چه کاری مناسب است، کجا هنوز PNG بهترین انتخاب است و چطور تصاویرتان را تبدیل کنید.

نوشته‌ی انتشار: ۸ دقیقه مطالعه

انتخاب فرمت تصویر یعنی برقراری تعادل میان حجم فایل، کیفیت، شفافیت و سازگاری. اگر فرمت اشتباه را انتخاب کنید، دور لوگو یک کادر خاکستری می‌افتد، اسکرین‌شات پنج برابر بیشتر از لازم حجم می‌گیرد یا فرم بارگذاری عکس را قبول نمی‌کند. این راهنما چهار فرمت رایج را توضیح می‌دهد، نتیجه‌ی اندازه‌گیری‌های ما را نشان می‌دهد و با یک قاعده‌ی ساده برای تصمیم‌گیری تمام می‌شود.

پاسخ کوتاه

  • عکس برای وب‌سایت: WebP، یا AVIF اگر کوچک‌ترین فایل را می‌خواهید و امکان ساختنش را دارید.
  • عکس برای ایمیل، فرم‌های بارگذاری یا چاپ: JPG. همه‌ی دستگاه‌ها، برنامه‌ها و چاپخانه‌ها آن را می‌پذیرند.
  • لوگو، آیکون، نمودار، اسکرین‌شات متنی و هر تصویر شفاف: PNG یا WebP بدون افت کیفیت.
  • تصویر متحرک: WebP متحرک یا یک ویدیوی کوتاه به‌جای GIF.

تفاوت چهار فرمت

نسخه‌های مرورگر طبق MDN Web Docs.
فرمتفشرده‌سازیشفافیتمناسب برایپشتیبانی
JPG (JPEG)با افت کیفیتنداردعکس، ایمیل، چاپهمه‌جا
PNGبدون افت کیفیتداردگرافیک، اسکرین‌شات، لوگوهمه‌جا
WebPبا یا بدون افت کیفیتداردعکس و گرافیک در وبهمه‌ی مرورگرهای اصلی امروزی
AVIFبا یا بدون افت کیفیتداردسبک‌ترین عکس‌های وبChrome 85+، Firefox 93+، Safari 16.1+، Edge 121+

فشرده‌سازی با افت کیفیت جزئیاتی را که چشم به‌سختی متوجه نبودشان می‌شود دور می‌ریزد و تنظیم کیفیت تعیین می‌کند چه مقدار. فشرده‌سازی بدون افت کیفیت همه‌ی پیکسل‌ها را دقیقاً بازمی‌گرداند؛ برای لبه‌های تیز و متن عالی است، اما عکس‌ها را پرحجم می‌کند. JPG اصلاً شفافیت را ذخیره نمی‌کند و به همین دلیل لوگویی که به‌صورت JPG ذخیره شود همیشه پس‌زمینه‌ی یکدست می‌گیرد.

چه چیزی را اندازه گرفتیم

برای اینکه به‌جای ادعاهای تبلیغاتی عدد واقعی داشته باشیم، از سه عکس آزمایشی بدون حق نشر (مالکیت عمومی یا CC0) استفاده کردیم که همراه کتابخانه‌ی scikit-image منتشر می‌شوند: پرتره‌ی یک فضانورد (۵۱۲ × ۵۱۲ پیکسل)، یک فنجان قهوه (۶۰۰ × ۴۰۰) و یک گربه (۴۵۱ × ۳۰۰) که همه بدون افت کیفیت ذخیره شده‌اند. هر عکس را با Pillow 12 (libjpeg-turbo، libwebp 1.6 و libavif 1.4) به JPG، WebP و AVIF تبدیل کردیم. برای هر فرمت پایین‌ترین تنظیم کیفیتی را پیدا کردیم که هنوز به شباهت یکسانی با اصل می‌رسید: شاخص SSIM برابر ۰٫۹۷ که در اندازه‌ی معمولی تقریباً از اصل قابل تشخیص نیست.

کیفیت ظاهری یکسان (SSIM ۰٫۹۷) در همه‌ی ستون‌ها؛ تنظیم کیفیت داخل پرانتز. هر کیلوبایت = ۱٬۰۰۰ بایت.
عکسPNG (بدون افت)JPGWebPAVIF
فضانورد، ۵۱۲ × ۵۱۲۴۲۵ کیلوبایت۳۹٫۵ کیلوبایت (کیفیت ۷۴)۳۰٫۰ کیلوبایت (کیفیت ۸۰)۲۲٫۹ کیلوبایت (کیفیت ۵۸)
قهوه، ۶۰۰ × ۴۰۰۴۴۲ کیلوبایت۶۱٫۰ کیلوبایت (کیفیت ۸۷)۴۴٫۱ کیلوبایت (کیفیت ۸۴)۳۴٫۴ کیلوبایت (کیفیت ۶۷)
گربه، ۴۵۱ × ۳۰۰۲۲۲ کیلوبایت۲۴٫۰ کیلوبایت (کیفیت ۸۱)۱۷٫۵ کیلوبایت (کیفیت ۸۲)۱۶٫۷ کیلوبایت (کیفیت ۶۲)
جمع۱٬۰۸۸ کیلوبایت۱۲۴٫۴ کیلوبایت۹۱٫۷ کیلوبایت۷۴٫۰ کیلوبایت

با کیفیت برابر، فایل‌های WebP در مجموع ۲۶٪ کم‌حجم‌تر از JPG بودند (برای هر عکس بین ۲۴ تا ۲۸ درصد)؛ این عدد به ۲۵ تا ۳۴ درصدی که گوگل برای WebP اعلام می‌کند بسیار نزدیک است. AVIF ۴۱٪ صرفه‌جویی کرد (برای هر عکس بین ۳۰ تا ۴۴ درصد). ذخیره‌ی همین عکس‌ها به‌صورت PNG تقریباً نُه برابر JPG جا می‌گرفت: فشرده‌سازی بدون افت ابزار مناسبی برای عکس نیست.

اسکرین‌شات‌ها رفتار دیگری دارند

یک اسکرین‌شات از صفحه‌ی اصلی همین سایت هم ذخیره کردیم (۱۲۸۰ × ۹۰۰ پیکسل، بیشتر رنگ‌های یکدست و متن). حجمش به‌صورت PNG ۲۴۸ کیلوبایت بود؛ WebP بدون افت آن را به ۱۳۹ کیلوبایت رساند، یعنی ۴۴٪ کمتر، بی‌آنکه حتی یک پیکسل تغییر کند. JPG با کیفیت ۸۵ از این هم کوچک‌تر بود (۸۱ کیلوبایت)، اما فشرده‌سازی JPG دور لبه‌های تیز متن لکه‌های محو به جا می‌گذارد و هر بار ذخیره‌ی دوباره آن را بیشتر می‌کند. برای اسکرین‌شات، با WebP بدون افت یا PNG شروع کنید.

JPG: فرمت همه‌کاره‌ی عکس

JPG از اوایل دهه‌ی ۱۹۹۰ استاندارد عکس بوده و همین بزرگ‌ترین مزیت آن است: هر گوشی، رایانه، برنامه‌ی ایمیل، فرم بارگذاری و چاپخانه‌ای آن را می‌شناسد. هر وقت مطمئن نیستید گیرنده چه فایلی را می‌تواند باز کند، JPG بفرستید.

ضعف‌هایش هم روشن است. JPG شفافیت ندارد و فشرده‌سازی‌اش در بلوک‌های ۸ × ۸ پیکسلی انجام می‌شود که در کیفیت پایین به‌صورت مربع‌های ریز دیده می‌شوند. هر بار که یک JPG را باز، ویرایش و دوباره ذخیره کنید، کمی جزئیات دیگر از دست می‌رود. فایل اصلی را نگه دارید و از آن خروجی بگیرید، نه اینکه یک فایل را بارها ذخیره کنید.

PNG: بدون افت و شفاف

PNG همه‌ی پیکسل‌ها را دقیق نگه می‌دارد و شفافیت کامل را با ۲۵۶ سطح شفافیت برای هر پیکسل پشتیبانی می‌کند. به همین دلیل مطمئن‌ترین انتخاب برای لوگو، آیکون، نمودار و گرافیک رابط کاربری است که باید روی هر پس‌زمینه‌ای تیز دیده شود. گرافیک‌های کم‌رنگ هم به‌صورت PNG بسیار خوب فشرده می‌شوند.

همان‌طور که جدول نشان می‌دهد، PNG برای عکس انتخاب اشتباهی است. تبدیل JPG به PNG هم کیفیت ازدست‌رفته را برنمی‌گرداند: PNG فقط پیکسل‌های از قبل فشرده‌شده را بدون افت بیشتر نگه می‌دارد و فایل صرفاً بزرگ‌تر می‌شود.

WebP: انتخاب کاربردی برای وب

گوگل WebP را در سال ۲۰۱۰ معرفی کرد. این فرمت فشرده‌سازی با افت و بدون افت، شفافیت و پویانمایی را یک‌جا دارد و همه‌ی نسخه‌های امروزی Chrome، Edge، Firefox و Safari آن را نمایش می‌دهند (Safari در macOS به نسخه‌ی ۱۴ و macOS Big Sur یا جدیدتر نیاز دارد). برای بیشتر وب‌سایت‌ها بهترین تعادل میان حجم، کیفیت و سازگاری است.

مشکل بیرون از مرورگر است: برخی برنامه‌های قدیمی، فرم‌های اینترنتی و خدمات چاپ هنوز WebP را نمی‌پذیرند. برای این موارد یک نسخه‌ی JPG یا PNG نگه دارید؛ ابزار تبدیل فرمت تصویر در چند ثانیه WebP را به هر دو فرمت برمی‌گرداند.

AVIF: کوچک‌ترین فایل‌ها، اما ساخت کندتر

AVIF بر پایه‌ی کدک ویدیویی AV1 ساخته شده و نسخه‌ی ۱٫۰ مشخصات آن در سال ۲۰۱۹ منتشر شد. در آزمایش ما کوچک‌ترین فایل‌ها را ساخت. پشتیبانی مرورگرها حالا گسترده است، اما دیرتر از WebP آمد: Safari در سال ۲۰۲۲ و Edge در سال ۲۰۲۴ آن را اضافه کردند.

رمزگذاری AVIF بسیار بیشتر طول می‌کشد. ذخیره‌ی عکس قهوه روی رایانه‌ی آزمایشی ما حدود ۴ میلی‌ثانیه با JPG، ۷۵ میلی‌ثانیه با WebP (در کندترین و بهینه‌ترین تنظیم) و حدود ۹۵۰ میلی‌ثانیه با AVIF در سرعت متوسط زمان برد. برای یک عکس این تفاوت مهم نیست، اما برای هزاران عکس روی سرور مهم است. مرورگرها AVIF را نمایش می‌دهند، اما همه‌ی آن‌ها نمی‌توانند در یک صفحه‌ی وب فایل AVIF بسازند؛ به همین دلیل مبدل ما JPG، PNG و WebP را ارائه می‌دهد که همه‌ی مرورگرهای امروزی می‌توانند بسازند.

ابعاد پیکسلی مهم‌تر از فرمت است

بیشترین صرفه‌جویی معمولاً از کوچک کردن ابعاد به دست می‌آید، نه از فرمت. عکس ۱۲ مگاپیکسلی گوشی ۴۰۰۰ × ۳۰۰۰ پیکسل است. اگر در ستونی به عرض ۸۰۰ پیکسل نمایش داده شود، حداکثر به حدود ۱۶۰۰ × ۱۲۰۰ پیکسل نیاز دارد تا حتی روی صفحه‌های با تراکم بالا تیز دیده شود. همین کوچک کردن، ۸۴٪ پیکسل‌ها را پیش از هر فشرده‌سازی حذف می‌کند.

  1. برش بزنید: بخش‌های اضافه را با ابزار برش تصویر حذف کنید.
  2. کوچک کنید: با ابزار تغییر اندازه‌ی تصویر تصویر را به بزرگ‌ترین اندازه‌ای برسانید که واقعاً نمایش داده می‌شود (حدود دو برابر عرض نمایش برای وضوح روی صفحه‌های با تراکم بالا).
  3. تبدیل کنید: با ابزار تبدیل فرمت تصویر فرمت مناسب را انتخاب کنید.
  4. فشرده کنید: در ابزار فشرده‌سازی تصویر از کیفیت حدود ۷۵ شروع کنید و نتیجه را در بزرگنمایی ۱۰۰٪ با اصل مقایسه کنید.
  5. فایل اصلی را نگه دارید. هر ذخیره‌ی با افت کمی جزئیات کم می‌کند.

فشرده‌سازی تصویرتصاویر JPG، PNG و WebP را در مرورگر فشرده کنید: کیفیت را انتخاب کنید، ابعاد را کوچک کنید و فایل سبک‌تر بگیرید؛ بدون آپلود.باز کردن ابزار

یک قاعده‌ی ساده برای تصمیم‌گیری

  • تصویر پس‌زمینه‌ی شفاف لازم دارد؟ PNG، یا برای حجم کمتر WebP.
  • عکس برای وب‌سایت است؟ WebP؛ و AVIF اگر سیستم شما می‌تواند آن را بسازد و هر کیلوبایت مهم است.
  • عکس برای ایمیل، فرم، چاپخانه یا گیرنده‌ای ناشناس است؟ JPG.
  • اسکرین‌شات، نمودار یا لوگو است؟ PNG یا WebP بدون افت. اگر لوگو فایل برداری دارد، SVG در وب از این هم بهتر است.
  • متحرک است؟ WebP متحرک یا یک ویدیوی کوتاه به‌جای GIF که فقط ۲۵۶ رنگ دارد.

ابزارهای این راهنما

پرسش‌های متداول

آیا تبدیل JPG به PNG کیفیت را بهتر می‌کند؟

نه. جزئیاتی که فشرده‌سازی JPG حذف کرده برای همیشه از دست رفته است. PNG همان پیکسل‌های فشرده‌شده را دقیق نگه می‌دارد و فایل فقط بزرگ‌تر می‌شود.

کم‌حجم‌ترین فرمت تصویر کدام است؟

برای عکس با کیفیت ظاهری یکسان، در آزمایش ما AVIF کوچک‌ترین بود (در مجموع ۴۱٪ کمتر از JPG) و بعد WebP (۲۶٪ کمتر). برای اسکرین‌شات و گرافیک، WebP بدون افت معمولاً از PNG کم‌حجم‌تر است.

آیا WebP همه‌جا پشتیبانی می‌شود؟

همه‌ی نسخه‌های امروزی Chrome، Edge، Firefox و Safari آن را نمایش می‌دهند. برخی نرم‌افزارهای قدیمی، فرم‌های بارگذاری و خدمات چاپ هنوز آن را نمی‌پذیرند؛ برای این موارد یک نسخه‌ی JPG یا PNG نگه دارید.

برای JPG چه کیفیتی انتخاب کنم؟

برای عکس‌های وب، ۷۰ تا ۸۵ بازه‌ی خوبی است. در آزمایش ما JPG به عدد ۷۴ تا ۸۷ نیاز داشت تا به اندازه‌ی WebP با کیفیت ۸۰ تا ۸۴ به اصل شبیه باشد. عدد مناسب به خود عکس بستگی دارد؛ پس در بزرگنمایی ۱۰۰٪ مقایسه کنید.

آیا تصاویرم هنگام استفاده از ابزارهای شما بارگذاری می‌شوند؟

نه. ابزارهای تصویر ما در مرورگر شما اجرا می‌شوند. فایل‌ها روی دستگاه خودتان پردازش می‌شوند و هرگز به سرور ما فرستاده نمی‌شوند.

منابع و مطالعه‌ی بیشتر

  1. WebP: An image format for the Web – Google for Developers (developers.google.com)
  2. Image file type and format guide – MDN Web Docs (developer.mozilla.org)
  3. AVIF – Wikipedia (format history and browser support) (en.wikipedia.org)
  4. scikit-image test images (astronaut, coffee, chelsea) (scikit-image.org)
همه‌ی راهنماها