טעינת תמונות בתוך קבצי CSS (בעזרת Base64)

לפעמים באתר יש תמונות קטנות שנמצאות בעיצוב (כמו אייקונים או רקע של כפתורים וכו'). הבעיה היא שבטעינה הראשונה, לפעמים העיצוב עולה, אבל התמונות עדיין לא, אז העיצוב שמוצג ב"רושם הראשוני" הוא לא וואו, כי קופצות התמונות באופן מפתיע וזה לא נראה חלק.


למה זה קורה?

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

אחת הדרכים לפתור את זה, זה באמצעות Preload (טעינה מוקדמת) של התמונות האלה. איך? להטמיע אותם בתוך קובץ ה־CSS שלנו! (CSS – קובץ העיצוב של האתר. נעשה זאת בעזרת Base64). כך, ברגע שהעיצוב יעלה, גם התמונות יעלו יחד בנשימה אחת.


איך פותרים?

יש כאן הסבר איך אפשר לעשות את זה בעזרת SCSS.

אני אישית אימצתי את הגישה לשים את קובצי התמונה בתוך קובץ ייעודי לכך בשם _base64.scss, בדיוק לפי מה שהמדריך לעיל מציע.

(חשוב לציין שלא כדאי לעשות את זה עם תמונות כבדות, כי זה עלול לעכב את זמן התצוגה הכללית של האתר. מתאים לעשות את זה לתמונות קטנוטנות, אייקונים, רקעים בצבע אחיד וכו').

לאחר קריאת ההסבר, כדאי לדעת יש שירות שמאפשר להעלות של קבצי תמונה (SVG, PNG, JPG וכו') והוא ידאג להמיר אותן אוטומטית ל־Base64 במהירות.

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


אפשר דוגמא אמיתית לאתר שהשתמשת בשיטה הזו?

בטח!

יצרתי לא מזמן אתר לקיצורי לינקים בחינם. זה שירות כמו bit.ly, אבל אחר – יותר חמוד בעיניי 🙂 קוראים לו zeha.link – "זה הלינק!"

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

לפני השינוי, היה שבריר שניה שהכפתור "קצר לי את זה פליז" היה חסר־צבע, כי לרקע לקח כמה רגעים להיטען.

אז No more!

וכפי שאתם רואים בצילום המסך מהקוד, התמונה אכן טבועה בתוך קובץ ה־CSS, בעזרת Base64:

הכפתור "קצר לי את זה פליז" עם רקע צהוב שטבוע בתוך קובץ ה־CSS ולכן לא מצריך טעינה נוספת – הוא פשוט מוצג מיד!
הכפתור "קצר לי את זה פליז" עם רקע צהוב שטבוע בתוך קובץ ה־CSS ולכן לא מצריך טעינה נוספת – הוא פשוט מוצג מיד!

זהו. עכשיו אני יכול לישון בלילה. 😉

אלה הם הדברים הקטנים שמפריעים לי… גם לכם?

דברים שאני כותב, קוד ופיתוח אתרים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסט בהפתעה?