کاربرد CSS Image Sprite در طراحی وب‌سایت

کاربرد CSS Image Sprite در طراحی وب‌سایت

اردلان

شاه‌وردی

1398/07/14

2130

بار بازدید شده
css-image-sprite CSS sprite تکنیکی است که به کمک آن می‌توانید گروهی از تصاویر کوچک وب‌سایت خود را در کنار یکدیگر داخل یک تصویر بزرگ کلی قرار دهید و سپس با استفاده از CSS، تصویر کوچک مورد نظر خود را از درون تصویر کلی در صفحات مختلف فراخوانی کنید.
2130
کاربرد CSS Image Sprite در طراحی وب‌سایت
Vidoal
4.98
کاربرد CSS Image Sprite در طراحی وب‌سایت

CSS Image sprite تکنیکی است که به کمک آن می‌توانید گروهی از تصاویر کوچک وب‌سایت خود را در کنار یکدیگر داخل یک تصویر بزرگ کلی قرار دهید و سپس با استفاده از CSS، تصویر کوچک مورد نظر خود را از درون تصویر کلی در صفحات مختلف فراخوانی کنید.
طراحان وب‌سایت می‌توانند با استفاده از تکنیک CSS Image Sprite، تصاویر مشترکی که در صفحات مختلف دارند مثل آیکون‌ها ، لوگو و تصاویر لایوت سایت را با یکدیگر ادغام کنند که با این عمل تعداد درخواست‌هایی که برای بارگذاری یک صفحه به سرور زده می‌شود را کاهش می‌یابند و در نتیجه زمان پاسخ (Response Time) سرور بهبود می‌یابد که باعث بالا بردن سرعت بارگذاری وب‌سایت می‌شود.
بطور خلاصه تکنیک CSS Image Sprite جهت بهینه‌سازی تعداد درخواست‌هایی که به سرور برای بارگذاری تصاویر ارسال می‌شود، استفاده می‌شود.

حال می‌خواهیم برخی از تولید کننده‌های آنلاین CSS Image Sprite را به اشتراک بگذارم که به شما در تولید اسپریت‌های CSS آنلاین کمک می‌کنند:

 

در پایان این مقاله چند نمونه از وب‌سایت هایی که تیم طراحی ویدولوپ از تکنیک CSS Image Sprite در طراحی و پیاده‌سازی آنها استفاده کرده است را بشما معرفی میکنیم: