תמונה ל-Base64
המירו תמונה ל-data URI מסוג Base64 להטמעה ב-HTML, ב-CSS או ב-JSON, הכול בתוך הדפדפן שלכם.
כיצד להשתמש בתמונה ל-Base64
- 01
בחרו תמונה מהמכשיר שלכם.
- 02
העתיקו את ה-data URI, או את קטע ה-CSS המוכן.
- 03
הדביקו אותו ב-HTML, ב-CSS או ב-JSON שלכם.
מה הממיר הזה עושה
תמונה זו לממיר Base64 הופכת תמונה ל-URI נתונים, מחרוזת טקסט ארוכה שמטביעה את התמונה ישירות, בתוספת קטע רקע CSS מוכן לשימוש. אתה יכול לשלב תמונה במקום לקשר לקובץ נפרד.
זה פועל באופן מקומי בדפדפן שלך, כך שהתמונה שלך נקראת במכשיר שלך ולעולם לא תועלה.
למה להטמיע תמונה
URI נתונים נושא את כל התמונה בתוך הסימון, כך שהדפדפן לא מבצע בקשת רשת נפרדת כדי להביא אותו. עבור נכסים קטנים כמו סמלים, הנסיעה הלוך ושוב יכולה לגרום לדף להרגיש מהיר יותר.
הפשרה: גודל ואחסון במטמון
המלכוד הוא הגודל והמטמון. Base64 מוסיף בערך 33 אחוז תקורה מכיוון שהוא מייצג נתונים בינאריים עם אלפבית טקסט מוגבל, ולא ניתן לאחסן תמונה משובצת בנפרד, כך שהיא מורידה שוב עם כל עמוד שמכיל אותה.
כלל האצבע הוא להטמיע תמונות קטנות, אייקונים, סמלי לוגו זעירים או ספרייט, שבהם הימנעות מבקשה שווה את התקורה, ולשמור על תמונות גדולות יותר כקבצים רגילים שהדפדפן יכול לאחסן ולטעון במקביל.
היכן פועלים כתובות URI של נתונים
URIs של נתונים פועלים בכל מקום שבו כתובת URL מתקבלת: קובץ img src, רקע CSS או שדה ב-JSON או תבנית דוא"ל. זה עושה אותם שימושיים עבור קטעים עצמאיים.
שאלות נפוצות
האם התמונה שלי מועלית לשרת?
לא. התמונה נקראת כולה בתוך הדפדפן שלכם, כך שהיא לעולם לא עוזבת את המכשיר.
מתי כדאי להשתמש ב-data URI?
עבור תמונות קטנות כמו אייקונים, היכן שחיסכון בבקשת רשת נוספת שווה את הגדלת הגודל. עבור תמונות גדולות, קובץ רגיל עדיף.
מדוע ה-Base64 גדול יותר מהקובץ?
קידוד Base64 מוסיף תקורה של כ-33 אחוז מכיוון שהוא מייצג נתונים בינאריים באמצעות אלפבית טקסט מצומצם.