PNG או JPG? כלל האצבע בן עשר השנים שבו אני מחליט

PNG ו-JPG הם שתי תשובות ברירת המחדל ל"שמור את התמונה הזאת" כבר יותר מעשרים שנה, ורוב האנשים בוחרים ביניהם במקרה — מה שחלון הייצוא קבע כברירת מחדל. זה עובד עד היום שבו אתם שולחים למישהו צילום מסך של 9 MB במייל, או מפרסמים לוגו עם הילה אפורה מכוערת סביבו, ופתאום הבחירה משנה.

הנה העניין: ההחלטה באמת פשוטה. היא מסתכמת בשאלה אחת שאני שואל כבר בערך עשר שנים, והיא אף פעם לא אכזבה אותי.

השאלה האחת

האם התמונה הזאת עשויה מקצוות, או עשויה מאור?

זהו. טקסט, לוגואים, אייקונים, צילומי מסך, דיאגרמות, איורי קו, כל דבר עם גבולות חדים ואזורים שטוחים של צבע — אלה קצוות. תצלומים, מעברי צבע, כל דבר עם גוון רציף וחלק ואלפי מעברי צבע עדינים — אלה אור.

קצוות רוצים PNG. אור רוצה JPG. כמעט הכול נובע מזה.

למה קצוות רוצים PNG

PNG הוא lossless. כל פיקסל שאתם שומרים חוזר בדיוק, לתמיד, לא משנה כמה פעמים תפתחו אותו מחדש. הוא דוחס על ידי מציאת רצפים של צבע זהה, וזה בדיוק ממה שתמונות מבוססות-קצוות מלאות — כפתור אחיד, רקע לבן, קו שחור. PNG בולע את זה בקלות ונשאר חד כתער.

יש לו גם ערוץ אלפא, אז הוא יכול להיות שקוף באמת. לכן כל לוגו שאתם רוצים להניח על רקע צבעוני צריך להיות PNG. ל-JPG אין שקיפות בכלל — הוא ממלא את האזורים האלה בלבן, ומשם מגיעה ההילה המכוערת.

מצב הכשל הוא תצלומים. שמרו תצלום כ-PNG והוא יתעד בנאמנות כל גרגר רעש חיישן וכל מיקרו-מעבר במלוא הדיוק, והקובץ מתנפח. PNG לא בזבזני כי הוא גרוע. הוא בזבזני כי הוא כן לגבי פרטים שהעין שלכם הייתה סולחת עליהם בשמחה.

למה אור רוצה JPG

JPG הוא lossy. הוא זורק מידע שהעין שלכם גרועה בלהבחין בו — שינויי צבע דקים, פרטים בתדר גבוה — והוא עושה את זה מצוין על תצלומים. זה בדיוק החומר שיש לתצלום בשפע. התוצאה היא קובץ בשבריר מהגודל, ואתם לא רואים מה חסר.

תכוונו את JPG לקצוות, לעומת זאת, והוא מתפרק. הוא מורח ארטיפקטים מטושטשים סביב גבולות חדים — במיוחד סביב טקסט — כי קצוות חדים הם בדיוק הפרטים בתדר גבוה שהוא תוכנן לזרוק. צילום מסך JPG של קוד נראה מלוכלך מעט סביב כל אות. זה לא המסך שלכם. זה הפורמט עובד כמתוכנן על הקלט הלא נכון.

טבלת הגדלים שסוגרת את העניין

אותן שתי תמונות מקור, שמורות בשתי הדרכים בהגדרות שפויות:

תקראו אותה בשני הכיוונים. התצלום קטן כמעט פי 5 כ-JPG, בלי אובדן נראה לעין. אבל צילום המסך והלוגו גדולים יותר כ-JPG — והם גם היו נראים גרוע יותר, עם הילות וטשטוש. הפורמט שקטן יותר מתהפך לגמרי תלוי במה שיש בתמונה. זה כל הלקח בשלוש שורות.

מקרי הקצה (יש רק שניים ששווה להכיר)

שקיפות מכריחה PNG. אם חלק כלשהו בתמונה צריך להיות שקוף, JPG יורד מהשולחן ללא קשר לתוכן, כי הוא פשוט לא מסוגל פיזית לאחסן ערוץ אלפא. אפילו תצלום שנחתך על רקע שקוף חייב להיות PNG (או WebP).

טקסט-על-תצלום הוא שאלה של שיקול דעת. תצלום עם כיתוב צרוב בתוכו הוא חלק אור, חלק קצה. אני הולך על JPG אם זה בעיקר תצלום ומקבל טקסט מעט רך, או על PNG אם הטקסט חייב להישאר חד ואני יכול להרשות לעצמי את הגודל. אין מנצח נקי; אתם בוחרים איזה פגם אתם מעדיפים.

כשכבר יש לכם את הלא נכון

רוב הזמן אתם לא בוחרים בייצוא — אתם תקועים עם קובץ שמישהו כבר שמר לא נכון. צלם מסר לכם קובצי PNG של 14 MB. מעצב שלח לוגו כ-JPG עם הילה. זו פשוט המרה.

ללכת בכיוון החכם — PNG ל-JPG לתצלום שנשמר כבד מדי — זה ניצחון ברור, וזה רץ ממש בדפדפן כאן אז הקובץ לעולם לא עוזב את המכשיר. ללכת בכיוון השני — JPG ל-PNG — זה כן אבל מוגבל: זה הופך את הקובץ ל-lossless מכאן והלאה, וזה מה שאתם רוצים לפני עריכה, אבל זה לא יכול לבטל את הארטיפקטים שה-JPG כבר צרב. lossy הוא דלת חד-כיוונית. המרה ל-PNG לא מחזירה אתכם דרכה; היא רק עוצרת אתכם מלאבד עוד.

תשאלו את השאלה האחת — קצוות או אור — ותהיו צודקים בעצם כמעט תמיד. אני עדיין שואל אותה בכל ייצוא. זה לוקח חצי שנייה וזה חסך ממני הרבה הילות אפורות.