لینک صفحه مثال برای این نوشته : http://cyberrabbits.net/non/css/sprite1/
یکی از راههای بهینه سازی یک صفحه وب، کم کردن تعداد درخواستهای مربوط به صفحه است. یعنی تعداد فایل های جانبی کم باشد و برای نمایش صفحه،‌بروزر نیاز به دانلود فایلهای کمتری داشته باشد.
بعد از یک بررسی ساده به کمک فایرباگ میتونید ببینید که تقریبا بیشتر از ۷۰ درصد درخواستهای سایتها مربوط به عناصری غیر از صفحه اصلی است. خوب این یه کم در مورد CSS مشکل سازه. یعنی معمولا ما تعداد زیادی از عناصر رو داریم که از تصویر پسزمینه استفاده میکنن. حالا چطور میتونیم این مشکل رو مرتفع کنیم؟ یعنی هم عناصرمون تصویر پسزمینه داشته باشن و هم اینکه تعداد فایلهای درخواستی کم بشه؟
جوب توی روشهای قدیمی برنامه نویسی دو بعدی پیدا میشه. چیزی که الان هم توی برنامه نویسی موبایل کاربرد داره و اونهم ادغام تصاویر در یک تصویر و استفاده از اون تصویر تکی.

قبل از ادامه بگم،‌این روش برای عناصری جواب گو مبتونه باشه که اندازه مشخص دارن و تصویر پسزمینه به صورت no-repeat هست. (مثلا دکمه ها،‌منو ها و…)‌در مورد تصاویری که قراره repeat-x یا y یا اصولا repeat بشن کار خاصی نمیشه انجام داد (با یه حقه میشه repeat-x و y رو هم تو این روش جا داد ولی repeat راهی نداره)
برای نمونه این تصویر رو ببینید :

تصویر مورد استفاده در جستجوی گوگل

تصویر مورد استفاده در جستجوی گوگل


این تصویریه که گوگل توی صفحه جستجوش ازش استفاده کرده. میبینید که همه آیتمهای توی صفحه جستجو یکجا تو این تصویر هست.
اول از یه مثال ساده شروع میکنم. میخوام یه لینک رو تبدیل کنم به یه دکمه و برای سه حالتش (hover – active و حالت عادی)‌سه تصویر مختلف بذارم ولی از یه فایل استفاده کنم. قبل از اینکه شروع کنم این صفحه رو ببینید، سمت چپیه حالت عادیه و سمت راستیه حالتی که همه تصاویر با هم هستن. نشانگر ماوس رو روی هر کدوم ببرید، سمت چپیه در هر حالت بازم شروع میکنه به گرفتن تصویر جدید ولی راستیه درست کار میکنه.
تصویر مورد استفاده رو ببینید :
تصویر مورد استفاده در این مثال

تصویر مورد استفاده در این مثال

یادداشت : این تصویر رو همینجوری توی آرشیوم پیدا کردم نمیدونم از کجا اومده ولی کار من نیست.
ادامه مطلب