מדריך קידוד תמונות ישירות לתוך הCSS

כחלק מסדרת המדריכים שלי על עבודה עם תמונות בCSS (עבודה עם Image Sprites, ו SVG – שימוש בתמונות וקטוריות), ברצוני להכיר לכם פיצר CSS ישן ופחות מוכר, שהוא השמת תמונות כ String. זאת אומרת שניתן לקודד תמונות רגילות לstringים, ולשים אותם כ String בתוך ה CSS, ובכך למנוע קריאה לתמונות ב CSS. עד כמה שזה ישמע לחלקכם מוזר, הפיצר הזה נתמך החל מאקספלורר 6 (אני אישית בדקתי במחשב מאקספלורר 7), כלומר ישים לעבודה שוטפת בכל הדפדפנים.

אז בואו נתחיל!

pattern-example

תמונה של הpatern מוגדלת (גודל התמונה 7×8 פיקסלים)

לצורך הדוגמא הכנתי מקטע של תמונת רקע שתחזור על עצמה ב CSS (סוג של pattern). תמונת PNG עם שקיפות של 50%.

לינק להורדת התמונה

התמונה הזאת תשמש אותי כרקע חוזר לאלמנטים ב CSS.

במצב רגיל של עבודה עם תמונת רקע הייתי יוצר את ה CSS ו HTML הבא:
syntax HTML

syntax CSS

לצפייה בקטע הקוד

טוב עד פה אני מניח שכולכם מכירים, בסה”כ יצרתי אלמנט, הגדרתי לו נפח, ואת תמונת הרקע שהכנתי, שחוזרת על עצמה.
מה שנשאר לי הוא להחליף את תמונת הרקע לקוד string שייצג לי את אותה תמונת רקע.

לצורך הפיכת התמונה ל string, הנה אתר שממיר לכם תמונות ל Image String.
האתר, מייצר לי מהתמונה קוד string, ונותן לנו קוד או של תמונה כתגית IMG או כתמונת רקע ב CSS, אנחנו נשתמש כתמונת רקע (האופן העדיף לשימוש ב Image string).

הקוד שנקבל של תמונת הרקע ב CSS
syntax CSS

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQzN0MxRDcxMkIxRDExRTJCMkExQkRGNTFCNkI1N0ZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQzN0MxRDcyMkIxRDExRTJCMkExQkRGNTFCNkI1N0ZGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDM3QzFENkYyQjFEMTFFMkIyQTFCREY1MUI2QjU3RkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDM3QzFENzAyQjFEMTFFMkIyQTFCREY1MUI2QjU3RkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz61al6eAAAAy0lEQVR42hyOzUrDQBhFj2UgncmkFYqUUin6BC5c+G5dde+D+ExWwQaJRGxjrJlMf6YzneaDy7e4cO4R8+eXRao1VbVGSs3JHanWJXpwjdjvLd6fOOwsbbPtysl0xnh6j6g334TguZ3dxd/jr/7Fhyt+yi+ETDOyiHh4fMK5QJ7nFPk71vzHUmW0pmH5+kaSJGzrDbZtugjvPWWxQulBR7CtIekrVCT2LgIXsziIOzpClNtZQzYcIYhnI/bzY0lfKqTSjG4mmKbmLMAA5XNkSYQj7N0AAAAASUVORK5CYII=);

אין ספק, שהקוד שנוצר יוצר CSS לא קריא. אך לפני שאתם שוללים את השימוש בו אתם צריכים לשקול את היתרונות והחסרונות.

היתרונות בשימוש Image String
1. מונע צורך בקבצים נוספים.
2. מונע בקשה לקובץ לשרת, ובכך טוען את האתר מהר יותר.
3. בגלל שהתמונה נמצאת כביכול בתוך הCSS, לא תראו בזמן טעינת העמוד טעינה של התמונה (התמונה קיימת בתוך הCSS).

חסרונות בשימוש Image String
1. יוצר CSS לא קריא.
2. נפח התמונה, במונחי רוחב פס גדול יותר ב CSS (בדוגמא שלפנינו גודל תמונה ששוקלת 0.3K הפך להיות 2K ברגע שכתבנו אותה כ Image string בתוך ה CSS).

מתי ואיך, מומלץ להשתמש ב Image String
קודם כל, באתרי אינטרנט רצוי להשתמש כמה שפחות בתמונות לעיצוב האתר, וניתן לעשות זאת ע”י שימוש ביכולות הCSS כגון borders, shadows, greadients, background-color, border-radius וכו. ולהשתמש בתמונות כ IMG, כדי לייצג תמונות תוכן כגון תמונות של חדשות באתר.
בנוסף, לאייקונים ותמונות קטנות אחרות אנחנו נשתמש ב Image Sprite(חיבור תמונות כתמונה אחת), ובכך ניצור קריאה של תמונה אחת לשרת במקום המון קריאות לתמונות שונות.

ומתי בכל זאת נרצה להשתמש ב Image string ?
אני אישית חושב שהשימוש העיקרי שנרצה להשתמש, הוא כ patterns שחוזרים באתר ברקעים שונים. ולכן לא סתם נתתי את הדוגמא הזו בפוסט הזה. אף אחד מהפתרונות הקודמים לא נותן לי מענה, מה שמצריך ממני ליצור תמונה נוספת. בנוסף רק בתמונות קטנות כמו paterns, גודל/נפח ה Image string הוא סביר(בדוגמא שהכנתי 2K ל patern), שעוזרת לי למנוע קריאה נוספת לשרת, שהיא יותר יקרה ממונחים של תעבורה.

עכשיו לגבי בעיית הקריאות של Image string, במידה ויש לכם יותר מאחד כזה באתר, אני אישית הייתי ממליץ ליצור קובץ CSS נוסף שירכז את כל התמונות שבנויות בImage string, גם אם זה אומר שנצטרך להוסיף עוד class ב CSS לאלמנט שלנו (ניתן ליצור פתרון הולם יותר ע”י שימוש ב less – ספריית CSS, ועבודה עם פונקציות).
לדוגמא – הוספת class לצורך הפרדת קבצי CSS

להמחשה נוספת, של הכוח של paterns, שכללתי את הדוגמא והוספתי קוביות נוספות שלכל אחת מהם נתתי צבע רקע אחר ולכולם אותה תמונת רקע (ה patern מהImage String ממקודם). בגלל שה patern עם שקיפות, אני מקבל 4 תוצאות שונות מאותו שימוש של patern אחד, לדוגמא – מימוש מורכב ב paterns

לסיכום: Image String, הינה יכולת נוספת לשימוש בתמונות באתרי אינטרנט, ובמקרים מסוימים יכולה לתרום לנו בביצועים באתר האינטרנט שלנו.

צירפתי לינקים למאמרים נוספים שקשורים לעבודה עת תמונות באתרי אינטרנט:
עבודה עם Image Sprites (תמונות מאוחדות) ב CSS
SVG – שימוש בתמונות וקטוריות (vector images) במקום תמונות רגילות

בנוסף יש סיכוי שתתעניינו בעבודה עם הספריות הבאות שנותנת שילוב טוב לעבודה נכונה גם עם תמונות:
Less – ספריית CSS , על רגל אחת
ספריית modernizr – יצירת סביבת עבודה עם CSS3 ו HTML5

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

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

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

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">