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

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

اردلان

شاه‌وردی

۱۳۹۸/۰۷/۱۴

4

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

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

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

 

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