هناك العديد من الطرق لتحسين صفحات الويب. بعضهم يعمل والبعض الآخر لا. ومع ذلك، هناك بعض الأساليب التي تعتبر إلزامية لأي موقع ويب أو مدونة. أردت أن أتحدث إليكم عن واحد منهم.

إحدى الطرق الرئيسية لتحسين صفحات الموقع. لذلك سنتحدث اليوم عن كيفية دمج الصور المتحركة على موقع ويب بلغة CSS، وبالتالي زيادة سرعة التحميل.

قليلا من التاريخ

في الماضي البعيد، عندما كانت أجهزة المودم تصدر صوت تنبيه في الشقق وكانت سرعات الاتصال لا تتجاوز 5 كيلوبت في الثانية، كان الناس يفكرون في المهمة الصعبة المتمثلة في كيفية تحميل المواقع بشكل أسرع دون دفع مبالغ باهظة مقابل حركة المرور الواردة. لقد فكروا، أي فكروا، وتوصلوا إلى فكرة تكوين الصور المستخدمة في الصفحة إلى نقوش متحركة.

ونذهب بعيدا...

دمج الصور في العفريت

وهكذا، كما اكتشفنا سابقًا، فإن الكائن عبارة عن عدة صور مرتبة في صورة واحدة على خلفية شفافة، ويمكن الوصول إليها باستخدام خصائص CSS موقف الخلفية. ولكن من فضلك لا تخلط بينه وبين الكولاج. العفريت ≠ مجمعة.

للحصول على كائن، تحتاج إلى دمج جميع الأزرار والأيقونات والرموز النقطية وغيرها من الأشياء بشكل مضغوط قدر الإمكان في ملف PNG واحد. ولا تنسى أن الخلفية يجب أن تكون شفافة. الآن دعونا ننظر إلى الأمر بمثال.

لنفترض أن لدينا ملف PSD به زر جميل في ثلاث حالات.

ماذا يفعل المدون العادي الذي يدرس التخطيط بنفسه؟ فهو يقطع الزر في كل حالة ويحفظه في ملفات منفصلة. أي أن زرًا واحدًا يلتقط 3 صور لهذا الرجل اللطيف. وإذا شعرت بالتوتر، تذكر أن كل صورة في الموقع هي عبارة عن طلب HTTP إضافي يقوم بتحميل الخادم ومدونتك تعمل بشكل أبطأ وأبطأ وأبطأ وأبطأ وأبطأ وأبطأ...

لمنع حدوث ذلك، فمن المنطقي أكثر من ذلك بكثير احفظ الزر في ملف واحد. للقيام بذلك، نفتح نفس ملف PSD ونزيل منه الأسهم والتسميات والخلفية عديمة الفائدة ونرتب جميع حالات الزر بالقرب من بعضها البعض قدر الإمكان دون تداخل.

وهذا ما انتهينا إليه. لا ينبغي بأي حال من الأحوال أن تتداخل الأزرار مع بعضها البعض.

رائع، لقد قمنا بإعداد ملف رسومي، والآن دعني أوضح لك كيفية تخطيطه.

تخطيط العفريت

لا يختلف تخطيط العفاريت CSS عن تخطيط الصور العادية، باستثناء واحد ولكن. لا تحتاج إلى معرفة الحجم الدقيق للصورة التي تريد عرضها فحسب، بل أيضًا إحداثياتها. على سبيل المثال، يبلغ عرض الكائن بالكامل 330 بكسل وارتفاعه 150 بكسل.

لكننا نحتاج فقط إلى عرض زر يبلغ عرضه 227 بكسل وارتفاعه 41 بكسل، مع تحديد إحداثياته ​​الدقيقة. إذا لم يكن لديك محرر HTML جيد، فأنا أستطيع ذلك.

قم بإنشاء ملف Index.htmlواكتب فيه الأسطر الضرورية من التعليمات البرمجية والنوع المستندي وكل ذلك.

بعد الانتهاء من جميع الخطوات القياسية، دعونا نحاول عرض الزر الخاص بنا.

بعد العلامة جسمإنشاء حاوية شعبةمع الطبقة زر- وهذا سيكون زرنا.

هذا هو المكان الذي ينتهي فيه HTML الخاص بنا ونحتاج الآن إلى إضافة أنماط CSS للزر.

يوضح الكود أدناه أننا نعلن أولاً عن فصل دراسي زر. ثم استخدام الخصائص الطول والعرضضبط حجم الزر لدينا. ملكية خلفيةيسمح لنا بتحديد الملف الذي سنستخدمه ككائن، و موقف الخلفيةقم بتعيين إحداثيات الصورة التي نحتاجها في هذا الكائن. انه سهل.

الزر ( الارتفاع: 41 بكسل؛ العرض: 227 بكسل؛ الخلفية: url(img/sprite.png); موضع الخلفية: 0px -12px;)

دعونا نلقي نظرة فاحصة على الممتلكات موقف الخلفية.

كما ترون من الكود أعلاه، فإنه له معنيان. تسمح لك القيمة الأولى بتعيين إحداثيات الصورة على طول المحور X، وبالتالي، على طول المحور Y، لا يقفز زرنا في أي مكان على طول المحور X، نظرًا لأن جميع الحالات تقع تحت بعضها البعض. لذلك، لكي تظهر الحالة الثانية للزر عند التمرير، نحتاج إلى تغيير القيمة المسؤولة عن المحور Y.

الزر: التحويم (موضع الخلفية: 0px -56px؛) .الزر: نشط (موضع الخلفية: 0px -98px؛)

كما تعلم، وإذا لم يكن الأمر كذلك، فنعم، كل زر له عدة حالات.

1. عادي - حالة طبيعية أو طبيعية
2. تحويم - حالة الزر عند تحريك المؤشر
3. نشط - حالة الزر عند الضغط عليه

لقد استفدنا من هذه الخصائص.

إذا كنت كسولًا جدًا بحيث لا يمكنك إنشاء نقوش متحركة يدويًا وتهتم بشكل عام باستخدام Photoshop، فستساعدك خدمة مجانية رائعة: spritepad.wearekiss.com. ما عليك سوى إلقاء الصور الضرورية في منطقة العمل وسوف يقوم بإنشاء كائن لك.

قيد التوقيف

تعتبر CSS sprites خطوة مهمة جدًا في تسريع موقع الويب. عامله بالاحترام الواجب وحاول استخدامه في كل مكان.

أعلنت في قسم الأخبار عن ترجمة واجهة Sprite Generator - وهو برنامج متصفح مجاني مصمم لإنشاء كائنات CSS تنفذ تقنية تقدمية جديدة لزيادة سرعة تحميل صفحات الويب. ستنظر هذه المراجعة في برنامجين آخرين لإنشاء (توليد) نقوش متحركة تلقائيًا والتي تجمع الصور بكفاءة وفعالية في نقوش CSS المتحركة. تتيح لك البرامج الموصوفة ليس فقط إنشاء نقوش CSS المتحركة بسهولة وبساطة، بل أيضًا إنشاء مقتطفات نمط بإحداثيات النقوش المتحركة، مما يجعل من الممكن أيضًا وضع نقوش CSS المتحركة على صفحة الويب بسهولة وبساطة.

لكن أولاً، القليل عن كائنات CSS. وغالبًا ما يُطلق عليها أيضًا اسم نقوش الويب، ونقوش HTML المتحركة. المرة الأولى التي صادفت فيها هذه التقنية كانت عندما قررت التحقق من سرعة تحميل صفحاتي. صفحاتي صغيرة، خاصة أنها غير مثقلة بأي شيء وتفتح بسرعة كبيرة. ومع ذلك، أردت التحقق. أعطتني أداة سرعة الصفحة من Google وأداة YSlow المشابهة من Yahoo قائمة من التوصيات لتحسين سرعة تحميل الصفحة. ومن بين هذه التوصيات الرغبة في دمج الصور المنشورة على الموقع في صور متحركة. هكذا بدأت معرفتي بالعفاريت CSS.

ما هي الكائنات CSS وكيفية استخدامها؟ أساس هذه الطريقة هو دمج العديد من الصور الموضوعة على صفحة الويب في صورة فسيفساء مركبة واحدة. الشرط الرئيسي لإنشاء واستخدام الرسوم المتحركة CSS هو القدرة على استخدام هذه المجموعة من الصور كإدراج خلفية على الصفحة. عادةً ما تمثل هذه الصور العديد من الشعارات والأيقونات والأزرار وعناصر التنقل والتحكم الرسومية الأخرى. إذا كان من الممكن استخدام هذه الصور ليس فقط كرسومات مع العلامة ، ولكن أيضًا كصور خلفية ذات تصميم صورة الخلفية: عنوان URL (xxxxxxxxx...)، فإن إنشاء واستخدام العفاريت css يقترح نفسه (لاحظ أن الاحتمال المذكور متاح دائمًا تقريبًا). تسمي بعض المصادر (الأجنبية والمحلية) الصورة المركبة المستهدفة بأنها كائن رئيسي، وأحيانًا ورقة متحركة. وسألتزم أيضًا بهذا المصطلح. يتم إجراء المزيد من الاستخدام للصورة المحددة التي نحتاجها من الكائن الرئيسي على صفحة الويب باستخدام تحديد المواقع باستخدام CSS. تكمن الحيلة الكاملة لهذه التقنية في تقليل طلبات HTTP لتنزيل الصور بشكل كبير. بدلاً من عدة طلبات (أحيانًا عشرات أو أكثر) لتنزيل صور فردية، يوجد طلب واحد فقط لتنزيل صورة الفسيفساء المركبة هذه. على الرغم من الحجم الأكبر لهذه الصورة، فإن وقت تحميلها أقل بما لا يقاس من الوقت المطلوب للعديد من طلبات HTTP للصور الفردية وتنزيلها. يتيح لك استخدام CSS Sprites زيادة سرعة تحميل الصور بشكل كبير، وبالتالي، يتم فتح الصفحة نفسها، حيث يتم استخدام CSS Sprites، في المتصفح بشكل أسرع بكثير. ومن المزايا الإضافية لهذه الطريقة التنفيذ البسيط للغاية لتأثير تمرير الصور دون استخدام البرامج النصية (باستخدام CSS فقط)، والذي يمكن أن يكون مفيدًا لإنشاء قوائم فعالة وأنيقة وأزرار تحكم وعناصر رسومية أخرى مستخدمة على مواقع الويب.

بالمناسبة، حول CSS. يتم استخدام الصور الفردية المحددة على الصفحة التي تشكل الصورة المركبة المدمجة باستخدام الخاصية موقف الخلفية. تحدد هذه الخاصية الموضع الأفقي والرأسي لصورة الخلفية في العنصر المستخدم لوضعها. يمكن أن تكون قيم الخاصية عبارة عن كلمات رئيسية أو قيم محددة بالبكسل أو النسب المئوية. عند استخدام نقوش CSS، عادةً ما يتم استخدام قيم البكسل الدقيقة. القيمة الأولى هي الإحداثي الأفقي (x)، والثانية هي الإحداثي الرأسي (y). وفقًا لمواصفات CSS، تنطبق هذه الخاصية على عناصر مستوى الكتلة والعناصر البديلة. من الناحية العملية، غالبًا ما يتم استخدام النقوش المتحركة في العناصر المضمنة ، والتي يتم إنشاؤها باستخدام الخاصية العرض محجوبلتعيين العرض والارتفاع. بالنسبة لهذه العناصر، يتم تعيين خاصية الخلفية مع الإحداثيات اللازمة (موضع الخلفية). باختصار وبشكل تقريبي، هذه هي إحداثيات (موقع) الصورة الصغيرة التي نحتاجها على اللوحة القماشية الكبيرة لصورة الكائنات المركبة الشاملة. بفضل هذه الخاصية والارتفاع والعرض المحددين بشكل صارم للعنصر الذي يتم استخدام الكائن فيه، يتم ضمان تصور الصورة التي نحتاجها في هذا العنصر. وأركز على حقيقة أن الممتلكات موقف الخلفيةيضمن تسليم الصورة التي نحتاجها (على شكل عنصر كتلة)، كما لو كانت مقطوعة من الكائن الرئيسي، إلى صفحة الويب. يعد ترميز HTML التقليدي أو الترميز باستخدام المعرفات أو الفئات أو المحددات البسيطة المناسبة مع خصائص CSS الضرورية مسؤولاً عن وضع هذه الصورة بالذات في المكان المناسب على الصفحة. (الموضع، التعويم، الهامش وغيرها)– هنا يعتمد الكثير على خبرتك وتفضيلاتك الخاصة. إذا كنت تتساءل عن سبب تطبيق الخاصية عند استخدام كائنات CSS خلفية، ثم أذكرك أن تقنية CSS sprites تتضمن وضعها على صفحات موقع الويب تمامًا مثل إدراج الخلفية. علاوة على ذلك، لا تكون هناك حاجة إلى خاصية موضع الخلفية فحسب، بل يلزم أيضًا صورة خلفية تشير إلى المسار إلى الكائن الرئيسي، وإذا لزم الأمر، خصائص خلفية أخرى. يمكن رؤية بعض الأمثلة، بما في ذلك استخدام التهجئة المختصرة لخاصية الخلفية، في قوائم الأنماط أدناه.

