מפענח תמונות Base64 | פענוח ותצוגה מקדימה של תמונות באינטרנט

מהו מפענח תמונות ב־Base64?

מפענח תמונות ב־Base64 הוא כלי שהופך מחרוזת טקסט המקודדת ב־Base64 בחזרה לתמונה. Base64 היא שיטה לכתיבת נתונים בינאריים, כגון הבתים של קובץ תמונה, באמצעות 64 תווי טקסט פשוטים בלבד (אותיות, ספרות, +, / ו־= למילוי). דפדפנים, הודעות דוא״ל וממשקי API רבים מאחסנים תמונות באופן זה, כדי שתמונה תוכל לעבור בתוך טקסט פשוט במקום כקובץ נפרד. המפענח הופך את התהליך: מדביקים את המחרוזת, והתמונה המקורית מופיעה.

פורמט כתובת נתונים

באינטרנט, תמונת Base64 נכתבת בדרך כלל ככתובת נתונים. התבנית היא:

לדוגמה:

לכל חלק יש תפקיד:

• data: מסמן שמדובר בכתובת נתונים ולא בכתובת אינטרנט רגילה.
• image/png הוא סוג MIME, המציין לדפדפן באיזה סוג קובץ מדובר.
• ;base64 מציין שהנתונים שאחרי הפסיק מקודדים ב־Base64.
• כל מה שאחרי הפסיק הוא התמונה המקודדת עצמה.

כיצד המפענח פועל

הפענוח מתבצע בארבעה שלבים.

1. הכלי בודק אם המחרוזת מתחילה ב־data:. כתובת נתונים שמציינת סוג מדיה שאינו תמונה, כגון data:text/plain, נדחית מיד, משום שלא ניתן להציג אותה כתמונה.
2. הוא מסיר רווחים, טבלטורים ומעברי שורה, מכיוון שמחרוזות Base64 ארוכות נפרשות לפעמים על פני כמה שורות. מטען נתונים המשתמש בקידוד באחוזים במקום ב־Base64, שגם RFC 2397 מאפשר, מועבר ללא שינוי.
3. הוא מפענח את טקסט ה־Base64 בחזרה לבתים גולמיים.
4. הוא בוחן את הבתים הראשונים של התוצאה. כל פורמט תמונה נפוץ מתחיל ברצף בתים קבוע, הנקרא חתימה או ״מספר קסם״. קובצי PNG מתחילים ב־89 50 4E 47, קובצי JPEG מתחילים ב־FF D8 FF וכן הלאה. המפענח משווה את החתימות ומסמן את התמונה בסוג שאותו הן מזהות.

הבתים גוברים על התווית. אם כתובת נתונים מציינת data:image/png אך הבתים מתחילים ב־FF D8 FF, המפענח בונה מחדש את הכתובת כ־data:image/jpeg, כך שהמחרוזת שמספק כפתור ״העתקת כתובת URL של התמונה״ לעולם אינה מתארת באופן שגוי את התוכן שלה.

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

SVG מטופל אחרת, מכיוון ש־SVG הוא פורמט טקסט (XML) ולא פורמט בינארי, ולכן אין לו חתימת בתים קבועה. המפענח בודק את 1024 הבתים הראשונים של הטקסט המפוענח, בחיפוש אחר תג <svg, הצהרת XML כגון <?xml version="1.0"?> שאחריה מופיע תג כזה, או הצהרת סוג מסמך של SVG שאחריה מופיע תג כזה. סמן סדר הבתים בתחילת הקובץ, שחלק מהעורכים מוסיפים לקובצי UTF-8, אינו נלקח בחשבון. מכיוון שלא ניתן לזהות SVG לפי חתימת בתים, כתובת נתונים שמצהירה על image/svg+xml שומרת על הסוג שהצהירה עליו.

נוסחה לגודל תמונת Base64

Base64 הופכת כל 3 בתים של נתונים בינאריים ל־4 תווי טקסט. הנוסחה לאורך המקודד היא:

הסמלים ⌈ ⌉ פירושם ״עיגול כלפי מעלה למספר השלם הבא״, מכיוון ש־Base64 פועלת תמיד בקבוצות של 4 תווים וממלאת קבוצה חלקית בסימני =.

עבור קבצים גדולים, התוצאה היא גידול של כ־33% בגודל, מכיוון ש־4 ÷ 3 ≈ 1.33. בקבצים קטנים עשוי להופיע גידול גדול יותר באחוזים, משום שהעיגול כלפי מעלה לקבוצה הבאה של 4 תווים משמעותי יותר כאשר מלכתחילה יש מעט נתונים.

דוגמה פתורה

דוגמת ה־PNG שלעיל מפוענחת ל־85 בתים של נתוני תמונה. לפי הנוסחה:

מחרוזת ה־Base64 אכן מכילה 116 תווים, בהתאם לחישוב. מדובר בגידול של 36% לעומת 85 הבתים המקוריים (116 ÷ 85 ≈ 1.36), מעט מעל הנתון של 33%, משום שהקובץ קטן כל כך.

פורמטים נתמכים של תמונות

המפענח קורא את חתימת הבתים של הנתונים המפוענחים כדי לזהות את הפורמט. הוא מזהה את הסוגים האלה:

כיצד לפענח תמונת Base64

