המרת תמונה ל-Base64
ממירים תמונה למחרוזת Base64 בפורמט Data URI, להטמעה ישירה ב-HTML או ב-CSS. בלי הרשמה והתמונה לא עולה לשרת.
כלי נוסף להמשך
נבחרו להמשך העבודה עם הכלי הזהכלי להמרת תמונה למחרוזת Base64 בפורמט Data URI, ישירות בדפדפן. Data URI מקודד את כל התמונה כטקסט, כך שאפשר להדביק אותו ישירות לתוך HTML או CSS ולוותר על בקשת רשת נפרדת לקובץ. הכלי עובד עם PNG, JPG, WebP, GIF ו-SVG. קידוד Base64 מגדיל את הנתונים בכשליש, ולכן הוא מתאים בעיקר לתמונות קטנות כמו אייקונים וגרפיקה משובצת. הכול מתבצע מקומית במכשיר שלכם, בלי העלאה לשרת.
איך משתמשים בכלי?
- 01בחרו תמונהגוררים תמונה לאזור ההעלאה, או לוחצים לבחירה מהמכשיר. עד 10MB.
- 02העתיקו את ה-Data URIהכלי מקודד את התמונה ומציג את המחרוזת, וגם קטע HTML וקטע CSS מוכנים להעתקה.
- 03הדביקו בקודמשתמשים במחרוזת כ-src של תגית img, כרקע ב-CSS, או בכל מקום שמצפה לכתובת תמונה.
מתי זה שימושי?
- אייקונים קטנים בתוך הקודאייקון של כמה מאות בתים משובץ ישירות ב-CSS חוסך בקשת רשת שלמה מול השרת.
- תבניות מיילחלק ממערכות הדיוור מקבלות Data URI, מה שמונע תלות בקובץ תמונה חיצוני שעלול להיחסם.
- קובץ HTML יחידבניית דף או דוח שנשלח כקובץ אחד, בלי תיקיית תמונות נלווית שעלולה ללכת לאיבוד.
דוגמאות שימוש
- אייקון כרקע ב-CSSממירים אייקון PNG קטן ומדביקים את המחרוזת בתוך background-image, בלי קובץ נפרד.
- לוגו בתוך HTMLמשבצים את הלוגו ישירות ב-src של תגית img, כך שהדף עומד בפני עצמו.
- בדיקה מהירהצריך תמונה זמינה מיד בתוך קוד לדוגמה או ב-CodePen, בלי להעלות אותה לשום מקום.
טיפים לתוצאה טובה יותר
- מתאים לתמונות קטנותBase64 מנפח את הנתונים בכשליש. לתמונות גדולות עדיף להישאר עם קובץ רגיל וכתובת URL.
- אין מטמון נפרדתמונה משובצת נטענת מחדש עם כל דף שמכיל אותה, בעוד קובץ חיצוני נשמר במטמון הדפדפן פעם אחת.
- דחסו לפני הקידודכדאי לדחוס או להקטין את התמונה לפני ההמרה, כי המחרוזת תהיה ארוכה יותר מהקובץ עצמו.
מה זה Data URI
Data URI הוא כתובת שמכילה את הנתונים עצמם במקום להפנות לקובץ. היא מתחילה ב-data:, ממשיכה בסוג התוכן, למשל image/png, ואז במחרוזת Base64 שמקודדת את הבתים של התמונה. הדפדפן מפענח את המחרוזת ומציג את התמונה בדיוק כאילו הגיעה מהשרת.
מתי זה משתלם ומתי לא
השיקול המרכזי הוא גודל. שיבוץ חוסך בקשת רשת, וזה משמעותי כשמדובר באייקון זעיר שאחרת היה דורש פנייה נפרדת לשרת. מנגד, המחרוזת גדולה בכשליש מהקובץ המקורי, היא נכנסת לתוך קובץ ה-HTML או ה-CSS ומנפחת אותו, והיא לא נשמרת במטמון בנפרד. ככלל אצבע: עד כמה קילובייט שיבוץ הגיוני, ומעבר לכך עדיף קובץ רגיל.
פורמטים נתמכים
הכלי מקבל PNG, JPG, WebP, GIF ו-SVG. שימו לב ש-SVG הוא ממילא טקסט, ולכן במקרים רבים פשוט להדביק את קוד ה-SVG עצמו יעיל יותר מלקודד אותו ל-Base64.
פרטיות ועיבוד מקומי
התמונה נקראת ומקודדת בדפדפן שלכם בלבד. היא לא מועלית לשרת ולא נשמרת אצלנו, וסגירת הלשונית מנקה הכול.
שאלות נפוצות
מה זה Data URI?
מחרוזת טקסט שמקודדת את התמונה כולה ומתחילה ב-data:image, ומשמשת במקום כתובת של קובץ תמונה.
האם התמונה נשלחת לשרת?
לא. הקידוד מתבצע בדפדפן שלכם והתמונה לא יוצאת מהמכשיר.
למה המחרוזת ארוכה מהקובץ?
קידוד Base64 מייצג כל שלושה בתים בארבעה תווים, ולכן הנתונים גדלים בכשליש. זה המחיר של הפיכת קובץ בינארי לטקסט.
לאילו תמונות זה מתאים?
בעיקר לאייקונים ולגרפיקה קטנה, עד כמה קילובייט. לתמונות גדולות עדיף קובץ רגיל עם כתובת URL.
אילו פורמטים נתמכים?
PNG, JPG, WebP, GIF ו-SVG.
האם הכלי חינמי?
כן, לגמרי. בלי הרשמה ובלי הגבלת כמות.