قد يلاحظ المستخدمون المطلعون على CSS أن موضع كائنات CSS أكثر دقة وتعقيدًا. نعم إنه كذلك. إذا تم تحديد موقع الكائنات بوحدات دقيقة (px)، فسيتم تفسيرها على أنها إزاحات من الزاوية العلوية اليسرى من منطقة الحشو الخاصة بالعنصر. النقطة المتعلقة بقياس الإزاحات هي الزاوية اليسرى العليا من الصورة المصدر.

لقد وجدت أوضح شرح لوضع الخلفية في حالة تحديد القيم الدقيقة لخاصية وضع الخلفية في المدونة، حيث تم التقاط الصورة والوصف التاليين:

« عند تحديد موضع صورة الخلفية باستخدام الوحدات المطلقة في موضع الخلفية، ينطبق المبدأ التالي على تحديد موضعها النهائي. أولئك. سيقوم المتصفح بحساب الإزاحات المحددة على طول المحورين X وY من أصل المنطقة التي تم وضع الكائن فيها إلى أصل هذه الصورة نفسها.»

الغرض من هذه المراجعة هو الإجابة على الأسئلة: كيفية إنشاء كائن CSS، وكيفية دمج الصور في كائن CSS والتعرف على ثلاثة برامج توفر إنشاء بسيط وسهل لكائنات CSS (CSS Sprites)، لذلك لن أتحدث المزيد عن التكنولوجيا نفسها. يوجد الآن الكثير من المواد المعقولة والمفصلة حول هذا الموضوع على الإنترنت (لقد قدمت رابطًا واحدًا أعلاه). تم تخصيص المراجعة للعمل مع برامج إنشاء العفاريت CSS (مولدات العفاريت)، حيث سأتطرق بإيجاز فقط إلى بعض النقاط المهمة (في رأيي) عند استخدام العفاريت. اسمحوا لي أن أقوم بالحجز على الفور - إن استخدام CSS sprites ليس حلاً سحريًا ومحاولة حشو صور كبيرة من الرؤوس وشاشات البداية والرسومات المستخدمة في النقوش المتحركة تماما مثل الرسومات، كيف لا صور الخلفية، لاتفعل ذلك. يوصى باستخدام النقوش المتحركة للصور الدائمة التي غالبًا ما تتكرر على الصفحات. إذا تم استبدال هذه الصور في كثير من الأحيان بأخرى، فستكون هناك حاجة لإنشاء نقوش متحركة جديدة، وبالطبع تحرير CSS وHTML.

المولدات التجريبية لـ CSS Sprite هي برامج مجانية CssSpriter-1.2, DoHTMLSpriteو مولد العفريت 0.2. إذا تم ذكر الأول منهم هنا وهناك في موارد اللغة الروسية، فأنا لم أر أي ذكر للثاني والثالث في Runet. تميل جميع مولدات رموز CSS تقريبًا إلى أن تكون موارد عبر الإنترنت (تتبع الاتجاه السائد الحالي). علاوة على ذلك، لا يزيد عدد الناطقين بالروسية عن اثنين أو ثلاثة منهم. أحب البرامج والخدمات عبر الإنترنت التي يمكنني اكتشافها، إن لم يكن على الفور، فبعد عدة محاولات. من بين مولدات الصور المتحركة التي قمت بمراجعتها، أعجبني المولد الذي سبق ذكره أكثر من غيره. من أجل البساطة والراحة والتخصيص والكفاءة والقدرة على التنبؤ. بقية المولدات (معظمها عبر الإنترنت) لم تستوف هذه المعايير (ربما لم تكن الأذرع مستقيمة تمامًا أو تنمو من المكان الخطأ، أو لم يتم توجيه الرأس في الاتجاه الصحيح). يمكن للمستخدم ذو الخبرة (إذا كان يتجول هنا فجأة) أن يبتسم - لماذا تهتم إذا كان من الممكن عمل النقوش المتحركة في محرر الرسومات، ويمكن حساب الإحداثيات (حسنًا، حسنًا). بالطبع يمكنك ذلك، لكني أفضل استخدام الأدوات المتخصصة، وما زلت أفضل تطبيقات سطح المكتب * . تم اختبار البرامج الثلاثة الموصوفة ضمن نظام التشغيل Windows XP SP3. قدراتها ليست واسعة النطاق مثل Instant Sprite، ولكنها تستحق الاهتمام جدًا.
مذكرة بتاريخ 22.02.14. جميع الروابط في هذه المقالة التي تذكر برنامج Instant Sprite تؤدي إلى إعلان مفصل إلى حد ما عن الترجمة الأولى لهذا البرنامج. بعد كتابة مقال منفصل عن Instant Sprite، قررت الارتباط به هنا أيضًا. ها هي - .
ملاحظة أخرى. أود أن أعلن عن مقال مكتوب مؤخرًا يسلط الضوء على طريقة مختلفة قليلاً لتحديد إحداثيات وأحجام كائنات CSS لوضعها على صفحات الويب. هنا هو الرابط لهذه المقالة:
ومع ذلك فلنبدأ بمراجعتنا..

مولد العفريت CssSpriter-1.2

برنامج صغير مجاني (أرشيف مضغوط 150 كيلو بايت) لا يحتاج إلى التثبيت. يعد العمل مع برنامج إنشاء CSS sprites أمرًا سهلاً، والواجهة بسيطة وواضحة. أزرار شريط الأدوات تكرر عناصر القائمة وتحتوي على تلميحات أدوات. تعرض اللوحة اليسرى الصور المصدر بأحجامها وإحداثياتها في الكائن المستقبلي، وتعرض اللوحة اليمنى نتائج البرنامج (علامة التبويب الأولى هي كائن CSS الناتج، والثانية هي العرض التوضيحي html).

