מהפכת ה-PNG

גוגל שינו את עיצוב המודעות שלהם, ולראשונה משתמשים בתמונה בפורמט png (חנן כהן הרוס). הפורמט הזה לא חדש, ורבים עוברים לשימוש בו. הפוסט הזה יתן סקירה קצרה: מה זה png, למה זה טוב, ומתי כדאי להשתמש בו?

הכל התחיל בפורמט המוכר לכולנו – GIF. תחילתו ב-1987 בשירות המקוון הפופולרי CompuServe, שנתן פורומים ואימייל לפני היות האינטרנט פתוחה לציבור. כשהרשת פרצה לעולם ודפדפנים כמו Mosaic התחילו להיכנס לשימוש, GIF היה בחירה טבעית לתמונות בדפים שברשת. אבל בגלל שאלגוריתם הדחיסה (LZW) היה מוגן בפטנט, התחילו להתהוות בעיות כתוצאה מתאוות הבצע של בעלי הפטנט. אז נולד הפורמט המחליף – PNG.

האגדה מספרת שראשי התיבות המקוריים היו PNG's not GIF אבל כיום מקובל שהם Portable Network Graphics. הפורמט החדש מתגבר על שתי הבעיות העיקריות של פורמט ה-GIF הישן:

  • GIF יכול לאכסן רק 256 צבעים (8 סיביות לפיקסל). PNG מגיע ל-16 מיליון (24 סיביות).
  • הדחיסה של GIF מוגנת בפטנט (שבינתיים הספיק לפקוע). PNG משתמש באלגוריתם משופר בהרבה – וחופשי.

בנוסף תומך פורמט ה-PNG החדש בשקיפות חלקית או מלאה של אזורים שונים של התמונה – alpha channel (אינטרנט אקספלורר 6 כושל בתמיכה בזה). על יכולות האנימציה של ה-GIF ויתרו – והעבירו לפורמט-אח של PNG שנקרא MNG.

לרשותנו, אם כן, שני פורמטים מודרניים לקבצים גרפיים: PNG ו-JPEG. מתי משתמשים בכל אחד מהם?

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

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

11 תגובות בנושא “מהפכת ה-PNG”

  1. GIF היה פשוט מתאר את התמונה, לכן היה מתאים לשרטוטים שבהם הוא יכול להגיד "עכשיו יש 2000 פיקסלים לבנים".

    PNG גם עושה את זה בשיטה הזו, או שהוא הולך בכיוון של JPEG?

    ר"ש: ב-GIF מגדירים את אחד הצבעים כ-"שקוף", ואז בכל מקום בו הוא מופיע, פשוט לא מציירים כלום והרקע נשאר. ב-PNG יש פשוט תמונה נוספת בגווני אפור, חופפת לתמונה שרוצים להציג. כשמציירים את התמונה (מחוסר תרגום עברי ל-render) בודקים את התמונה האפורה. ככל שהפיקסל המקביל כהה יותר, כך יראו את התמונה יותר, וככל שהוא בהיר יותר, יראו יותר את הרקע.

  2. חבר שלי ניסה להסביר לי פעם את העניין של הדחיסה וההבדל בין GIF ל-JPEG. הוא אמר ש-JPEG מניח תמונה "טבעית", כלומר כזו שבה הצבעים אף פעם לא מובחנים לגמרי, אלא (כמו במציאות) משתלבים אחד בתוך השני במקומות המפגש ביניהם. הוא תיאר את זה כמו גרף פעמון, כשה"זנבות" הם צבעים טהורים, והבאמצע זה נקודת המפגש ביניהם, איפה שהם מעורבבים קצת. JPEG לוקח את הגרף הזה ומניח שהוא קיים שם בלי הוא יצטרף לקודד כל פיקסל, ולכן יכול לחסוך הרבה מקום בלי לאבד את האמיתיות של התמונה. אבל כשהוא צריך להתמודד עם תמונה "לא טבעית" – כמו עמוד טקסט, הוא עדיין מניח שקיים הגרף הזה למרות שהוא לא אומר להיות שם, והתוצאה היא הפיזור המוכר של פיקסלים רנדומליים כמעין "ענן" מסביב לכל אות.

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

    תמיד חשבתי שזה הסבר מאוד מוצלח (היי, אם זה גרם לי להבין משהו, אפילו אם ברמת הפשטה גבוהה, זה כבר הסבר מצויין) אז חשבתי לתרום אותו לדיון.

    ר"ש: הסבר מצוין, שחסר בו עניין בסיסי לשם הבהירות: PNG (ורוב הפורמטים הגרפיים: GIF, BMP וכו') מכיל מפה של פיקסלים, כל אחד והצבע שלו. אחרי שהמפה מוכנה דוחסים אותה לשם חסכון במקום, באלגוריתם כלשהו (תחשוב ZIP). לעומת זאת, JPEG לא מכיל מפה כזו, אלא פרמטרים לתיאור מפגשי הצבעים כפי שהסברת בתגובה; זו למעשה לא דחיסה אלא שמירה של מידע אחר, שממנו אפשר לשחזר תמונה הדומה מאוד למקור. כאמור, השיטה הזו מוצלחת בצילומים, שם המעבר בין צבעים שונים הוא תמיד הדרגתי; במקרים אחרים, נוצרים רעשים בתמונה, המכונים artefacts.

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

    (הייתי אומרת שאני גולש בשואש, אבל אתה רואה את זה כבר, כך שזו לא שקיפות שאיכספלורר לא תומך בה, אם להיות קשורים לנושא הפוסט).

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *