ממיר תמונה ⇔ Base64

המר בין קובצי תמונה ל-Base64 (Data URI)

קודד תמונות ל-Base64 Data URI או פענח מחרוזות Base64 בחזרה לתמונות. תומך בפורמטים PNG, JPEG, GIF ו-WebP. פעולת גרירה ושחרור קלה. כל העיבוד מתבצע בדפדפן שלך - לא נשמרים או מועברים נתונים.

איך להשתמש

המר ב-3 שלבים פשוטים:

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

הגנת פרטיות: כל העיבוד מתבצע בדפדפן שלך. נתוני התמונה לעולם אינם נשלחים או נשמרים בשרת כלשהו.

ממיר תמונה ⇔ Base64

📁

גרור ושחרר קובץ תמונה כאן, או לחץ כדי לבחור

פורמטים נתמכים: PNG, JPEG, GIF, WebP, SVG (מומלץ מקסימום 10MB)

תצוגה מקדימה

שם הקובץ

גודל הקובץ

ממדים

פורמט

תוצאה מקודדת Base64 (Data URI)

הזן מחרוזת Base64

תצוגה מקדימה

מקרי שימוש מעשיים להמרת תמונה ל-Base64

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

1. הטמעת תמונות ב-HTML או CSS

הטמע סמלים קטנים או תמונות לוגו ישירות בתגי <img> של HTML או במאפייני background-image של CSS כדי להפחית בקשות HTTP ולשפר את מהירות טעינת הדף. שימושי במיוחד כחלופה לגופני סמלים (Icon Fonts).

2. אלטרנטיבה ל-CSS sprites

במקום לשלב מספר תמונות קטנות לקובץ 'CSS sprite' יחיד, קודד כל תמונה ל-Base64 והטמע ב-CSS לניהול קל יותר.

3. הטמעת תמונות בהודעות דוא"ל HTML

חלק מלקוחות הדוא"ל חוסמים טעינת תמונות חיצוניות. הטמעת תמונות חשובות (כגון סמלי לוגו) כ-Data URIs מבטיחה שהן יוצגו בצורה אמינה.

4. העברת תמונות באמצעות REST API

בעת שליחה/קבלה של נתוני תמונה באמצעות JSON API, קידוד Base64 מאפשר טיפול בנתונים בינאריים כפורמט טקסט. העבר תמונות בפורמט JSON פשוט ללא תקשורת מרובת חלקים.

5. יישומים לא מקוונים

ב-Progressive Web Apps (PWA) או יישומי Electron, הטמעת תמונות מקודדות Base64 ב-HTML מבטיחה שהתמונות יוצגו באופן אמין גם בסביבות לא מקוונות.

6. פיתוח אפליקציות מובייל

שימוש בתמונות מקודדות Base64 במסגרות (frameworks) חוצות פלטפורמות כמו React Native, Ionic ו-Flutter מאחד את הטיפול בתמונות בכל הפלטפורמות.

מהו Data URI? הבנת המנגנון

Data URI (הנקרא גם Data URL) הוא סכמת URL המאפשרת הטמעת קבצים קטנים כמו תמונות או גופנים ישירות ב-HTML או CSS. הוא ממיר את תוכן הקובץ לטקסט באמצעות קידוד Base64 ומייצג אותו כחלק מכתובת URL.

פורמט Data URI

Data URI נכתב בפורמט הבא:

data:[סוג MIME];[שיטת קידוד],[נתונים מקודדים]

דוגמה (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

יתרונות Data URI

בקשות HTTP מופחתות: אין צורך בבקשות קובץ חיצוניות, מה שמשפר את מהירות טעינת הדף
אריזת קובץ יחיד: שלם בתוך קובץ HTML או CSS יחיד להפצה וניהול קלים
תצוגה אמינה: מונע קישורים שבורים או חסימה של תמונות חיצוניות

חסרונות Data URI

גודל קובץ מוגדל: קידוד Base64 מגדיל את גודל הנתונים בכ-33%
יעילות מטמון נמוכה יותר: עדכון תמונות דורש הורדה מחדש של כל קובץ ה-HTML/CSS
קריאות מופחתת: קוד המקור הופך ארוך וקשה יותר לתחזוקה

שיטות עבודה מומלצות

מתי להשתמש ב-Data URI

✅ סמלים או סמלי לוגו קטנים (מומלץ 5KB או פחות)
✅ תמונות דקורטיביות בשימוש תכוף (רקעים לכפתורים וכו')
✅ תמונות חשובות הדורשות תמיכה לא מקוונת

מתי לא להשתמש ב-Data URI

❌ תמונות גדולות (10KB+): גודל הקובץ הופך נפוח
❌ תמונות שמתעדכנות לעתים קרובות: יעילות מטמון ירודה
❌ תמונות בשימוש חוזר במספר דפים: הטמעה כפולה בכל דף

⚠️ באופן כללי, מומלץ להשתמש ב-Data URI עבור תמונות קטנות (5KB או פחות). עבור תמונות גדולות יותר, תגי <img> סטנדרטיים או טעינת קבצים חיצוניים יעילים יותר.

שאלות נפוצות (FAQ)

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

ניתן להמיר את כל פורמטי התמונה הנתמכים על ידי הדפדפן, כולל PNG, JPEG, GIF, WebP ו-SVG. PNG ו-JPEG הם הנפוצים ביותר.

האם יש מגבלת גודל להמרת תמונה?

אין מגבלה טכנית, אך מטעמי ביצועים וזיכרון הדפדפן מומלץ 10MB או פחות. בפועל, תמונות של 5KB או פחות הן היעילות ביותר.

בכמה גדל גודל התמונה עם קידוד Base64?

קידוד Base64 מגדיל את גודל הקובץ לכ-133% מהמקור (עלייה של כ-33%). לדוגמה, תמונה בגודל 9KB הופכת למחרוזת Base64 של כ-12KB.

האם ניתן להמיר תמונות PNG שקופות ל-Base64?

כן, ניתן להמיר תמונות PNG שקופות כפי שהן. מידע השקיפות נשמר, כך שהן מוצגות כראוי עם שקיפות כאשר הן מוטמעות ב-HTML או CSS.

כיצד להטמיע מחרוזת Base64 ב-HTML?

הדבק ישירות במאפיין src של תג <img>. דוגמה: <img src="data:image/png;base64,iVBORw0KG...">

כיצד להשתמש בתור background-image ב-CSS?

הדבק בתוך פונקציית url() באופן הבא: background-image: url('data:image/png;base64,iVBORw0KG...');

האם התמונות שהועלו נשמרות בשרת?

לא, כל העיבוד מתבצע בדפדפן שלך. נתוני התמונה לעולם אינם מועברים לשרת כלשהו.

האם אוכל להשתמש בכלי זה עבור אתרים מסחריים?

כן, כלי זה הוא חינמי לחלוטין וניתן להשתמש בו בחופשיות למטרות מסחריות ובלתי מסחריות כאחד.