CSS Sprites ולמה גם גוגל משתמש בהם
מה זה?
CSS Sprites זה השימוש בכמה תמונות מחוברות יחד כתמונה אחת גדולה כאשר התמונות אחת ליד השניה (כמו קולאז’) + השימוש בCSS כדי להציג חלק ספציפי מהתמונה הגדולה.
כמו שאומרים, תמונה שווה אלף מילים –
את התמונה הזאת הוצאתי מגוגל, היישר מפה:
http://www.google.com/images/nav_logo6.png
למה זה טוב? למה סתם לסבך?
כאשר משתמשים בתמונה אחת גדולה במקום כמה תמונות קטנות דבר ראשון הגודל של התמונה האחת יותר קטן מהגודל של כל התמונות הקטנות יחדיו. יותר מכך הדבר עוזר בטעינת עמודים במהירות גבוהה יותר מכיוון שלדפדפן לוקח הרבה זמן לשלוח מספר רב של בקשות HTTP (הוא שולח בקשת HTTP כל פעם שהוא צריך להוריד קובץ כמו HTML תמונות JS וכו’…) וזה מאט את קצב טעינת העמוד.
כאשר האתר משתמש בCSS Sprites הדפדפן שולח במקרה של גוגל בקשה אחת במקום 26 (!) בקשות נפרדות כדי לקבל את הגרפיקה הנחוצה. זמן זה הוא זמן יקר בעיקר עכשיו בזמן של האינטרנט המהיר שכל אלפית שניה משנה.
מגניב, איך אני עושה את זה?
שימו את כל התמונות שאתם רוצים להשתמש בהם קובץ ZIP והשתמשו בשירות יצירת Sprites כדי ליצור תמונה אחת גדולה ותורידו אותה למחשב.
תעלו את התמונה לשרת שלכם, ותשתמשו בקוד CSS שהשירות יצר עבורכם כדי ליצור אתר נטען במהירות שיא.
קראתי מאמר דומה שמסביר לעומק איך בדיוק משתמשים בזה:
http://www.ing.co.il/?p=24