יש לי וידוי שיגרום למהנדסי ביצועים להתכווץ. בגרסה מוקדמת של לוח מחוונים של וורדפרס עבור WP Adminify, קידדתי כל סמל ב-base64 והכנסתי אותם ישר לתוך ה-CSS כי נמאס לי לנהל גיליונות ספרייט. זה עבד. הסמלים הופיעו באופן מיידי, ללא בקשות נוספות, ללא הבזק של תמונה חסרה. ואז גיליון הסגנונות חלף על פני מגה-בייט והדף הרגיש איטי יותר בטעינה שנייה, כי אף אחת מהתמונות המוטבעות הללו לא יכלה להישמר במטמון בפני עצמה. הפרויקט הזה הוא המקום שבו למדתי את זה " תמונה ל-base64" היא טכניקה שימושית באמת שקל גם להשתמש בה יתר על המידה.
מדריך זה מכסה את שני חצאי השיעור הזה. אני אראה כיצד להמיר תמונה לבסיס 64 עם תמונה לממיר Base64 על Toolz.dev, איך לפענח base64 בחזרה לתוך תמונה, מה זה באמת URI נתונים, ואת הפשרות הכנות אז אתה inline הנכסים כי תועלת ולהשאיר את אלה שלא.
TL;DR: המרת תמונה ל-base64 הופכת את התוכן הבינארי שלה למחרוזת טקסט, בדרך כלל עטופה ב-URI של נתונים כמו
data:image/png;base64,iVBORw0KG.... מחרוזת זו מוטמעת ישירות ב - HTML, CSS, SVG או JSON ללא בקשת קובץ נפרדת. Toolz.dev ממיר מקודד ומפענח בשני הכיוונים, פועל כולו בדפדפן שלך כך שאף תמונה לא מועלית לעולם, ונותן לך את הבסיס הגולמי64, URI נתונים מוכן, an<img>תג, וקטע CSS.Base64 מנפח גודל בכשליש, כך נכסים קטנים מוטבעים כמו אייקונים, לא תמונות גדולות.
מהי תמונת base64, בדיוק?
Base64 היא סכימת קידוד, לא דחיסה ולא הצפנה. הסכימה מוגדרת על ידי RFC 4648, וה data: URI שעוטף אותו ב RFC 2397. הוא מייצג נתונים בינאריים שרירותיים באמצעות 64 תווי ASCII הניתנים להדפסה: האותיות A עד Z ו-a עד z, הספרות 0 עד 9, פלוס + ו /, עם = משמש לריפוד הסכימה מוגדרת ב-RFC 4648, אותו תקן השולט על ה-base64 שאתה רואה בקבצים מצורפים לדואל ובמטעני JSON.
הסיבה שהוא קיים היא שהרבה מהאינטרנט' אינסטלציה נבנתה עבור טקסט, לא בתים גולמיים. נתונים בינאריים יכולים להכיל ערכי בתים שערוץ מכוון טקסט יתעסק. Base64 עוקף את זה על ידי לקיחת שלושה בתים של קלט, פיצול 24 הסיביות הללו לארבע קבוצות של שש, ומיפוי כל קבוצה לאחד מ-64 התווים. שלושה בתים פנימה, ארבעה תווים החוצה. היחס הזה בין שלושה לארבעה הוא בדיוק הסיבה לכך שהפלט המקודד גדול בערך ב-33 אחוז מהמקור, מספר שכדאי לשנן כי הוא מחליט אם הטבעה היא רעיון טוב.
A "base64 image" הוא פשוט קובץ תמונה שהופעל דרך הקידוד הזה. בפני עצמו המחרוזת היא רק טקסט. מה שהופך אותו לעיבוד הוא לעטוף אותו ב-URI של נתונים.
מהו URI נתונים ומדוע הדפדפן מעבד אותו?
URI נתונים הוא כתובת URL הנושאת את המטען שלו בשורה במקום להצביע על משאב מרוחק. צורתו, המוגדרת ב-RFC 2397, היא data:[<media-type>][;base64],<data>. עבור PNG שנראה כמו data:image/png;base64,iVBORw0KGgo....
היצירה החשובה היא סוג המדיה, image/png בדוגמה ההיא. זה אומר לדפדפן כיצד לפרש את הבתים הבאים. מכיוון ש-URI הנתונים מכריז על סוג MIME משלו, דפדפן יכול לטפל data:image/png;base64,... כתמונה ברגע שהיא מנתחת תכונה שמצפה לכתובת URL, בין אם זו src של an <img> או ה url() בcss background-image. לא קורה נסיעה הלוך ושוב ברשת, כי אין מה להביא התמונה כבר שם, מאויתת בסימון.
זה כל הקסם וכל העלות במשפט אחד התמונה כבר שם, וזו הסיבה שהיא מציגה באופן מיידי, וגם הסיבה שלא ניתן לאחסן אותה במטמון בנפרד או לשתף אותה בין דפים כמו שקובץ מקושר יכול.
כיצד אוכל להמיר תמונה ל-base64 ב-Toolz.dev?
ה תמונה לממיר Base64 יש שני כיוונים, וקידוד הוא ברירת המחדל.
בחר את "תמונה ל-Base64" כיוון, ואז העלה או שחרר את התמונה שלך הכלי קורא את הקובץ באופן מקומי באמצעות ה-API של קובץ הדפדפן, ומכיוון שהקריאה הזו מתרחשת בדפדפן שלך, התמונה לעולם לא עוברת לשרת ברגע שהיא נטענת אתה מקבל תצוגה מקדימה בתוספת ארבע יציאות, כל אחת עם כפתור העתקה משלה.
הבסיס הגולמי64 הוא המחרוזת החשופה, שימושי כאשר כבר יש לך עטיפה משלך. URI הנתונים מלא data:... מחרוזת מוכנה להדבקה לתוך src או url(). ה-HTML <img> תג הוא אלמנט שלם שאתה יכול להפיל לתוך תבנית.CSS background-image הצהרה מוכנה לגיליון סגנונות לצד אלה אתה רואה את גודל הבתים המפוענח ואת ספירת התווים base64, כך שתוכל לשפוט את המשקל לפני ביצוע אם המספר נראה מדאיג, זה הכלי שעושה את עבודתו: תמונה של 200 KB שהופכת למחרוזת של 270 KB ב-HTML שלך היא בדיוק הרגע לשקול מחדש.
כיצד אוכל לפענח את base64 בחזרה לתמונה?
עבור אל "Base64 ל-Image" כיוון והדבק מחרוזת base64 גולמית או URI נתונים מלא. הממיר סובלני לגבי קלט: הוא מפשיט רווח לבן, ואם אתה מדביק מלא data:image/png;base64,... מחרוזת זה קורא את סוג MIME ישר מתוך הקידומת. אם אתה מדביק base64 חשוף ללא קידומת זה מניח PNG, שהוא ברירת המחדל הבטוחה עבור רוב צילומי המסך והנכסים המיוצאים.
זה מאמת את המחרוזת תחילה. אם מה שהדבקת אינו סביר base64, כלומר הוא מכיל תווים מחוץ לאלפבית RFC 4648, הכלי אומר לך במקום להציג תמונה שבורה. כאשר הקלט נבדק, אתה מקבל תצוגה מקדימה חיה וכפתור הורדה שבונה מחדש את הקובץ הבינארי המקורי ושומר אותו עם הסיומת הנכונה. כיוון זה שימושי באמת כאשר אתה מוצא URI נתונים קבור בגיליון סגנונות או בתגובת API ורוצה לראות מה זה בעצם, או לחלץ אותו בחזרה לקובץ אמיתי.
הכל כאן הוא צד הלקוח, שזו אותה הבטחה שעוברת דרך שאר ארגז הכלים, מתוך הטקסט המכוון ממיר Base64 לthe מקודד URL. אם אתה רוצה את ההיגיון הרחב יותר מאחורי שמירת סוג זה של עבודה בדפדפן, ה מדריך קידוד base64 מעמיק יותר בקידוד עצמו.
מתי עלי להטביע תמונה כבסיס64, ומתי לא?
זו ההחלטה שהכלי קיים כדי ליידע, אז הנה הטבלה שאני משתמש בה בפועל.
| מצב | מוטבע כבסיס64? | למה |
|---|---|---|
| סמל קטן או לוגו בשימוש בכל האתר | לעתים קרובות כן | מסיר בקשה, מופיע באופן מיידי, התקורה זעירה |
| SVG זעיר או רקע 1px | כן | התקורה של 33 אחוז זניחה בכמה מאות בתים |
| ייצוא HTML או דואר אלקטרוני של קובץ בודד | כן | הקובץ חייב להיות עצמאי, ללא נכסים חיצוניים |
| תמונה או באנר גיבור גדול | לא | התקורה גדולה ולא ניתן לאחסן את התמונה במטמון בנפרד |
| נעשה שימוש חוזר בתמונה על פני דפים רבים | לא | קובץ מקושר נשמר פעם אחת ומשותף; הטבעה משכפלת אותו בכל מקום |
| תמונת תוכן שמשתנה לעתים קרובות | לא | עורכים אינם יכולים להחליף כתם base64 בקלות כמו קובץ |
הדפוס מאחורי הטבלה פשוט. Inlining סוחר בקשת רשת עבור בתים במסמך שלך. That trade wins when the asset is small and the saved request matters, which is the classic case for icons above the fold.It loses when the asset is large or shared, because you pay the 33 percent tax, you lose independent caching, and you bloat the very file the browser must parse before it can paint anything.
עבור "no" שורות, המהלך הטוב יותר הוא בדרך כלל לייעל את הקובץ ולהגיש אותו כרגיל. זה המקום שבו כלי כמו קומפרס תמונה או ה ממיר פורמט מרוויח את השמירה שלו, מכווץ את הנכס כך שהגרסה המקושרת תהיה קלה ככל האפשר. כתבתי עוד על כל זרימת העבודה ב- ערכת כלים למפתחי אינטרנט מדריך.
האם base64 שומר על תדמיתי פרטית?
כן ולא, וההבחנה משנה.Base64 הוא קידוד, כך שכל מי שיש לו את המחרוזת יכול לפענח אותה בחזרה לתמונה המקורית המדויקת. זה מספק אפס סודיות אל תתייחס ל-URI נתונים כדרך להסתיר שום דבר, כי ה-"Base64 ל-Image" הכיוון של הכלי הזה בדיוק הופך אותו בהדבקה אחת.
מה הוא פרטי הוא ההמרה עצמה. On Toolz.dev התמונה נקראת ומקודדת כולה בדפדפן שלך עם קובץ API, ושום דבר לא מועלה.So הגרפיקה, צילום המסך, לוגו הלקוח אתה מקודד לעולם לא עוזב את המכונה שלך במהלך התהליך. that is a different guarantee from the coding hiding the content, and I try to be precision about it because "private" gets throwed around loosely.The privacy is in the local processing, covered boriteer in the פרטיות נתונים מדריך, לא ב-base64 כתכנית.
כמה טיפים מעשיים מהמשלוח הזה
העדיפו SVG עבור אייקונים כאשר אתם יכולים, והכניסו את הסימון SVG ישירות ולא את base64-מקודד אותו. SVG הוא כבר טקסט, כך שעטיפה שלו ב-base64 רק מוסיפה את המס של 33 אחוז לחינם. Base64 זורח עבור פורמטים של רסטר כמו PNG ו-JPEG שהם באמת בינאריים.
צפה בגודל המסמך הכולל, לא רק בתמונה הבודדת סמל אחד מוטבע הוא בלתי נראה ארבעים מהם, הטעות שעשיתי על לוח המחוונים הזה של וורדפרס, להפוך גיליון סגנונות רזה למפלצת אם אתה inlining יותר מקומץ, זה אות לצעוד אחורה ולשקול ספרייט מקושר או גופן אייקון במקום.
שמור על סוג MIME כנה. אם אתה מייצא JPEG אבל מתייג את URI הנתונים שלו כ image/png, חלק מהדפדפנים מתמודדים וחלק לא. הממיר מזהה את הסוג האמיתי מהקובץ כך שהפלט נכון, אבל אם תרכיב ידנית URI נתונים במקום אחר, התאם את סוג המדיה לבייטים בפועל.
וכאשר אתה יורש בסיס קוד מלא ב-URI של נתוני מסתורין, זכור את כיוון הפענוח. הדבקת אחד לתוך "Base64 ל-Image" הורדה צדדית ומכה היא הדרך המהירה ביותר לראות איזה גיליון סגנונות באמת שולח.
כיצד פועל למעשה קידוד base64, צעד אחר צעד?
זה עוזר לראות את המכניקה פעם אחת, כי כל הסיפור התקורה של 33 אחוז נופל ממנו באופן טבעי.Base64 עובד על קבוצות של שלושה בתים בכל פעם. שלושה בתים הם 24 סיביות. המקודד פורס את 24 הסיביות הללו לארבעה נתחים של שישה סיביות כל אחד. שישה סיביות יכולות לייצג 64 ערכים, מ-0 עד 63, וכל אחד מהערכים הללו ממפה לתו אחד באלפבית base64: A עד Z עבור 0 עד 25, a עד z עבור 26 עד 51, הספרות 0 עד 9 עבור 52 עד 61, אז + עבור 62 ו / עבור 63.
אז שלושה בתים קלט תמיד הופכים לארבעה תווי פלט זה המקור להגדלת הגודל ארבעה תווים נושאים את המידע של שלושה בתים, יחס של 4 ל-3, שזהה לאמירה שהפלט גדול בשליש מהקלט אין דרך לעקוף את זה, כי זה אפוי לתוך איך שהסכימה עובדת.
ריפוד מטפל בשאריות אם הנתונים שלך אינם כפולה נקייה של שלושה בתים, המקודד מרפדת את הקבוצה הסופית כך שהיא עדיין מייצרת מספר שלם של תווים, והיא מוסיפה אחד או שניים = סימנים להקליט כמה ריפוד זה הוסיף.That הסיבה base64 מיתרים לעתים קרובות כל כך להסתיים ב = או ==. נגרר בודד = פירושו שהקבוצה האחרונה החזיקה שני בתים; כפול == פירושו שהוא החזיק אחד ממיר Toolz.dev מטפל ריפוד באופן אוטומטי בשני הכיוונים, וכאשר פענוח זה בשמחה מקבל מחרוזות עם או בלי הנגרר =, כי מערכות מסוימות מפשיטות את זה.
אתה יכול לצפות במשחק הזה עם דוגמה זעירה שלושת הבתים של ASCII עבור האותיות "Man" לקודד לארבעת התווים "TWFu", דוגמה מפורסמת היישר מתוך ספרות הקידוד. זרוק את אותם שלושה תווים לתוך URI נתונים כטקסט ותוכל לראות את הנסיעה הלוך ושוב, או להריץ תמונה אמיתית דרך הכלי ולשים לב שספירת התווים בפלט היא תמיד כארבעה שלישים מספירת הבתים המוצגת לידו.
ההבנה הזו גם מסבירה מדוע base64 מתאים בצורה גרועה לתמונות גדולות ומתאים מצוין לקטנטנים התקורה היא אחוז קבוע, אז בסמל של 300 בתים זה עולה לך 100 בתים, לאף אחד לא אכפת. בתמונה של שני מגה-בייט זה עולה לך שני שלישים ממגה-בייט של ניפוח טקסט טהור במסמך שלך, ויש להוריד ולנתח את המסמך הזה לפני שהדף יכול לעבד. המתמטיקה לא משתנה עם הגודל, אבל ההשלכות כן.
שאלות נפוצות
כיצד אוכל להמיר תמונה ל-Base64?
בחר את כיוון תמונה לבסיס 64, ולאחר מכן העלה או שחרר את התמונה שלך הכלי קורא את הקובץ באופן מקומי, מקודד אותו ומחזיר את Base64 הגולמי בתוספת URI נתונים מוכן לשימוש, תג img וקטע CSS שאתה יכול להעתיק.
מהו URI נתונים?
URI נתונים הוא מחרוזת המטמיעה קובץ בשורה במקום לקשר אליו, בצורת נתונים: [mime-type];base64,[data]. עבור PNG זה נראה כמו נתונים:image/png;base64,iVBORw0KGgo... דפדפנים מציגים אותו כתמונה בכל מקום שצפויה כתובת URL, כך שאין צורך בבקשה נפרדת.
האם אוכל להמיר את Base64 בחזרה לתמונה?
כן. עבור לכיוון Base64 לתמונה והדבק מחרוזת Base64 גולמית או URI נתונים מלא. הכלי מפענח אותו, מציג תצוגה מקדימה ומאפשר לך להוריד את קובץ התמונה המשוחזר.
אילו פורמטים של תמונה נתמכים?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO ו-AVIF נתמכים כולם. סוג ה-MIME הנכון מזוהה מהקובץ כך שה-URI של הנתונים המתקבל מוצג כהלכה.
מדוע מחרוזת Base64 גדולה יותר מהתמונה שלי?
Base64 מייצג שלושה בתים של נתונים בינאריים עם ארבעה תווי טקסט, כך שהפלט המקודד גדול בכ-33 אחוז מהמקור. התקורה הזו היא הסיבה ש-Base64 מתאים לאייקונים ולוגו קטנים יותר מאשר לתצלומים גדולים.
האם בטוח להמיר תמונות כאן?
כן. כל תמונה נקראת ומקודדת במלואה בדפדפן שלך באמצעות File API. שום קובץ, מחרוזת או תוצאה לא מועלים לשרת, כך שתמונות פרטיות נשארות במכשיר שלך.
האם עלי להטביע תמונות בתור Base64 בייצור?
Inlining עובד היטב עבור נכסים קטנים, בשימוש תכוף כגון סמלים כי זה מסיר בקשת HTTP ומונע הבזק של תמונה חסרה עבור תמונות גדולות זה בדרך כלל עדיף לשמור קבצים נפרדים כך הדפדפן יכול לשמור אותם במטמון באופן עצמאי.
האם הממיר עובד במצב לא מקוון ובנייד?
כן. מכיוון שכל העיבוד הוא בצד הלקוח, הוא פועל לאחר טעינת הדף גם ללא חיבור, והממשק מגיב על פני דפדפנים שולחניים וניידים מודרניים.
