فيما يتعلق بتحسين تقنية CSS Sprites، إلى أي مدى يمكننا أن نفعل وإلى أي مدى يمكننا تقليل عدد الطلبات؟ لا يمكن القيام بذلك من جانب واحد، كل شيء يعتمد على التعاون بين صور XHTML وCSS وCSS Sprites. حتى الآن، لا توجد طريقة تحسين مطلقة، ولهذا السبب غالبًا ما أقوم بقياس العلاقة بين صور CSS Sprites وXHTML في المشاريع، مثل: "الخلفية تنفذ شبكة ذات تسع شبكات تكيفية"، ويلخص ما يلي بعض طرق قص الصور و تحسين الصورة.
تحسين الصورة
بالنسبة لملفات GIF غير المتحركة، يوصى باستخدام PNG8 لأنه يمكنه أيضًا تحقيق نفس التأثير وتوفير ما بين 10% إلى 30% من حجم الملف.
بالمقارنة مع Fireworks، يقوم Photoshop بتصدير صور PNG بنفس الجودة، ولكن الحجم أكبر قليلاً. على الرغم من أن Fireworks قامت بتحسينات الضغط المقابلة، إلا أنها لم تحقق أفضل ضغط.
برنامج التصميم الذي أعرفه لا يحقق أفضل ضغط لمعالجة صور PNG، ولا يزال حجم الصورة يحتوي على قدر معين من مساحة الضغط. يمكنك محاولة استخدام "أداة تحسين الصورة" المقدمة أدناه لتحقيق تحسين الضغط بدون تشويه.
فيما يتعلق بحجم الصورة وحجمها، يوصى بالحفاظ على الحجم ضمن 100 كيلو بايت (وهو ما يتماشى أكثر مع أفضل متطلبات الحجم للظروف الوطنية) والحجم هو 800 بكسل (الحجم الأفضل). (تم الحصول على معلومات من مصدر موثوق من الموظفين، ولا توجد طريقة للتحقق من التفاصيل)
تقنية CSS Sprites لقص الصور
تتم إضافة ترتيب الصور والصور المدمجة من أعلى إلى أسفل، ومن اليسار إلى اليمين. يتم تحديد موضع الخلفية بشكل عام باستخدام مجموعة من الأرقام، مما يمكن أن يقلل من المشاكل غير الضرورية الناجمة عن الصيانة.
لا ينصح بالمحافظة على مسافات معينة في صور CSS Sprites لأن حجم الملف يزداد ويزداد حجم الملف.
في CSS Sprites، يمكن أن يؤدي دمج الألوان المتقاربة أو المتشابهة إلى تقليل عدد الألوان، لأن حجم ملف الصور مع عدد قليل من الألوان سيكون صغيرًا نسبيًا.
هناك فجوة كبيرة في صور CSS Sprites بنفس الحجم، والتي في معظم الحالات يزيد الحجم إلى حد ما، لذلك يجب ألا تحتوي صور CSS Sprites على فجوات.
من بين صور CSS Sprites ذات الحجم نفسه، سيكون للصور المرتبة عموديًا أحجام ملفات أكبر من الصور المرتبة أفقيًا. تجريبي
في صور CSS Sprites، سيكون للصور المرتبة أفقيًا أحجام ملفات أكبر من الصور المرتبة رأسيًا. تجريبي
الدمج المتساوي للصور: عند تطبيق صور CSS Sprites، قم بدمج الصور المتطابقة بشكل مناسب لتوفير المساحة وتقليل الحجم. تجريبي
تمييز الصور التي لا تحتاج إلى دمجها: إذا قرر المستخدم الحالي أنه سيتم عرض حالة أو مستوى واحد فقط، فلا داعي لدمج صور المستويات أو الحالات الأخرى. تجريبي
موضع القطع الذهبي: الموضع الأكثر مرونة على الجانب الأيمن أو الأيسر من صورة CSS Sprites هو الموضع الأنسب لوضع الأيقونة أمام النص، لذلك لن تتداخل مع صور CSS Sprites الأخرى، ويوجد لا حاجة لحجز عرض خط معين.