يمكنك إضافة صور ليتم دمجها في كائن من مربع حوار النظام واحدة تلو الأخرى أو عن طريق التحديد المتعدد من مجلد مُجهز بالصور. يمكنك أيضًا إضافة الصور باستخدام طريقة السحب والإفلات. يدعم البرنامج إدخال الصور بالتنسيقات التالية: إيكو، جيف، بابوا نيو غينيا، بمب، JPG. ملفات الفوتوشوب psdغير مدعومة، ولم أجرب التنسيقات الأخرى - فهناك الكثير منها. لا أوصي باستخدام التنسيقين الأخيرين bmpو jpg. وهي لا تدعم الشفافية، والتي تظهر بوضوح في قائمة الصور المصغرة في اللوحة اليسرى وفي الصورة الناتجة في اللوحة اليمنى (الصور بهذه التنسيقات سيكون لها خلفية سوداء أو هوامش في الكائن، كما يقول بعض المستخدمين). لتطبيق مثل هذه النقوش المتحركة على صفحات الويب، ستحتاج إلى تقليل عمق الألوان وإعادة تعيين الشفافية، الأمر الذي لا يعمل دائمًا بشكل صحيح. تنسيق إخراج واحد – بابوا نيو غينيا 32 بت. لعرض الصورة بشكل طبيعي في الإصدارات الأقدم من Internet Explorer، يُنصح بتحويل الصورة إلى تنسيق 8 بت بي إن جيوتعيين الشفافية مرة أخرى. في علامة التبويب الثانية من الجزء الأيسر، يمكنك عرض علامة HTML مع أنماط CSS المتداخلة لتطبيق النقوش المتحركة.

من خلال النقر على الزر الأيسر من شريط الأدوات، يتم تصدير مشروعنا إلى HTML. ستظهر ثلاثة ملفات في المجلد المحدد لحفظ النتيجة:

يتيح لك البرنامج أيضًا إنشاء كائن بترتيب أفقي للصور المدخلة. الزر المشار إليه بالسهم الأحمر ينفذ هذه الميزة. يرجى ملاحظة أن إحداثيات الصور المضمنة في الكائن قد تغيرت (مقارنة بالموقع الرأسي).

النتائج التي قدمها لنا البرنامج هي الأساس لتطبيق النقوش المتحركة على صفحتك. بالطبع، تحتاج إلى ربط الأنماط الموجودة بأنماط الكائنات، ويمكنك استخدام المعرفات بدلاً من الفئات، ويمكنك تحسين أنماط الكائنات نفسها، وتطبيق العلامات التي تحتاجها، وتصدير الأنماط إلى ملف خارجي، وما إلى ذلك. - كل شيء سيعتمد على الصفحة التي ستستخدم فيها النقوش المتحركة، وكذلك على تفضيلاتك ومهاراتك.
ومع ذلك، ليس كل شيء على ما يرام. البرنامج، في رأيي، لديه عيب واحد خطير. لا توجد طريقة لتعيين الفجوات (الإزاحات والمسافات البادئة) بين الصور في الكائن، لذلك عند عرض صفحة ذات مقياس تكبير أو تقليل، وهو ما يحدث أحيانًا، قد تحدث جميع أنواع التداخلات. العيب الثاني، ولكنه أصغر، هو استحالة فرز الصور في البرنامج، لذلك تحتاج إلى تحميل الصور في البرنامج بالترتيب الذي تحتاجه (في الواقع، هذه مجرد مسألة تفضيلاتك الخاصة؛ وفي النهاية، استخدام يتم تحديد الصورة المطلوبة عن طريق تحديد إحداثياتها).

مولد العفريت DoHTMLSprite

من الصعب أن نفهم من هو مؤلف هذا البرنامج، لكن جميع أرشيفات البرامج الأجنبية تقريبًا توفر رابطًا إلى http://www.downloadinn.com/dohtmlsprite.html كمصدر أساسي. وهذا أيضًا عبارة عن أرشيف ملفات حيث يمكنك العثور على مؤلف المنشور - ستيفان جراسوتو. يؤدي النقر على هذا الرابط إلى نقلك إلى موقع الويب الخاص بشخص معين Alexandru Tertisco – http://www.teral-soft.com. ولم أجد أي أثر لهذا البرنامج في الموقع، يمكنكم تحميل البرنامج من الرابط الأول المذكور.
يتمتع البرنامج المجاني الصغير (zip archive 13 kb) بواجهة فائقة الزهد، لكنه لا يعرف محتوياته. كما أنه لا يتطلب التثبيت.

خوارزمية التشغيل هي كما يلي:

• حدد المجلد الذي يحتوي على الملفات المصدر (يجب إنشاء المجلد مسبقًا ووضع الملفات الضرورية فيه)
• قم بتعيين المجلد الوجهة لحفظ النتائج
• إنشاء كائن

دعونا نحاول إنشاء كائن CSS من نفس الصور التي تم استخدامها في مراجعة البرنامج الأول: ملفان gifوواحدة في وقت واحد منظمة التعاون الاقتصادي، بمب، JPG، بابوا نيو غينياو psd. البرنامج الأول سمح بتحميل جميع الملفات ماعدا psdأي أنني قمت بتنزيل 6 ملفات من أصل 7. دعونا نرى كيف يتصرف DoHTMLSprite.

اكتشف البرنامج 5 ملفات من أصل 7 مقابل 6 اكتشفها CssSpriter-1.2. والتي لا تزال مجهولة.
قم بتعيين مجلد الإخراج واضغط على الزر إنشاء كائن. يقوم البرنامج بالإبلاغ بمرح عن إنشاء كائن وملف CSS وملف HTML تجريبي.

دعونا نلقي نظرة على محتويات مجلد الإخراج. في الواقع، جميع الملفات المذكورة مع بعض الأسماء غير القابلة للنطق موجودة هناك.

دعونا ننظر إليهم، بدءا من العفريت. كما ترون، تم إنشاء ملف العفريت بالتنسيق بي إن جيسأتحدث أيضًا عن عمق الألوان - وهو نفس 32 بت كما في البرنامج الأول. وهذا يعني أن جميع التعليقات المتعلقة بالشفافية تنطبق أيضًا على المتصفحات القديمة.
وبالنظر إلى الصورة العمودية (ولا يمكنك تغيير اتجاهها، وهذا ليس عيبا كبيرا في البرنامج)، نلاحظ أن هذا البرنامج لا يدعم التنسيقات icoو psdكمدخل. سيرى مستخدمو المتصفحات القديمة أيضًا خلفية رمادية على الكائن، بالإضافة إلى خلفية سوداء على الصور التي تم استخدام ملفات الإدخال لها bmpو jpg، والتي لا تدعم الشفافية أصلاً. عند الفحص الدقيق، يمكنك أن ترى أن الكائن يحتوي على ثغرات(المسافات البادئة، الإزاحات) بين الصور، أي أن العيب الرئيسي للبرنامج السابق ليس هنا. إذا نظرت إلى إحداثيات الصور أدناه (في ملف النمط)، يمكنك أن ترى أن هذه الفجوة تبلغ 5 بكسل.

كما ترون، لا يتم استخدام الأنماط المتداخلة هنا، ولكن تم إنشاء ملف نمط خارجي، وهو رابط موجود في التعليمات البرمجية.

وهذا ما تبدو عليه الصفحة التجريبية (جزء منها) عند عرضها في متصفح حديث. تُظهر لقطة الشاشة هذه أيضًا فجوات بين الصور الفردية، ولكن تم تعيينها بالفعل في ملف النمط (التفاصيل أدناه).

