למה אני ממיר PNG ל-WebP (ומתי דווקא לא)
Dov Azencot
@DovAzencotיש לי על שולחן העבודה תיקייה בשם to-shrink. במשך שנים זה היה המקום שאליו צילומי מסך הלכו למות — קבצי PNG של 2 MB של דשבורדים ומוקאפים חצי-גמורים, שהייתי שולח במייל לאנשים שממש, אבל ממש, לא היו צריכים 2 MB מהמסך שלי. אחר צהריים אחד פתחתי סוף סוף את התיקייה ועשיתי את החשבון: היא הייתה גדולה יותר מהאפליקציה שהעליתי לאוויר באותו שבוע. זה הדבר השקט ב-PNG. פורמט נהדר שמבזבז כמות מטורפת של מקום, ורובנו בכלל לא שמים לב, כי רוחב פס עולה גרושים והקובץ "נפתח בסדר".
אז תנו לי לטעון את הטענה שהייתי שמח שמישהו יטען בפניי הרבה קודם. אם PNG בדרכו לאתר — לכל מקום שבו הולכים להסתכל עליו ולא לערוך אותו — כמעט תמיד עדיף שהוא יהיה WebP במקום.
במה PNG באמת טוב
PNG הוא lossless. כל פיקסל שאתם מכניסים חוזר החוצה, בדיוק, בכל פעם. זו מעלה אמיתית — בשביל קובץ מקור. לכן כלי העיצוב שלכם מייצא PNG, לכן צילומי מסך הם PNG, לכן כל דבר עם קצוות חדים ושקיפות פונה אליו. lossless אומר שאפשר לפתוח, לשנות, ולשמור מחדש מאה פעמים בלי לפגום בכלום.
הבעיה היא ש"לשמור כל פיקסל בשלמות" זו הבטחה שמשלמים עליה בבייטים. שמרו תצלום כ-PNG, והוא יתעד בנאמנות מעברי צבע, רעש חיישן, וניואנסים של גוון שהעין שלכם לעולם לא תתגעגע אליהם אם רק יקורבו בערך. אתם משלמים מחיר מלא על פרטים שאף אחד לא רואה.
מה ש-WebP עושה ו-PNG לא יכול
WebP היה התשובה של Google לשאלה פשוטה: מה אם פשוט נבנה פורמט טוב יותר? הוא עושה שני דברים ש-PNG לא מסוגל להם. הוא יכול לדחוס באובדן כשרוצים — לזרוק את הדברים הבלתי-מורגשים כמו ש-JPEG עושה, רק בחוכמה — ותוך כדי לשמור על ערוץ אלפא מלא. החלק השני הוא הנס השקט. במשך שנים העסקה הייתה "שקיפות או קובץ קטן, תבחרו אחד". WebP הוא גם וגם, בו-זמנית.
בפועל, המרה של PNG עשיר בתצלומים או בצילומי מסך באיכות שפויה יורדת לאנשהו בין 60% ל-90% במשקל. לא 10%. צילום מסך של 1.8 MB הופך לבערך 250 KB, ואם תשימו אותם זה לצד זה לא תדעו מי מי. עשיתי את הניסוי הזה על עצמי יותר פעמים משנעים לי להודות, בטוח שהפעם אתפוס את ה-WebP בקלקלתו. אף פעם לא תפסתי.
ההשוואה שהפכה אותי למאמין
מספרים גסים מאצווה שהמרתי בחודש שעבר:
| PNG מקורי | כ-WebP |
|---|---|
| צילום מסך של ממשק — 1.8 MB | ~240 KB |
| תמונת נושא — 3.1 MB | ~380 KB |
| לוגו שטוח בשני צבעים — 42 KB | ~30 KB |
תסתכלו על הלוגו. הוא כמעט לא זז — וזו בדיוק הערת השוליים שחשובה.
מתי אני לא טורח להמיר
גרפיקה פשוטה — צבעים שטוחים, קומץ מהם, קצוות חדים — היא בדיוק מה ש-PNG נבנה לדחוס, והוא עושה את העבודה בערך כמו כל אחד אחר. אייקון בשני צבעים, דיאגרמת קו, קוד QR: תשאירו אותם PNG, או עוד יותר טוב, שלחו אותם כ-SVG אם יש לכם את הווקטור. WebP לא יזיק לקבצים האלה, אבל גם לא ממש יעזור, ורק הוספתם שלב סתם.
הפעם השנייה שבה אני לא ממיר היא קובץ המקור. אני לעולם לא נוגע בעותק היחיד של משהו. מצב ה-lossy של WebP הוא דלת חד-כיוונית: את הפרטים שזרקתם, לא מקבלים בחזרה. אז הנה הכלל האחד שאני אף פעם לא שובר — תמירו את העותק שאתם מפרסמים, שמרו את המקור במקום שבו אתם עורכים. אצלי במחשב זה מילולית שני קבצים: ה-PNG נשאר בתיקיית הפרויקט, ה-WebP הולך לאתר. ביטוח זול, ואף פעם לא התחרטתי עליו.
"אבל זה באמת עובד בכל מקום?"
זו הייתה פעם ההתנגדות האמיתית, ופשוט כבר לא. כל דפדפן שאנשים באמת משתמשים בו תומך ב-WebP בערך מאז 2020 — Chrome, Safari, Firefox, Edge, כולם. תוכנות מייל עדיין לא עקביות, וכמה תוכנות ארגוניות ישנות מוזרות עם זה, אז לניוזלטר אני עדיין אפנה ל-JPEG. אבל בשביל הרשת הפתוחה? להגיש WebP בלי גיבוי הפסיק להיות מהלך אמיץ כבר לפני שנים.
איך הייתי עושה את זה בפועל
הסיבה הכנה שבנֵיתי את ממיר ה-PNG-ל-WebP באתר הזה היא שנמאס לי לגרור צילומי מסך לכלים אקראיים ברשת כדי לכווץ אותם, בלי לדעת בדיוק לאן הקבצים שלי הגיעו אחר כך. אז הגרסה שהייתי ממליץ עליה היא המשעממת והפרטית: תמירו על המכונה שלכם, בדפדפן, במקום שבו הקובץ בכלל לא עוזב את המכשיר. תזרקו את קבצי ה-PNG פנימה, תראו את עמודת המשקל צונחת, תורידו את ה-WebP.
אבל הכלי הוא לא העיקר. העיקר הוא ההרגל. ברגע ש"PNG לעריכה, WebP להפצה" הופך לאוטומטי, אתם מפסיקים לשלוח לאנשים צילומי מסך של 2 MB, העמודים שלכם נהיים מהירים יותר בחינם, והתיקייה to-shrink הזאת על שולחן העבודה סוף סוף נשארת ריקה. שלי ריקה, כבר בערך שנה. ניצחון קטן — אני אקח אותו.
כתבות קשורות
למה צילומי המסך שלכם שוקלים 2 MB, ואיך לכווץ אותם ב-60–90%
לצילום מסך של דשבורד כמעט ריק אין שום סיבה לשקול 2 MB. הנה למה PNG עושה לכם את זה, ואיך המרה ל-WebP גוזרת 60–90% בלי שום דבר נראה שאובד.
AVIF מול WebP — הקובץ הקטן יותר הוא לא תמיד הנכון
AVIF בדרך כלל מנצח את WebP בגודל, לפעמים ב-20% ומעלה. הנה מה שהדחיסה הנוספת עולה לכם בזמן קידוד ובמקרי קצה, ומתי אני עדיין פונה ל-WebP.
PNG או JPG? כלל האצבע בן עשר השנים שבו אני מחליט
Lossless מול lossy, קצוות מול תצלומים, שקיפות מול כלום. שאלה פשוטה אחת אומרת לכם איזה פורמט הקובץ צריך להיות — עם טבלת גדלים אמיתית שמוכיחה זאת.
כל הפוסטים