پاسخِ سریع: عکس‌ها به JPEG می‌روند، گرافیک‌هایی با لبه‌های تیز یا شفافیت به PNG. اگر هیچ‌چیزِ دیگری به یاد نیاورید، همین قاعده ۹۰٪ تصمیم‌ها را درست مدیریت می‌کند. بقیهٔ این صفحه توضیح می‌دهد چرا، تا بتوانید موردهای مرزی را خودتان تشخیص دهید.

آن یک تمایزی که مهم است

JPEG در برابر PNG: کدام را باید به کار ببرید؟ — visual 1
آن یک تمایزی که مهم است

JPEG و PNG برای انواعِ متفاوتی از تصویر ساخته شدند.

  • JPEG یک فرمتِ با اُفت است که برای عکس‌ها تنظیم شده. در گرادیان‌های نرم می‌درخشد — پوست، آسمان، پس‌زمینه‌های خارج از فوکوس — و با خوشحالی جزئیاتِ ظریفی را که چشمتان نادیده می‌گیرد دور می‌ریزد. این‌طور یک عکسِ ۱۲ مگاپیکسلی را در ۲ مگابایت جا می‌دهد.
  • PNG یک فرمتِ بی‌اُفت است که برای رنگِ تخت، خط‌های واضح و متن ساخته شده. از شفافیت هم پشتیبانی می‌کند، که JPEG اصلاً نمی‌تواند. یک لوگو، یک آیکون، یک اسکرین‌شاتِ یک رابطِ کاربری، یا یک نمودار به PNG تعلق دارد.

اشتباهش را به کار ببرید و فوری حسش می‌کنید. یک لوگو را به‌صورتِ JPEG ذخیره کنید و لبه‌های تیز با «نویزِ پشه‌ای» خاکستری حاشیه‌دار می‌شوند. یک عکس را به‌صورتِ PNG ذخیره کنید و فایل بدونِ هیچ سودِ آشکاری به پنج یا ده برابرِ اندازه باد می‌کند.

یک راهنمای سریعِ تصمیم

JPEG در برابر PNG: کدام را باید به کار ببرید؟ — visual 2
یک راهنمای سریعِ تصمیم

دو پرسش را به ترتیب بپرسید:

  1. به شفافیت نیاز دارد؟ اگر بله ← PNG (یا WebP). JPEG شفافیت ندارد، نقطه.
  2. یک عکس است یا تصویری عکس‌مانند با گرادیان‌های فراوان؟ اگر بله ← JPEG. اگر رنگِ تخت، متنِ تیز، یا هنرِ خطی است ← PNG.

اسکرین‌شات‌ها تلهٔ کلاسیک‌اند. یک اسکرین‌شات از یک صفحهٔ وبِ پُر از عکس بهتر به‌صورتِ JPEG فشرده می‌شود؛ یک اسکرین‌شات از کد، یک صفحه‌گسترده، یا یک رابطِ کاربری به‌صورتِ PNG واضح و کوچک می‌ماند. وقتی شک دارید، هر دو را امتحان و مقایسه کنید — که ما را به ابزارها می‌رساند.

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

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

رایج‌ترین بُرد: یک طراح پوشه‌ای از عکس‌های PNG به دستتان داده. آن‌ها را به JPG تبدیل کنید و ببینید پوشه ۸۰٪ یا بیشتر بدونِ اُفتِ آشکار کوچک می‌شود.

فشرده‌سازیِ هر فرمت به شیوهٔ درست

انتخابِ فرمت فقط نیمی از کار است — هنوز فایل را کوچک می‌خواهید.

  • برای JPEG (و WebP): از یک اسلایدرِ کیفیت استفاده کنید. بازهٔ ۷۵–۸۵ برای بیشترِ عکس‌ها به‌لحاظِ بصری بی‌اُفت است در حالی که اندازه را به‌شدت می‌بُرد.
  • برای PNG: اسلایدرِ کیفیتی نیست چون بی‌اُفت است. به‌جایش، شمارِ رنگ را کم کنید. بیشترِ PNGها بسیار کمتر از مجازشان رنگ به کار می‌برند، پس کوانتیزه‌کردن تا یک پالتِ ۲۵۶ رنگی معمولاً ۶۰–۸۰٪ صرفه‌جویی می‌کند بدونِ تغییرِ آشکار — و شفافیت را دست‌نخورده نگه می‌دارد.

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

دربارهٔ WebP چطور؟

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

نتیجهٔ نهایی

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