10 בנוב׳ 2012

Image String in CSS

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

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



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

במצב רגיל של עבודה עם תמונת רקע הייתי יוצר את ה CSS ו HTML הבא:
syntax HTML
<div class="box"></div>
syntax CSS
.box{
    background-image : url(pattern-example.png);
    background-repeat : repeat;
    width : 100px;
    height : 100px;
}


טוב עד פה אני מניח שכולכם מכירים, בסה"כ יצרתי אלמנט, הגדרתי לו נפח, ואת תמונת הרקע שהכנתי, שחוזרת על עצמה.
מה שנשאר לי הוא להחליף את תמונת הרקע לקוד 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=);
מה שנותר הוא להחליף בין תמונת הרקע הרגילה לקוד תמונת ה String.


אין ספק, שהקוד שנוצר יוצר 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
<div class="box pattern-bubbles"></div>

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

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

צירפתי לינקים למאמרים נוספים שקשורים לעבודה עת תמונות באתרי אינטרנט:
בנוסף יש סיכוי שתתעניינו בעבודה עם הספריות הבאות שנותנת שילוב טוב לעבודה נכונה גם עם תמונות:

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