CSS Sprites וכלים מעולים להכנתם

השיטה של CSS Sprites – נקרא לזה כאן "ספרייטס"- נתפשת כשיטה מעולה להטמעת אימג'ים באתרים.
האתרים הגדולים ביותר משתמשים בטכניקה זו, והאמת שהיא הפכה כבר לסוג של סטנדרט בבניית אתרים בכלל.
בפוסט הזה אני אגע ברקע של השיטה, אתן דוגמאות לשימוש בה באתרים פופולארים, אפרט על אופן השימוש בה ואף אשתף בכלים מעולים להכנת הספרייטס.

בכמה מילים- מה זה ספרייטס?

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

מתי זה התחיל כל הקולה/קינלי הזה?

האמת שהטכניקה של sprites התחילה עוד במשחקי ה-8 ביט הישנים כמו זלדה ומריו. כאשר המורכבות של משחקים גדלה והיה צריך למצוא פתרון לכמה שיותר גרפיקה בכמה שפחות משקל ושעדיין תוכל לרוץ ברמה שהשחק לא יתקע.
הפתרון שנמצא היה למקם את כל התמונות של כל המצבים של הגרפיקה במשחק על גבי "מפה" אחת ובתכנות "לקרוא" לתמונות השונות לפי מיקומים על ה"מפה".

ספרייטשיט של מריו

ספרייטשיט של מריו מאת photobucket

הכתבה הראשונה שהתפרסמה בנושא CSS Sprites לשימוש בעיצוב לרשת הייתה בשנת 2004 במגזין הידוע  A list apart.
אז עוד הטכניקה ממש לא הייתה בשימוש נפוץ, אבל לאט לאט היא תפסה וכבר בסביבות 2008 לא היה מתכנת אתרים שלא מכיר את הטכניקה הזאת.
איך זה עובד? למי שלא מכיר, הטכניקה יכולה לבוא לידי ביטוי באמצעות כפתור, תפריט שלם, או באמצעות אפילו כל האלמנטים העיצוביים של אתר.

השיטה

ניקח לדוגמה כפתור פשוט. לכפתור יש 3 מצבים עיקריים כיום: מצב רגיל, מצב של רולאובר (או hover), ומצב של הלחיצה עצמה (או active).
הנה הכפתור שלנו ב-3 המצבים שלו:

kaftorico-idle.png

kaftorico-idle.png

kaftorico-hover.png

kaftorico-hover.png

kaftorico-pressed.png

kaftorico-pressed.png

בדרך הישנה לפני הספרייטס, היינו שומרים אותם כ-3 קבצי PNG שונים,
ומגדירים ב-CSS תמונה שונה לכל מצב של הכפתור.
משהו כמו הדבר הבא:

1
2
3
4
5
6
7
8
9
10
11
12
13
my-button {
background: url(kaftorico-idle.png) no-repeat;
height:20px;
width:30px;
}
 
my-button:hover {
background: url(kaftorico-rollover.png) no-repeat;
}
 
my-button:active {
background: url(kaftorico-pressed.png) no-repeat;
}

מכירים את האתרים (לרוב הישראלים, מה לעשות) שאתם עולים שם עם העכבר על כפתור מסויים ואז הוא נעלם לשניה ואז אחרי שניה מופיע במקומו הכפתור במצב רולאובר? אז זהו- שזה מרגיז נכון? אבל זה מה שקורה שככה כותבים את ה-css לכפתור.

הטכניקה של css sprites מציעה משהו אחר. למה לא לקחת את כל המצבים ולעשות מהם תמונה אחת?

kaftorico-all.png

kaftorico-all.png

ואז ב-CSS נוכל להגדיר שטח מסויים לכפתור באמצעות "overflow:hidden" ולקרוא למיקומים של הכפתור לכל מצב שונה…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
my-button {
background: url(kaftorico-all.png) no-repeat  0px 0px;
height:20px;
width:30px;
overlay:hidden;
display:block
}
 
