התוצאות מוצגות לצורכי מידע בלבד ועשויות להכיל שגיאות. מומלץ לאמת מידע חשוב באופן עצמאי. השימוש בכלי הוא באחריותכם בלבד.
מה הכלי עושה
הכלי הופך קובץ תמונה ל־data URL: שורת טקסט אחת שמתחילה ב־data:image/png;base64, (או בסוג של הקובץ שלכם) ואחריה הבייטים של התמונה בקידוד Base64. בחרו קובץ PNG, JPG, GIF, SVG, WebP או כל תמונה אחרת, והטקסט יופיע עם תצוגה מקדימה, מוכן להעתקה.
הקובץ נקרא עם ה־FileReader של הדפדפן, כך שהוא אף פעם לא מועלה. אפשר להשתמש ב־data URL בכל מקום שבו עובדת כתובת תמונה רגילה: ב־<img src>, ב־CSS עם background-image: url(...), ב־payload של JSON או בתבנית אימייל. Base64 מגדיל את הנתונים בכשליש לעומת הקובץ המקורי, ולכן הוא מתאים בעיקר לתמונות קטנות.
מתי להשתמש בו
- להטמיע אייקון או לוגו קטן ב־CSS כדי שהדף יבצע בקשה אחת פחות.
- לשים תמונה בתוך קובץ HTML יחיד ועצמאי, כמו דוח או הדגמה.
- לשלוח תמונה בבקשת JSON ל־API שלא מקבל העלאות multipart.
- להוסיף תמונה מוטמעת לחתימת אימייל ב־HTML או ל־fixture של בדיקות.
דוגמה
קלט
pixel.png (1 × 1 px, כחול, 69 בייטים)פלט
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCשאלות על הכלי
למה טקסט ה־Base64 גדול יותר מהתמונה שלי?
Base64 כותב כל 3 בייטים כ־4 תווי טקסט, כך שהתוצאה גדולה בכ־33% מהקובץ. תמונה של 30 KB הופכת לכ־40 KB של טקסט. דחיסת Gzip או Brotli בשרת מחזירה חלק מההפרש.
מתי לא כדאי להטמיע תמונה?
הימנעו מזה בתמונות גדולות ובתמונות שמופיעות בדפים רבים. קובץ תמונה רגיל נשמר במטמון של הדפדפן פעם אחת, בעוד שתמונה מוטמעת יורדת מחדש עם כל קובץ HTML או CSS שמכיל אותה.
איך משתמשים בתוצאה ב־CSS?
עטפו אותה ב־url(): background-image: url("data:image/png;base64,...");. לאייקוני SVG, קובץ SVG בקידוד URL קטן לרוב מ־Base64, והדף קידוד URL יכול להכין אותו.
איך הופכים Base64 חזרה לתמונה?
הדביקו את ה־data URL המלא בשורת הכתובת של הדפדפן ושמרו את התמונה, או פענחו את החלק שאחרי הפסיק עם פענוח Base64 אם צריך את הבייטים הגולמיים.
האם הכלי חינמי?
כן, השימוש חינמי. בלי הרשמה ובלי אימייל. התוצאה מופיעה בדף הזה.
איך מקבלים את התוצאה?
משתמשים בכלי בדף הזה. התוצאה מופיעה כאן, בלי צורך במשלוח לאימייל.