השיטה של CSS Sprites – נקרא לזה כאן "ספרייטס"- נתפשת כשיטה מעולה להטמעת אימג'ים באתרים.
האתרים הגדולים ביותר משתמשים בטכניקה זו, והאמת שהיא הפכה כבר לסוג של סטנדרט בבניית אתרים בכלל.
בפוסט הזה אני אגע ברקע של השיטה, אתן דוגמאות לשימוש בה באתרים פופולארים, אפרט על אופן השימוש בה ואף אשתף בכלים מעולים להכנת הספרייטס.
בכמה מילים- מה זה ספרייטס?
השיטה של סי אס אס ספרייטס היא לקחת מקבץ של תמונות שנמצאות בשימוש באתר/אפליקציה ולשלב אותם לתמונה אחת גדולה שהיא מעין מפה של כל התמונות בייחד. כך התמונה הגדולה נטענת פעם אחת בלבד בעת עליית האתר/ האפליקציה והצגת התמונות מתבצעת על ידי הצגת חלק מסויים בלבד של אותה תמונה גדולה לפי מיקום על הציר הרוחבי והאופקי. בגדול – במקום לאמץ את המחשב של המשתמש להוריד המון תמונות קטנות כל פעם להצגת כפתורים, תמונות רקע, טקסטורות וכו' – השיטה של ספרייטים מורידה רק תמונה אחת קצת יותר כבדה במשקל למחשב של המשתמש, פעם אחת, ומשתמשת בה לאורך כל האתר.
מתי זה התחיל כל הקולה/קינלי הזה?
האמת שהטכניקה של sprites התחילה עוד במשחקי ה-8 ביט הישנים כמו זלדה ומריו. כאשר המורכבות של משחקים גדלה והיה צריך למצוא פתרון לכמה שיותר גרפיקה בכמה שפחות משקל ושעדיין תוכל לרוץ ברמה שהשחק לא יתקע.
הפתרון שנמצא היה למקם את כל התמונות של כל המצבים של הגרפיקה במשחק על גבי "מפה" אחת ובתכנות "לקרוא" לתמונות השונות לפי מיקומים על ה"מפה".
ספרייטשיט של מריו מאת photobucket
הכתבה הראשונה שהתפרסמה בנושא CSS Sprites לשימוש בעיצוב לרשת הייתה בשנת 2004 במגזין הידוע A list apart.
אז עוד הטכניקה ממש לא הייתה בשימוש נפוץ, אבל לאט לאט היא תפסה וכבר בסביבות 2008 לא היה מתכנת אתרים שלא מכיר את הטכניקה הזאת.
איך זה עובד? למי שלא מכיר, הטכניקה יכולה לבוא לידי ביטוי באמצעות כפתור, תפריט שלם, או באמצעות אפילו כל האלמנטים העיצוביים של אתר.
השיטה
ניקח לדוגמה כפתור פשוט. לכפתור יש 3 מצבים עיקריים כיום: מצב רגיל, מצב של רולאובר (או hover), ומצב של הלחיצה עצמה (או active).
הנה הכפתור שלנו ב-3 המצבים שלו:
kaftorico-idle.png
kaftorico-hover.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
ואז ב-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 ספרייטס
הכפתורים של איביי
הרקע לכפתורים בנביגציה של אתר אפל
כפתורי הרשתות החברתיות של סמאשינג מגזין החדש
אמזון
כלים פרקטיים לחיתוכי ספרייטס
במהלך השנים יצאו כמה כלים מאוד פרקטיים ליצירת ספרייטס ורציתי להכיר לכם פה כמה מהטובים ביותר.
atlasmaker תוסף לפוטושופ ליצירת ספרייטס
מדובר בפלאגאין לפוטושופ אשר בקלות יוצר לנו תמונת ספרייטס מכל תקיה שאנו בוחרים. כלומר שאנחנו יכולים לחתוך את העיצוב שלנו כרגיל עם כל תמונה בנפרד (מצבי כפתורים, פטרנים ורקעים, אלמנטים גרפיים) ולשמור אותם תחת תקיה אחת והפלאג-אין הזה יקח את התקיה ויכין מכל התמונות שם תמונת ספרייטס אחת וגם יוציא לכם מסמך המפרט על כל תמונה מה המיקום שלה לפי רוחב וגובה שתוכלו בקלות ליישם את זה ב-css.
2. css-sprit.es
כלי חינמי אונליין למעצבים ומפתחים ליצירת sprites בצורה נוחה ויעילה. אתם פשוט מעלים אליו את כל התמונות שאתם רוצים לעשות מהם ספרייטס והוא מרכיב לכם תמונה ואף יוצר לכם אפילו את הקובץ CSS מוכן לקופי פייסט! שווה, לא?
3.CSS Sprite Generator by Project Fondue
עוד כלי אונליין מעולה ליצירת ספרייטים. פשוט מאוד ועם המון אפשרויות לביצוע הספרייטס.
אלו הם שלושת הכלים היעילים ביותר לפי דעתי, אבל הנה רשימה של עוד כלים שניתן למצוא ברשת:
http://apps.stupid-studio.com/
http://www.floweringmind.com/sprite-creator/index.php
עצה אחרונה – לפני שאתם מעלים את התמונה לאתר שלכם, תעבירו אותה ב-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 ניתן ליצור כפתורים מעוצבים, גרדיאנטים ועוד.
אם יש כלים טובים שאתם מכירים ולא ציינתי פה אתם מוזמנים לכתוב פה כתגובה.
