CSS Sprite – איחוד קבצי גרפיקה לקיצור זמן טעינת דפי אינטרנט

על היתרונות הרבים הגלומים בזמן עליה קצר של האתר כבר דיברנו בהרחבה במאמר הקודם שהוקדש לנושא מהירות טעינת אתרים. אחד מהגורמים המשמעותיים בזמן עליית האתר הוא כמות בקשות ה-HTTP הנדרשות לעליית הדף כאשר ככל שנצמצם את הבקשות הללו כך ייחסך זמן עליה יקר. דרך אחת לצמצום כמות בקשות הHTTP היא צמצום כמות התמונות המשובצות בדף שכן כל קובץ תמונה מהווה בקשת HTTP ייחודית וביחד עם העובדה שרוב הדפדפנים מתמודדים בו-זמנית לכל היותר עם שתיים-שלוש בקשות HTTP כאלו וקיבלנו זמן עלייה ארוך. בתמונה בראש הפוסט ניתן לראות את ההשפעה של שימוש לא נכון בקבצי גרפיקה. במקרה הזה דף הבית של האתר הנבדק מכיל 24 קבצי גרפיקה – מה שגורר בקשה נפרדת לכל קובץ ומעלה את משך הזמן לטעינת האתר ללא צורך אמיתי.

מי אמר שצריך לוותר על מגוון תמונות בדף?

בכל דף אינטרנט נעשה שימוש בתמונות רבות- חצים שונים בעלי תמונה שונה ל-hover ול- active, תפריטים בעלי תמונת רקע שונה ל-hover ול-active ועוד. כדי לצמצם את בקשות הHTTP הרבות מבלי להתפשר על מגוון התמונות בדף יש צורך בשימוש בכמה שפחות קבצי גרפיקה הקרויים Sprite. למעשה מדובר בקובץ תמונה אחד אשר מכיל בתוכו את כל התמונות שבדף ולכן נדרשת בקשת HTTP אחת בלבד כשהתחכום הוא בכך שחושפים כל פעם רק את קטע התמונה הרלוונטי. קבצי הגרפיקה מלווים בפקודות CSS תואמות, כפי שנראה בדוגמא שלהלן.

דוגמא

בדף מסויים נעשה שימוש בתמונות חיצים שונות למצבים השונים- חץ שעכבר עובר עליו "יצבע" באפור אחר, למעשה יגרום להחלפת תמונת החץ הקיימת בתמונה אחרת (hover), בדומה תתחלף תמונת החץ בלחיצה עליו (active).

מדובר בשלוש תמונות חיצים שונות ובדוגמה שלנו אנו רוצים שני כיווני חץ שונים ולכן 6 תמונות שונות.
אותו הדבר עם תמונת התפריט, אנו רוצים שדף "אודותינו" למשל יופיע על רקע אפור מסויים, וכאשר העכבר עובר עליו (hover) יתחלף הרקע באפור כהה, למעשה תתחלף התמונה, וכמובן כשנלחץ על הכפתור בתפריט (active) תתחלף התמונה באפור אחר.

סה"כ ספרנו 9 תמונות בדף שלנו, ומדובר בדף פשוט מאוד ולא מורכב. כדי לקצר את זמן עליית הדף על-פי עקרון הספרייט נכין קובץ תמונה אחד המורכב מתשעת החיצים והרקעים לתפריט:

כאשר בכל מקום נשתמש רק בחלק הרצוי מהתמונה באמצעות שימוש בקוד css כדלהלן:

{("nav li a {background-image:url('…/img/arrows.gif#

{nav li a.arrow {background-position: 0px 0px#
{nav li a:hover.arrow {background-position: 0px -60px#
{nav li a:active.arrow {background-position: 0px -120px#

{nav li a.menu {background-position: 0px -150px#
{nav li a:hover.menu {background-position: 0px -182px#
{nav li a:active.menu {background-position: 0px -210px#

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