تجمع تقنية تجميع الصور (Image Sprite) الصور المدمجة في ملف صورة واحد. وتكمن ميزة استخدام هذه التقنية في تقليل عدد طلبات HTTP اللازمة، مما يُحسّن أداء صفحة الويب.
عند استخدام تقنية تجميع الصور، تُدمج الصور الفردية في ملف واحد ثم تُعرض على صفحة ويب باستخدام لغة CSS. يُحدد كود CSS للمتصفح مكان عرض كل صورة داخل الملف. يمكن استخدام تقنية تجميع الصور لأي صورة، بما في ذلك الأيقونات والأزرار والخلفيات.
كيفية إنشاء صورة متحركة (Sprite)؟
لإنشاء صورة مركبة، ستحتاج إلى صورتين ترغب في دمجهما في صورة واحدة. يمكنك القيام بذلك باستخدام برامج تحرير الصور، ولكننا نوصي باستخدام برنامج فوتوشوب.
بعد الحصول على الصورتين، افتحهما في برنامج فوتوشوب. ثم، اختر قائمة "الطبقة" وانقر على "جديد". سيؤدي هذا إلى إنشاء طبقة جديدة يمكنك تسميتها كما تشاء. سنسميها "سبرايت"
الآن، اسحب إحدى الصورتين إلى طبقة "الرسوم المتحركة". باستخدام أداة التحريك، ضع الصورة بحيث تغطي الصورة الأخرى تمامًا. ثم، حدد أداة "الممحاة" وامسح أي أجزاء بارزة من الصورة الأولى.
وأخيرًا، حدد قائمة "ملف" وانقر على "حفظ باسم". اختر اسمًا وتنسيقًا لملف الصورة المتحركة الجديدة!
فوائد استخدام صورة متحركة (Sprite)
تُعدّ الصور المجمعة طريقة رائعة لتحسين أداء موقعك الإلكتروني. فهي تُساعد على تقليل عدد طلبات HTTP، وتقليل حجم صفحاتك، وتحسين سرعة موقعك بشكل عام.
تتمتع تقنية تجميع الصور بالعديد من المزايا، ولكن هذه الثلاثة من أهمها. إذا كنت ترغب في تحسين أداء موقعك، فإن استخدام هذه التقنية يُعدّ بدايةً ممتازة.
خاتمة
تُعرف الصور المجمعة (Sprites) بأنها مجموعة من الصور المدمجة في ملف واحد. تُستخدم هذه الصور بكثرة في تصميم المواقع الإلكترونية لتحسين أداء الصفحة عن طريق تقليل عدد طلبات HTTP اللازمة لتحميلها. ومن الطرق الرائعة الأخرى لاستخدام الصور المجمعة إنشاء تصميم متجاوب، حيث يتم دمج جميع الصور في صورة واحدة ثم تغيير حجمها وموضعها بما يتناسب مع الجهاز المستخدم.