الملف الأخير الذي أنشأه البرنامج هو ملف النمط الخارجي.

هنا يمكنك رؤية إحداثيات جميع صورنا في الكائن. يُظهر الفحص الدقيق للإحداثيات أنها تأخذ في الاعتبار الفجوات التي تبلغ 5 بكسل بين الصور الموجودة في الكائن والتي يحددها البرنامج بدقة (أبعاد الصور هي 32x32 بكسل، والفرق في الإحداثيات هو 37 بكسل، 37-32=5) . بالنسبة للصفحة التجريبية، قام المؤلف بتعيين الهوامش الخارجية في الأعلى والأسفل في الأنماط أيضًا على 5 بكسل (كان من الممكن تعيين قيمة أخرى)، باستخدام خاصية الاختصار هامِش. عند مقارنة صفحات HTML التجريبية التي تم إنشاؤها بواسطة البرنامجين الأول والثاني، يمكنك رؤية كيفية تأثير الأنماط المستخدمة على موضع الصور على الصفحة. يستخدم بعض المستخدمين هامِش"كأداة إضافية لتجنب التداخلات غير المتوقعة عند تغيير حجم الصفحة عند العرض. من المحتمل أن يكون هذا مفيدًا عند إنشاء وتحسين الأنماط للكائن الذي تم إنشاؤه بواسطة البرنامج الأول، حيث لا توجد فجوات بين الصور في الكائن على الإطلاق. متى عند إنشاء الأنماط وتحسينها للكائنات المتحركة الخاصة بك، عليك أن تقرر بنفسك ما هي الخصائص التي تحتاجها وكيفية استخدامها.

أود أن أشير إلى أن البرنامج يولد في البداية نمطًا مدمجًا من سطر واحد ولا يضع وحدة قياس (px) بعد الإحداثي الصفري؛ فالصفر يساوي صفرًا في أفريقيا، سواء بالبكسل أو بالكيلوجرام. بعض الخدمات عبر الإنترنت لإنشاء كائنات CSS لا تتمتع بمثل هذا التفكير.

الاستنتاجات

لن تكون هناك استنتاجات بشأن استخدام البرامج التي تمت مراجعتها. سوف تجعلهم بنفسك. لقد أوجزت بالتفصيل الكافي كل ما مررت به بنفسي، والباقي متروك لك. لاختتام هذه المراجعة المطولة، سأشارك بعض الاقتراحات العشوائية والنصائح الاختيارية لاستخدام نقوش CSS المتحركة.