my-button:hover {
background-position: 0px -20px;
}
 
my-button:active {
background-position: 0px -40px;
}

אז כמו שניתן לראות השיטה טוענת את התמונה רק פעם אחת והמצבים השונים של הכפתור הם פשוט אותה תמונה רק בחלק אחר שלה לפי מיקום גובה ורוחב.
יצרנו תיבה לכפתור באמצעות "display:block" ו-"overflow:hidden" ואז באמצעות "background" (פקודת קיצור המשלבת גם את background-image, background-repeat ו-background-position) קראנו לתמונה שלנו לפי מיקום.
מה שיוצא מזה זה זמן עליה יותר מהיר של האתר ושל התמונה ואין את ה"מצמוץ" הזה של הכפתור כאשר עולים עליו עם העכבר.

דוגמאות לספרייטים

הנה כמה דוגמאות של ספרייטים מאתרים שאני מניח שרובכם מכירים…

facebook ספרייטס

facebook ספרייטס

הכפתורים של איביי

הכפתורים של איביי

הרקע לכפתורים בנביגציה של אתר אפל

הרקע לכפתורים בנביגציה של אתר אפל

כפתורי הרשתות החברתיות של סמאשינג מגזין החדש

כפתורי הרשתות החברתיות של סמאשינג מגזין החדש

אמזון

אמזון

כלים פרקטיים לחיתוכי ספרייטס

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

1. Texture Atlas Maker

atlasmaker תוסף לפוטושופ ליצירת ספרייטס

atlasmaker תוסף לפוטושופ ליצירת ספרייטס

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

2. css-sprit.es

אתר ליצירת CSS Sprites אונליין

כלי חינמי אונליין למעצבים ומפתחים ליצירת sprites בצורה נוחה ויעילה. אתם פשוט מעלים אליו את כל התמונות שאתם רוצים לעשות מהם ספרייטס והוא מרכיב לכם תמונה ואף יוצר לכם אפילו את הקובץ CSS מוכן לקופי פייסט! שווה, לא?

3.CSS Sprite Generator by Project Fondue

כלי ליצירת סי אס אס ספרייטס

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

אלו הם שלושת הכלים היעילים ביותר לפי דעתי, אבל הנה רשימה של עוד כלים שניתן למצוא ברשת:

http://apps.stupid-studio.com/

http://csssprites.com

http://www.floweringmind.com/sprite-creator/index.php

http://spriteme.org

עצה אחרונה – לפני שאתם מעלים את התמונה לאתר שלכם, תעבירו אותה ב-Yahoo! Smush.it – כלי לקיווץ גודל התמונה תוך שמירה על האיכות הויזואלית שלה. הכלי הזה מומלץ גם לכל תמונה שאתם מעלים לרשת.

לסיכום

CSS ספרייטס כבר כאן כמה שנים טובות ומומלץ להשתמש בטכניקה המעולה הזאת לכל אתר ואפליקציה.

למי שמעוניין לקרוא עוד בנושא מוזמן להיכנס למאמר של סמאשינג בנושא:
http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

והנה גם לינק לראונדאפ של טוטוריאלים בנושא:
http://skyje.com/2010/02/css-sprites

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

אם יש כלים טובים שאתם מכירים ולא ציינתי פה אתם מוזמנים לכתוב פה כתגובה.

Share

קצת על המחבר:

שגיא שרייבר מעצב UI & UX, מייסד של פיקסל פרפקט מגזין, וקו-מייסד של הסטרטאפ Tapdog למעקב אחר אתרים ותחרות ברשת. בוגר שנקר במגמה לעיצוב מדיה אינטראקטיבית. מתמחה בעיצוב אתרים מונחי conversion (המרה) וחווית משתמש, ובעל ידע נרחב ב-html, css ו- wordpress. ניתן למצוא את שגיא  בפורטפוליו שלובטוויטרבלינקד אין או מכדרר בדריבל.

תמצאו את שגיא שרייבר ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע




    What is 7 x 5 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;