النص الأصلي: CSS Sprite: هل يجب أن تفعل أم لا؟
مترجم من: إلى العفريت أو لا إلى العفريت
إخلاء المسؤولية: إن CSS Sprites المشار إليها في هذه المقالة هي CSS Sprites ، ولم تكن لهذه العبارة ترجمة صينية تقليدية أو ثابتة مطلقًا، وقد بدأ البعض يطلق عليها اسم CSS Sprites، فلنتعامل معها على أنها محاولة. سنستمر في القيام بذلك في المستقبل، وسنستمر في تسميتها بـ CSS Sprites. شينفي (صوتي)
لقد كان CSS Sprite موجودًا منذ فترة وقد ظهر كوسيلة لجعل موقع الويب الخاص بك أسرع. قدم Steve Souders للتو SpriteMe! في Velocity 09 (مناقشة لماذا تستخدم CSS Sprite Generator أو أي أداة أخرى تعتمد على الخادم عندما يمكنك استخدام Canvas وtoDataURL وإنشاء النقوش المتحركة بسرعة؟). ومع ذلك، هناك بعض المفاهيم الخاطئة حول كائنات CSS، وأهمها أنها لا تحتوي على أي عيوب.
المبدأ الأساسي لـ CSS Sprite هو دمج بعض الصور المستخدمة على موقع الويب الخاص بك في صورة واحدة، وبالتالي تقليل عدد طلبات HTTP لموقع الويب الخاص بك. يتم عرض الصورة باستخدام خلفية CSS وخصائص موضع الخلفية (تجدر الإشارة إلى أن هذا يعني أيضًا أن علاماتك تصبح أكثر تعقيدًا، ويتم تعريف الصورة في CSS، وليس في علامة <img>).
أكبر مشكلة في CSS Sprite هي استخدام الذاكرة. ما لم يتم تنظيم صورة الكائنات بعناية شديدة، فسوف ينتهي بك الأمر مع الكثير من المساحات البيضاء غير المفيدة. المثال المفضل لدي هو من موقع ويب WHIT TV، حيث يتم استخدام هذه الصورة ككائن. لاحظ أن هذه صورة PNG بحجم 129915000 بكسل. كما أنه مضغوط بشكل جيد للغاية ويبلغ حجم التنزيل الفعلي حوالي 26 كيلو بايت فقط - لكن المتصفح لا يعرض بيانات الصورة المضغوطة. عند تنزيل هذه الصورة وفك ضغطها، ستشغل حوالي 75 ميجابايت من الذاكرة (1299 * 15000 * 4). إذا كانت هذه الصورة لا تستخدم شفافية ألفا، فسيتم تحسينها إلى 1299 * 15000 * 3، ولكن على حساب سرعة العرض. وحتى ذلك الحين، نحن نتحدث عن 55 ميغابايت. معظم هذه الصورة فارغة في الواقع، ولا يوجد فيها شيء، ولا يوجد محتوى مفيد. سيؤدي مجرد تحميل الصفحة الرئيسية لـ WHIT إلى زيادة استخدام ذاكرة المتصفح الخاص بك إلى ما لا يقل عن 75+ ميجابايت، فقط بسبب تلك الصورة الواحدة. ( ملاحظة: للأسف، تمت مراجعة الموقع مؤخرًا ولم تعد الصور المذكورة في المقال موجودة )
المقايضة الصحيحة لصالح موقع على شبكة الإنترنت غير موجودة.
هناك عيب آخر (وإن لم يكن بنفس الأهمية) وهو أنه إذا تم تغيير حجم الصفحة التي تستخدم CSS Sprite باستخدام ميزة تكبير الصفحة بالكامل التي توفرها بعض المتصفحات، فسيحتاج المتصفح إلى القيام ببعض الأعمال الإضافية لتصحيح سلوك حواف الصورة هذه بشكل أساسي منع عرض الصور المجاورة في Sprite. لا يمثل ذلك مشكلة بالنسبة للصور الصغيرة، ولكنه سيكون بمثابة أداء رائع للصور الكبيرة.
هناك بالتأكيد بعض الأمثلة التي توضح الفوائد الواضحة لكائنات CSS، وأهمها دمج مجموعة من الصور بنفس الحجم في ملف واحد. على سبيل المثال، سلسلة من الأيقونات مقاس 16×16 تُستخدم لتحديد العديد من الأشياء على موقع الويب الخاص بك، أو بعض الأيقونات مقاس 32×32 المستخدمة كرؤوس فئات أو ما شابه. لكن ليس من الجيد أبدًا دمج الصور ذات الأحجام المختلفة بشدة، خاصة الصورة الطويلة والرفيعة بجوار الصورة العريضة والقصيرة.
ومع ذلك، يعمل CSS Sprite على تحسين أوقات تحميل الصفحة (على الأقل عند التحميل الأولي للصفحة وفي عمليات تحميل الصفحة اللاحقة، يقوم المتصفح بتخزين الصورة مؤقتًا). هل هناك أي شيء يمكن استبداله؟ لسوء الحظ، لا يوجد بديل حتى الآن. بدأت العديد من المتصفحات في دعم البيانات غير المتصلة بالإنترنت، وقد يكون من الممكن توسيع هذا للسماح بتنزيل ملف (مثل ملف jar/zip) يحتوي على قائمة بالموارد وعناوين URL المقابلة. لكن مثل هذا النهج لن يتم رؤيته لبعض الوقت ...
لذا، عند تحديد ما إذا كنت تريد استخدام CSS Sprite أم لا، يجب أن تدرك أن هناك العديد من العوامل التي تتجاوز أداء التحميل الأولي للصفحة. كقاعدة عامة، إذا كان جزء كبير من كائن CSS الخاص بك لا يحتوي على محتوى صورة فعلي، فيجب عليك تجنب استخدامه وفقًا لذلك. وبالمثل، راقب المشكلات المستقبلية المحتملة مع الحفاظ على سرعات تحميل الصفحة مع الحرص على تجنب أخطاء الذاكرة وتأثيرات أداء Sprite.
عيوب CSS Sprite الأخرى
فيما يلي بعض عيوب CSS Sprite التي ذكرها بعض مستخدمي الإنترنت في تعليقات هذه المقالة:
لا يمكن طباعة الصور التي يتم استدعاؤها بواسطة CSS Sprite ما لم تتم إضافة عبارة الطباعة بشكل خاص إلى @media بواسطة RichB
إذا كنت تريد تعديل صورة في Sprite، فيجب عليك تعديل الصورة بأكملها، مما سيؤدي بلا شك إلى زيادة عبء العمل على Tom B
إذا وجدت أي عيوب في CSS Sprites الأخرى أثناء الاستخدام، فلا تتردد في ذكرها.