• لا تحاول إنشاء كائن واحد فقط لجميع المناسبات ووضع جميع الصور المستخدمة في صفحاتك فيه، فهذا سيؤدي إلى تعقيد تعديلات HTML وCSS إذا لزم الأمر في المستقبل
• قم بإنشاء صور متحركة للعناصر الرسومية المتكررة بشكل متكرر مثل الشعارات والأيقونات والأزرار وعناصر التنقل والتحكم الأخرى
• حاول إنشاء نقوش متحركة من صور بنفس الحجم (من الأفضل ألا تصنع نقوشًا متحركة واحدة من صور ذات أحجام مختلفة، ولكن عدة نقوش متحركة، ولكن كل صورة لها نفس الحجم)، سيساعد ذلك في تحسين الأنماط المستخدمة (سأفعل ذلك عرض مثال واحد أدناه)
• لا تستخدم الصور بتنسيقات لا تدعم الشفافية أصلاً لإنشاء صور متحركة (من الأصح والأفضل استخدام صور الإدخال بتنسيقات) gifو بي إن جيوبالنسبة للبرنامج الأول و Instant Sprite المذكور يمكنك أيضًا استخدامه ico)
• لدعم شفافية ملفات الإخراج بي إن جيفي المتصفحات القديمة، قم بتحويلها إلى تنسيق 8 بت أو إلى GIF(هناك أيضًا اختراقات CSS يمكنها حل هذه المشكلة لـ png، لكن هذا ليس موضوع مراجعة اليوم)
• تحسين الأنماط (يمكنك استخدام الخدمات والبرامج عبر الإنترنت وTopStyle وRapid CSS وما إلى ذلك أو التحرير يدويًا)
• تحسين الصور المتحركة - من الملائم والفعال للغاية استخدام الخدمة عبر الإنترنت TinyPNG (http://tinypng.org) أو البرنامج مكافحة الشغب، تمت مراجعته في (أوصي به بشدة)
• استخدم النقوش المتحركة للحصول على طريقة بسيطة وأنيقة لتمرير الصور على صفحاتك دون استخدام البرامج النصية
• وفي رحلة طويلة...، العلم بين يديك...، إلى الأمام وبأغنية...

ملاحظة. حول تحسين النمط المذكور

سأفكر في مثال واحد فقط للتحسين المحتمل عند استخدام صور بنفس الحجم. لنقم بإنشاء كائن تجريبي من صور بنفس الحجم باستخدام DoHTMLSprite ونرى الأنماط التي تم إنشاؤها.

أولاً، لا أحتاج إلى الحشوة الإضافية، لذا سأقوم بإزالتها من ملف النمط. ثانيًا، جميع صوري بنفس الحجم، لذلك لا شيء يمنعني من تثبيت الأحجام مرة واحدة فقط في النمط الخاص بالكائن الرئيسي نفسه. هذا ما حدث.

انخفض حجم الملف من 1403 بايت إلى 749 بايت (مرتين تقريبًا)، وكل شيء يعمل بشكل رائع. إذا نظرت عن كثب إلى هاتين اللقطتين، فمن المحتمل أنك رأيت أنني قمت أيضًا بإزالة المسافات الإضافية والفواصل المنقوطة الاختيارية قبل قوس الإغلاق المتعرج. من أجل المقارنة البصرية، قمت أيضًا بتحسين نمط الكائن الأصلي الذي تمت مناقشته بالفعل. وهذا ما حدث عند عرضه في المتصفح.

إذا قارنت لقطات الشاشة، ستلاحظ الفرق. اختفت الفجوات بين الصور الموجودة على الصفحة، والتي تحددها الخاصية (الهامش: 5 بكسل 0). قررت أنني لست بحاجة إليها (سيتم وضع النقوش المتحركة في أماكن مختلفة على الصفحة، وليس على التوالي، كما في المثال التجريبي). في الوقت نفسه، لم تختف الفجوات الموجودة في صورة Sprite نفسها التي أنشأها البرنامج في أي مكان، وستكون بمثابة شبكة أمان لنا أثناء التحجيم المخصص المحتمل للصفحة عند عرضها في المتصفح.

وأخيرا، آخر شيء

من بين الخدمات المعلن عنها على نطاق واسع لإنشاء كائنات CSS، هناك خدمة متميزة سبرايت مي. يقوم تلقائيًا بالعثور على الصور التي يمكن دمجها في نقوش متحركة، ويقدم توصيات فورية لإعادة تنظيم ملفات الأنماط وعلامات HTML. جربها. لقد بدأت بها ذات مرة، وساعدتني الخدمة في فهم جوهر استخدام العفاريت. ولكن لسوء الحظ، وجد فقط 20% من الصور الموجودة على صفحاتي والتي يمكن إنشاء العفاريت منها. ولهذا انتقلت إلى ما ذكرته أكثر من مرة، وأتمنى لك نفس الشيء. من بين العديد من الصور المنشورة على صفحاتي، جميع صور الخلفية عبارة عن نقوش متحركة. بالإضافة إلى ذلك، يتم إنشاء أزرار التحكم (مثل تحميل ملف أو التمرير لأعلى الصفحة أو عرض لقطة شاشة أو مقطع فيديو) من النقوش المتحركة باستخدام تأثير التمرير باستخدام CSS.
الجميع!

بطريقة ما لا أستطيع إنهاء المراجعة. لقد قمت بنشره للتو وبعد يوم واحد وجدت مولد CSS Sprite آخر.

مولد العفريت SpriteGenerator 0.2.

ليس أيضًا عبر الإنترنت، ولكنه تطبيق Win. برنامج صغير، يبدو مفتوح المصدر، ويتم توزيعه بموجب ترخيص عام معين من Microsoft. يحتوي البرنامج على واجهة بسيطة وبديهية إلى حد ما.

دعنا نشير إلى المسار إلى نفس المجلد بالصور التجريبية للبرامج التي تمت مناقشتها بالفعل. لنحدد المجلد لإخراج الكائنات، ثم نحدد نفس المجلد لإخراج ملف CSS.
يتيح لك البرنامج تحديد تخطيط الكائن المستقبلي: أفقيًا ورأسيًا ومستطيلًا ووفقًا لتقدير البرنامج (الاختيار التلقائي). بالنظر إلى المستقبل، سأقول أنه عندما يكون هناك الكثير من الصور المدخلة، يقوم البرنامج نفسه بتعيين التخطيط التلقائي - يتم إلغاء تنشيط الخيارات المتبقية، والكائن الناتج مستطيل. يتيح لك البرنامج ضبط الفجوة بين الصور وتعيين المسافات البادئة. حدد المعلمات المشار إليها في لقطة الشاشة واضغط على الزر يخلق. البرنامج يطير بعيدا في مكان ما دون تقرير. دعونا نلقي نظرة على مجلد الإخراج.

أنشأ البرنامج ملفين: ملف نمط وكائن بتنسيق PNG 32 بت (لقد حددت أسمائهم عند تحديد مجلد الإخراج). لم يقم هذا البرنامج بإنشاء صفحة تجريبية. دعونا نلقي نظرة على العفريت.

ما يلفت انتباهك على الفور: لم يتبق سوى 4 صور من أصل 7. اتضح أن البرنامج لا يقبل الملفات bmp، في الصورة مع تنسيق الإدخال jpgتظهر أيضًا قطعة من الخلفية السوداء، وسيرى مستخدمو المتصفحات الأقدم أيضًا خلفية رمادية في الصور الأخرى. مرة أخرى، لم أقم بتحسين الكائن أو ضبط الشفافية. الشيء الثاني الذي يجب ملاحظته هو وجود فجوات حول كل صورة - وهذا أمر متوقع نظرًا لأن البرنامج يدعم التخطيط المستطيل. ولكن من الواضح أن الفجوات بين الصور والحد الخارجي أكبر من الفجوات بين الصور نفسها. يصبح كل شيء واضحًا عندما نلقي نظرة على ملف النمط.

أول شيء يجب ملاحظته هنا هو أن البرنامج قام بحفظ أسماء الصور المدخلة، بدلاً من تحديد أسماء مجهولة الهوية في البرامج التي تمت مناقشتها أعلاه. ثانيًا، المسافة البادئة التي وضعناها، حيث اعتبرتها خاصية هامِش، وليس في ملف النمط. اتضح أن كلا الخيارين لتحديد الفجوات في البرنامج مرتبطان بالصورة نفسها: أحدهما (المسافة بين الصور) يضبط الفجوات بين الصور نفسها، والثاني (عرض الهامش) – بين الصور التي يتكون منها الكائن وكائنه. الحدود الخارجية. إذا نظرت إلى الخصائص موقف الخلفيةفي ملف النمط، يمكنك أن ترى أنه يأخذ في الاعتبار كلا النوعين المذكورين من المسافات. لنقم بإنشاء صفحة ويب تجريبية بأنفسنا، بما في ذلك مسافات بادئة مختلفة في ملف النمط من أجل الوضوح (نحن نتحدث عن مسافات بادئة في ملف النمط من أجل الوضوح في تحديد موضع الصور على الصفحة).

لقد التقطت لقطة شاشة عن قصد عند المشاهدة في IE6 حتى تتمكن من رؤية الخلفية غير الشفافة للصور. لقد تحدثت بالفعل عن كيفية تجنب ذلك بالنسبة للمتصفحات الأقدم. في المتصفحات الحديثة، يبدو كل شيء على ما يرام، باستثناء تنسيق صورة الإدخال jpg، الذي لا يدعم الشفافية أصلاً، هنا الخلفية سوداء.
بالنسبة للمهتمين، إليك لقطات شاشة لملفات HTML وCSS للمثال الأخير.

خاتمة

لا تتظاهر مراجعتي بأنها كاملة أو تقدم تغطية تفصيلية للعديد من المشكلات، ولكن يمكن استخدامها كمثال لاستخدام الكائنات CSS على صفحة ويب ومثال على إنشائها في مولدات الرموز المتحركة.

لم أقم بترويس البرامج المدرجة في المراجعة، فهي بسيطة جدًا ومفهومة بدون ترجمة. سأكون سعيدًا إذا كانت هذه المراجعة مفيدة لشخص ما. (UPD - قمت لاحقًا بترجمة البرنامج الأصغر والأبسط، ولكن ليس أقل وظيفية - DoHTMLSprite. يمكن العثور على الإعلان عن ترجمته على صفحة الأخبار.)

بعد نشر هذه المراجعة، وجدت العديد من البرامج (وليست الخدمات) على الإنترنت لإنشاء نقوش CSS المتحركة. لكن كل هذه البرامج أدنى من البرامج الموصوفة هنا. إما من خلال الوظيفة، أو من خلال استقرار التشغيل، أو من خلال خصائص أخرى. ولذلك، لن أضيف إلى هذا الاستعراض. البرامج التي تمت مناقشتها في هذه المراجعة تقوم بعمل ممتاز في واجباتها. يمكنك التوصية بأي منها لإنشاء نقوش CSS المتحركة.

ربما هذا هو الحال الآن!

شكرا لقراءة كل هذا.

*) في السابق، كنت متشككًا إلى حد ما بشأن إنشاء كائنات CSS باستخدام برامج تحرير الرسومات. لكن حفنة من المحرر المجاني الأعرجمع الإضافات CSS WebSpritesو حفظ للويبجعلني أغير رأيي. دفعتني البساطة والحدس والقدرات الإضافية لإنشاء كائنات CSS وتحسين الأنماط والصور إلى كتابة مقال آخر حول هذا الموضوع. إذا كنت ترغب في ذلك، يمكنك التعرف عليه على الصفحة.
أوصي أيضًا بالتعرف على طريقة مختلفة قليلاً للتعامل مع كائنات CSS وتحديد إحداثياتها وأحجامها في المقالة.

