PNG یا JPG؟ قاعدهٔ دهسالهای که برای تصمیم به کار میبرم
Dov Azencot
@DovAzencotPNG و JPG بیش از بیست سال است که دو پاسخ پیشفرض «این تصویر را ذخیره کن» بودهاند، و بیشتر مردم بهتصادف بینشان یکی را انتخاب میکنند — هر چه پنجرهٔ خروجی پیشفرض گذاشته باشد. این کار جواب میدهد تا روزی که برای کسی یک اسکرینشات 9 مگابایتی ایمیل کنید، یا لوگویی را با یک هالهٔ خاکستری زشت دورش منتشر کنید، و ناگهان انتخاب اهمیت پیدا میکند.
نکته این است: تصمیم واقعاً ساده است. به یک پرسش میرسد که حدود ده سال است میپرسمش، و حتی یکبار هم مرا ناامید نکرده.
آن یک پرسش
این تصویر از لبه ساخته شده، یا از نور؟
همین. متن، لوگو، آیکون، اسکرینشات، نمودار، هنر خطی، هر چیزی با مرزهای سخت و نواحی تخت رنگ — اینها لبه هستند. عکسها، گرادیانها، هر چیزی با تُنِ پیوستهٔ نرم و هزاران تغییر ظریف رنگ — اینها نور هستند.
لبهها PNG میخواهند. نور JPG میخواهد. تقریباً همهچیز از همین یک قاعده بیرون میآید.
چرا لبهها PNG میخواهند
PNG بدون اتلاف است. هر پیکسلی که ذخیره میکنید دقیقاً همان برمیگردد، برای همیشه، هر چند بار هم که دوباره بازش کنید. با پیدا کردن رشتههای رنگ یکسان فشرده میکند، که دقیقاً همان چیزی است که تصاویر لبهمحور از آن پُرند — یک دکمهٔ یکدست، یک پسزمینهٔ سفید، یک خط سیاه. PNG این را با اشتها میبلعد و تیز مثل تیغ میماند.
کانال آلفا هم دارد، پس میتواند واقعاً شفاف باشد. برای همین است که هر لوگویی که میخواهید روی یک پسزمینهٔ رنگی بگذارید باید PNG باشد. JPG اصلاً هیچ شفافیتی ندارد — آن نواحی را با سفید پُر میکند، و هالهٔ زشت از همینجا میآید.
حالت شکستش عکسهاست. عکسی را PNG ذخیره کنید و وظیفهشناسانه هر ذره نویز حسگر و هر ریزگرادیان را با وفاداری کامل ثبت میکند، و فایل باد میکند. PNG اسرافکار نیست چون بد است. اسرافکار است چون دربارهٔ جزئیاتی صادق است که چشم شما با خوشحالی از آن میگذشت.
چرا نور JPG میخواهد
JPG بااتلاف است. اطلاعاتی را دور میریزد که چشم شما در دیدنشان ضعیف است — تغییرات ریز رنگ، جزئیات پرفرکانس — و این کار را روی عکسها بهطرز چشمگیری خوب انجام میدهد. این دقیقاً همان چیزی است که یک عکس بهوفور دارد. نتیجه فایلی است به کسری از حجم، و نمیتوانید ببینید چه چیزی کم شده.
اما JPG را به سمت لبهها نشانه بگیرید، از هم میپاشد. آرتیفکتهای محو و مبهم دور مرزهای سخت — بهویژه دور متن — میمالد، چون لبههای تیز دقیقاً همان جزئیات پرفرکانسی هستند که برای دورریختنشان طراحی شده. یک اسکرینشات JPG از کد، دور هر حرف کمی کثیف به نظر میرسد. این ایراد مانیتور شما نیست. این قالبی است که روی ورودی اشتباه، طبق طراحیاش، کار میکند.
جدول حجمی که قال قضیه را میکَند
دو تصویر منبع یکسان، هر دو حالت با تنظیمات معقول ذخیرهشده:
| تصویر | بهصورت PNG | بهصورت JPG |
|---|---|---|
| یک عکس — 12 مگاپیکسل | حدود 14 MB | حدود 3 MB |
| یک اسکرینشات رابط کاربری با متن | حدود 600 KB | حدود 900 KB |
| یک لوگوی تخت دورنگ | حدود 20 KB | حدود 85 KB |
از هر دو جهت بخوانیدش. عکس بهصورت JPG نزدیک به 5 برابر کوچکتر است، بدون هیچ افت دیدنی. اما اسکرینشات و لوگو بهصورت JPG بزرگترند — و بدتر هم به نظر میرسند، با هاله و محوشدگی. قالبی که کوچکتر است بسته به آنچه در تصویر است کاملاً برعکس میشود. کل درس در سه سطر همین است.
موارد مرزی (فقط دو تا ارزش دانستن دارند)
شفافیت PNG را اجباری میکند. اگر هر بخشی از تصویر باید سرتاسرنما باشد، JPG بدون توجه به محتوا از دور خارج است، چون از نظر فیزیکی نمیتواند یک کانال آلفا ذخیره کند. حتی عکسی که روی یک پسزمینهٔ شفاف بریده شده باید PNG باشد (یا WebP).
متنرویعکس یک قضاوت است. عکسی با نوشتهای که رویش پخته شده بخشی نور است، بخشی لبه. اگر بیشترش عکس باشد سراغ JPG میروم و کمی نرمبودن متن را میپذیرم، یا PNG اگر متن باید تیز بماند و از پس حجمش برآیم. برندهٔ تمیزی نیست؛ انتخاب میکنید کدام عیب را ترجیح میدهید داشته باشید.
وقتی از قبل قالب اشتباه را دارید
بیشتر وقتها سر خروجی انتخاب نمیکنید — با فایلی گیر افتادهاید که کسی از قبل اشتباه ذخیرهاش کرده. یک عکاس PNGهای 14 مگابایتی دستتان داده. یک طراح لوگویی را بهصورت JPGِ هالهدار فرستاده. این فقط یک تبدیل است.
رفتن در جهت هوشمند — PNG به JPG برای عکسی که خیلی سنگین ذخیره شده — بردی روشن است، و همینجا در مرورگر شما اجرا میشود پس فایل هرگز دستگاهتان را ترک نمیکند. رفتن به جهت دیگر — JPG به PNG — صادقانه اما محدود است: فایل را از این پس بدون اتلاف میکند، که همان چیزی است که پیش از ویرایش میخواهید، اما نمیتواند آرتیفکتهایی را که JPG از قبل پخته زدوده کند. اتلاف دری یکطرفه است. تبدیل به PNG شما را از آن برنمیگرداند؛ فقط جلوی از دست دادن بیشتر را میگیرد.
آن یک پرسش را بپرسید — لبه یا نور — و اساساً هر بار درست خواهید بود. من هنوز سر هر خروجی میپرسمش. نیم ثانیه طول میکشد و مرا از کلی هالهٔ خاکستری نجات داده.
نوشتههای مرتبط
چرا PNG را به WebP تبدیل میکنم (و آن یک باری که نمیکنم)
PNG برای ویرایش قالبی درخشان است و برای انتشار قالبی پرخرج. اینجا میگویم WebP واقعاً چه چیزی برایتان صرفهجویی میکند، کجا هیچ صرفهای ندارد، و آن تکقاعدهای که هرگز نمیشکنم.
چرا عکسهای آیفون شما HEIC هستند (و کِی بهتر است JPG کنید)
HEIC واقعاً قالبی بهتر است که نیمی از وب هنوز نمیتواند بازش کند. اینجا میگویم چرا اپل سراغش رفت، با تبدیل به JPG واقعاً چه چیزی از دست میدهید، و کِی خودم زحمتش را به خود نمیدهم.
تبدیل تصویر داخل مرورگر واقعاً چطور کار میکند (و چرا اینطور ساختمش)
«فایلهای شما هرگز دستگاهتان را ترک نمیکنند» یک معماری است، نه یک جملهٔ تبلیغاتی. اینجا میگویم WASM چطور تبدیل را درست داخل مرورگر شما انجام میدهد، و آن یک محدودیت واقعی که دارد.
همهٔ نوشتهها