1. העתיקו את מחרוזת ה־Base64, עם הקידומת data:image/... או בלעדיה, מ־HTML, מ־CSS, מתגובת API או מהודעת דוא״ל.
2. הדביקו אותה בתיבת הקלט.
3. התמונה מפוענחת באופן אוטומטי רגע לאחר הפסקת ההקלדה, או בלחיצה על כפתור הפענוח.
4. התמונה המפוענחת מופיעה באזור התצוגה המקדימה. אפשר להעתיק את כתובת הנתונים שלה באמצעות כפתור ״העתקת כתובת URL של התמונה״, ולשמור את התמונה עצמה באמצעות לחיצה ימנית עליה בתצוגה המקדימה ובחירה בשמירת התמונה, מכיוון שהיא מוצגת כרכיב תמונה רגיל בדפדפן.

שימושים נפוצים בתמונות Base64

• הטמעה ב־HTML, ב־CSS או ב־JavaScript: הכנסת נתוני התמונה ישירות לקוד מונעת בקשה לקובץ נפרד.
• תבניות דוא״ל: חלק מלקוחות הדוא״ל חוסמים כברירת מחדל תמונות המקושרות מבחוץ, אך תמונת Base64 מוטמעת עדיין מוצגת.
• כלי HTML בקובץ יחיד: דף שלם, כולל התמונות שלו, יכול להישלח כקובץ עצמאי יחיד.
• תגובות API: תמונה יכולה לעבור בתוך מטען JSON במקום לדרוש נקודת קצה משלה.
• רקע ואייקונים ב־CSS: אייקונים קטנים נכתבים לפעמים ישירות בגיליון סגנונות ככתובת נתונים.

פשרות בשימוש בתמונות Base64

קידוד Base64 נוח, אך אינו חינמי:

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

שאלות נפוצות

מהו מפענח תמונות ב־Base64?

זהו כלי שממיר מחרוזת טקסט המקודדת ב־Base64 בחזרה לתמונה שניתן להציג, כגון קובץ PNG, JPEG, GIF, WebP, BMP או SVG.

כיצד מפענחים תמונת Base64?

הדביקו את מחרוזת ה־Base64, עם הקידומת data:image/... או בלעדיה, במפענח. הוא יקרא את המחרוזת, יפענח אותה ויציג את התמונה שהתקבלה.

האם אפשר לפענח מחרוזת Base64 ללא הקידומת של כתובת הנתונים?

כן. המפענח מתייחס אליה כאל נתוני Base64 גולמיים, מפענח את הבתים וקורא את הבתים הראשונים כדי לזהות את הפורמט לפי החתימה שלו, כגון PNG, JPEG, GIF, WebP, BMP או ICO. SVG מזוהה באמצעות חיפוש תג <svg בטקסט המפוענח. אם אף אחת מהחתימות אינה תואמת, המפענח מדווח שהמחרוזת אינה נראית כתמונה במקום לנחש פורמט.

מדוע תמונת ה־Base64 שלי אינה מתפענחת?

שלוש סיבות מכסות את רוב המקרים. המחרוזת עשויה להכיל תווים שאינם חלק מאלפבית ה־Base64 הסטנדרטי, שהוא A–Z, a–z, 0–9, +, / ו־=; וריאנט base64url, המשמש בכמה אסימוני אינטרנט, כותב במקומם - ו־_, ואינו מתקבל. ייתכן שהמחרוזת נקטעה באמצע, כך שאורכה גדול באחד ממספר המתחלק בארבע, מצב שאינו קיים באף מחרוזת Base64 תקפה. לחלופין, ייתכן שהבתים פשוט אינם שייכים לאחד מפורמטי התמונות הנתמכים. היעדר מילוי = כשלעצמו אינו בעיה, ורווחים ומעברי שורה מוסרים לפני הפענוח.

האם קידוד Base64 הוא סוג של אבטחה או הצפנה?

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

בכמה מחרוזת Base64 גדולה יותר מהתמונה המקורית?

בערך בשליש עבור קבצים גדולים, מכיוון שכל 3 בתים של הנתונים המקוריים הופכים ל־4 תווי טקסט. תמונה בגודל 100 KB הופכת לכ־133 KB לאחר הקידוד. בתמונות קטנות עשוי להופיע גידול מעט גדול יותר באחוזים בגלל העיגול.

היסטוריה

Base64 התפתחה משיטות קידוד שנבנו בשנות ה־1970 וה־1980 להעברת נתונים בינאריים במערכות דואר שטיפלו רק בטקסט פשוט. השיטות קיבלו ניסוח רשמי לדוא״ל ב־RFC 989 (1987), ובהמשך ב־RFC 1421. השימוש בהטמעת תמונות בדפי אינטרנט התאפשר לאחר שהוגדרה סכמת כתובות ה־URL מסוג data: ב־RFC 2397 (1998), והיא נעשתה נפוצה יותר באמצע שנות ה־2000, כאשר מפתחים חיפשו דרכים לצמצם בקשות HTTP נפרדות, במיוחד בחיבורי סלולר איטיים.

מקורות

1. RFC 4648: קידודי הנתונים Base16, Base32 ו־Base64
2. RFC 2397: סכמת כתובות ה־URL מסוג ״data״
3. תיעוד האינטרנט של MDN: כתובות נתונים
4. תקן WHATWG לזיהוי סוג MIME