يمكنك العثور على مواقع الويب الحديثة على عدد كبير من الرسومات بمختلف أنواعها: صور المنتجات، والصور الرمزية للمستخدم، والصور التي تشكل تصميم الصفحات، والأزرار، والأيقونات، والشعارات، وما إلى ذلك. وكلما كان المشروع أكبر، كلما زاد استخدام الملفات الرسومية. عند فتح صفحة منفصلة للموقع في المتصفح، يتم تحميل كافة عناصره. لذلك، عندما يكون هناك عدد كبير جدًا من الرسومات، تميل سرعات التحميل إلى التباطؤ بشكل ملحوظ. وهذا بدوره محفوف بالإزعاج لزوار مشروعك.

العفاريت CSS

يوجد في الصفحة الرئيسية نموذج لتحميل الملفات الرسومية (يوجد لكل ملف زر منفصل). في البداية، تظهر ثلاثة أزرار تنزيل فقط. إذا كنت بحاجة إلى المزيد، فانقر على "بحاجة إلى المزيد".

بعد تحديد جميع الملفات الخاصة بكائن CSS المستقبلي، انقر فوق الزر "خيارات". سيتم فتح لوحة صغيرة بها الإعدادات أمامك. هنا يمكنك تعيين الهوامش بين العناصر بالبكسل، وإضافة إطار للصور، ومحاذاة جميع الصور في الكائن النهائي إلى الحافة اليسرى أو العلوية، وتعيين لون الخلفية بتنسيق RGB.

بعد النقر على زر "إنشاء"، سيتم إنشاء كائن CSS مباشرة. سترى أيضًا تعليمات صغيرة لاستخدامه، وهي رمز CSS الذي ستحتاج إلى وضعه على موقع الويب الخاص بك. حتى أن هناك مثال في HTML. لا أعتقد أن معرفة ذلك يمثل مشكلة.

من الناحية المرئية، فإن Dan’s Tools CSS Sprite Generator عبارة عن مولد CSS رائع جدًا يحتوي على العديد من الإعدادات. يمكنك، على سبيل المثال، اختيار نوع عمودي أو أفقي لإدراج الرموز في الصورة العامة.

العفاريت CSS

في خدمة CSS Sprites، كل شيء بسيط للغاية سواء من حيث التصميم أو الإعدادات. هناك خيار لتنسيق الصورة الناتجة: PNG، JPEG، GIF. تحتوي الصفحة على رابط لإصدار قابل للتكيف من إنشاء الكائنات المتحركة - الكائنات المستجيبة لـ CSS (على الرغم من أنني لم أجربه).

المجموع. من حيث المبدأ، نظرنا في جميع الفروق الدقيقة في كيفية إنشاء CSS Sprites واستخدامها. ستساعد المولدات في تسريع عملية إنشاء العناصر، ولكن يمكنك القيام بذلك باستخدام Photoshop. إذا كان لديك أي أسئلة، فاكتب في التعليقات.

أولا، مقدمة قصيرة. عند تحميل صفحة ما، يُسمح للمتصفحات بطلبين فقط إلى الخادم (في المتصفحات الحديثة ارتفع هذا العدد إلى 6). كل عنصر من عناصر الموقع، سواء كان ملفًا يحتوي على ورقة أنماط أو ملفات جافا سكريبت أو صور، عبارة عن تنزيلات مستقلة تتطلب طلبًا منفصلاً إلى الخادم.

قد يكون هناك العديد من الصور المصغرة على الموقع. على سبيل المثال، الرموز والسهام وجميع أنواع عناصر التصميم الصغيرة. تزن كل صورة من هذه الصور قليلًا، ولكن نظرًا للعدد الهائل من الطلبات، تنشأ مشكلات في سرعة تحميل الموقع.

منذ زمن طويل (2003-2004)، تم اقتراح حل لهذه الحالة بهدف رئيسي وهو تسريع تحميل الموقع عن طريق تقليل عدد الطلبات الواردة إلى الخادم. هذه التكنولوجيا تسمى "العفاريت".

ما هي العفاريت CSS

سبرايت CSS- تقنية دمج الصور الصغيرة في صورة واحدة. باستخدام التحولات عبر CSS، يتم تحقيق قطع الجزء المطلوب من الصورة

على سبيل المثال، بدلاً من 10 صور، يتم تحميل صورة واحدة، ولكنها أكبر. مع التوزيع المناسب، يؤدي ذلك إلى تسريع الموقع. ومع ذلك، فإن الشيء الرئيسي هنا هو عدم المبالغة في ذلك. لا يعطي الجمع بين الصور دائمًا ميزة عند تحميل الموقع.

مثال CSS Sprite

دعونا نلقي نظرة على مثال صغير لتطبيق CSS sprite. لنفترض أننا صنعنا الصورة التالية من ثلاثة أسهم منفصلة.

للوصول إلى السهم المطلوب في CSS تحتاج إلى الكتابة

Вот как это выглядит на странице:

В рассмотренном примере мы использовали отрицательные отступы. Это делается, для того, чтобы поднять изображение вверх. Например, есть следующий спрайт:

Чтобы вырезать значок RSS мы должны написать следующие отступы

background-position : -90px -40px ;

В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.

Плюсы использования спрайтов

• Сокращение количества обращений к серверу
• Если используются динамическое изменение картинки (например, при наведении в элементе меню), то картинка уже будет находится в кэше и поэтому не будет запаздывания на загрузку в нужный момент
• Если фон объединяемых изображений схож, это еще и уменьшить суммарный "вес" изображений

Из минусов спрайтов: сложность работы в случае ручного труда. Но благо есть бесплатные сервисы, которые готовы упростить работу и сделать все за вас.

Слово спрайт (англ. sprite - фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и "оживления" мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон - сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников.. эти самые плёнки они и называли спрайтами.

Потом термин спрайт внедрился в компьютерную графику и особо широкое распространение получил в компьютерных играх - но это тоже не совсем то о чем я хочу Вам поведать.. Сегодня я хочу Вам рассказать о так называемых CSS-спрайтах..

Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких "частей", которые показываются как бы по отдельности в зависимости от действий пользователя..

Что слишком много слов.. покажу пример..

Это спрайт который присутствует на каждой странице данного сайта:

Просто в "спокойном" состоянии Вам показывается одна его часть, а при наведении курсора другая.

Как это сделать? На самом деле все достаточно просто.

В данном примере для блока с фиксированными размерами мы в качестве фона загружаем "двойное" изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую "часть" фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.

Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:

Открываем значит фотошоп и рисуем в нём примерно такой рисунок:

Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет "скакать". Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..

Итак, у нас получилась "двойная" картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.

Он у меня получился таким.. смотрим результат и читаем комментарии в коде:

وهذه هي القائمة التي حصلنا عليها:

أعتقد أن العديد من القراء يتساءلون: "لماذا هناك حاجة لهذه النقوش المتحركة على الإطلاق إذا كان من الممكن القيام بنفس الشيء باستخدام صورتين منفصلتين، حيث تكون إحداهما الخلفية لرابط فقط، والثانية لرابط مع :يحوم، دون الحاجة إلى القتال باستخدام Photoshop وحساب إحداثيات الخلفية لـ CSS؟؟"

أولا: سرعة تحميل الصور تزداد بشكل ملحوظ!! على الرغم من أن الصورة "المزدوجة" تزن نفس وزن صورتين صغيرتين "مفردتين" منفصلتين، إلا أن تحميل صورة واحدة كبيرة يكون أسرع، نظرًا لأن المتصفح لا ينشئ طلبات HTTP إضافية إلى الخادم.

هل تتذكر عندما أظهرت لك شعار العفريت الخاص بي وقلت إنني أكذب؟ فمكرتي تكمن في أن هذه الصورة لا تحتوي على جزأين منطقيين من الصورة، بل ثمانية عشر!!

ويبدو مثل هذا بالكامل:

أي أن جميع الرسومات التي تراها على هذا الموقع تقريبًا تأتي إليك في الواقع على شكل صورة واحدة! لن أعرض ملف CSS، فأنا أخاف منه بنفسي..)))،

إذن، إليك طلبات HTTP... إذا كانت هناك 18 صورة بدلاً من صورة واحدة، فسيبدو حوار المتصفح مع الخادم كما يلي:

المتصفح: مرحبا الخادم! أنا هنا منك، بناءً على طلبي، أتلقى مستندات HTML وCSS، وهي تشير إلى ذلك في مجلد "الرسومات" الخاص بك... يجب أن تكون هناك صورة بالاسم: "picture1" أسقطها، هاه ؟
الخادم: مرحبًا أيها المتصفح، لم أراك منذ وقت طويل، سألقي نظرة الآن... نعم، لدي مثل هذه الصورة! يمسك!!
المتصفح: شكرا، اشتعلت ذلك! ولكن ما زلت بحاجة إلى "picture2" في نفس المجلد ..
الخادم: نعم وهناك واحد .. أنا أرسل ..
المتصفح: تم الرفع.. ولكن هنا يشار أيضًا إلى "الصورة 3".
الخادم: ولا تستطيع النوم! احتفظ بصورتك!!
المتصفح: شكرًا لك! نعم، لأكون صادقًا، لقد سئمت من ذلك بالفعل، لكن المستخدم يريد تحميل الصفحة بالكامل... باختصار، يجب أن يكون لديك أيضًا "picture4" هناك...
الخادم: لقد بدأت تضغط علي! الى صورتك!!
المتصفح: آسف، ولكن ليس خطأي أن هناك الكثير من الصور هنا !!! تحتاج إلى "صورة 5"!
الخادم: أنت بالفعل تجعل المعالج يغلي!! ترددت!! احصل على صورتك!!
... ... ...

لن أتكلم أكثر من هذا الحوار، لأن ما يلي هو لغة بذيئة ...

لماذا كل هذا الثرثرة بين الخادم والمتصفح (العميل)، الذي يستغرق الكثير من الوقت وحركة المرور، وأيضا تحميل الخادم عندما يكون هناك عدد كبير من زوار الموقع، إذا كان إنشاء HTTP واحد أسرع بكثير وأكثر اقتصادا اطلب واستلم جميع الصور الـ 18 في طرد واحد!!

ثانياً: تحميل صورة ثانية عند استخدام فئة زائفة :يحوميحدث فقط في اللحظة التي يقوم فيها المستخدم بالتمرير فوق الرابط مع الصورة الأولى. إذا كانت هذه صورة صغيرة مثل زر من المثال أعلاه، فلن يحدث شيء سيء بشكل خاص - سيتم تحميل الصورة الثانية بسرعة ولن يلاحظ المستخدم أي شيء... ولكن ماذا لو كانت هذه صورة كبيرة في الوزن والحجم؟ ؟ ثم سيشاهد المستخدم كيفية تحميله، على الرغم من أنه مستعد نفسيًا للتغيير السريع للصور! زائد آخر للعفاريت! ... على الرغم من ذلك، بصراحة، هذا أيضًا ناقص.. ناقص إذا لم يمرر المستخدم مؤشر الماوس مطلقًا أثناء الجلسة.. تم تحميل الصورة، لكنها لم تكن مفيدة له.. لكن صدقوني، هذه "ضحية حركة المرور" تؤتي ثمارها دائمًا!

وثالثاً: مهما بدا لك الأمر غريباً، فهو مريح!! من الملائم الإشارة إلى المسار إلى نفس الصورة في الكود، ومن الملائم تحريرها في Photoshop، على سبيل المثال، لجعل الموقع بأكمله أكثر سطوعًا أو أغمق من خلال العمل مع صورة واحدة، كما أنه ملائم للتخزين، كما أنه مناسب للتحميل إلى الخادم، وحتى في CSS من الملائم العمل مع كائن كبير! - مع أن ذلك يتطلب مهارات وعادات معينة..

حسنًا، قرر بنفسك هل ستستخدم العفاريت أم لا.. وعملي صغير، فقط للفت انتباهك إلى المعلومات، إذا جاز التعبير.. وإذا ظهرت أي أسئلة إضافية، فأنا في انتظارك في