در زمان لود شدن یک سایت، درخواستهای متعددی به سرور در راستای لود تصاویر سایت ارسال میشود. هر یک از این درخواست بر سرعت لود سایت نیز حجم پهنای باند مصرفی، تأثیر گذارند. CSS Sprite تکنیکی است که در طراحی سایت برای ترکیب چند عکس با هم به منظور کاهش تعداد درخواستهای ارسال شده به سرور در زمان لود سایت انجام می شود و از این طریق بر سرعت لود سایت می افزاید و پهنای باند مصرفی را کاهش میدهد.
تکنیک CSS Sprite مخصوصاً زمانی بهترین بازخورد را به نمایش می گذارد که تعداد زیادی تصویر در طراحی سایت به کار رفته باشد مثلاً تصاویری که در منوها معمولاً استفاده می شوند. با استفاده از این تکنیک، تصاویر با هم ترکیب شده و در قالب یک تصویر لود می شوند سپس تنها بخشی از تصویر که مربوط به هر قسمت است، به نمایش در می آید مثلاً سه دکمه خانه/قبل/بعد را در نظر بگیرید. این سه دکمه به شکل یک عکس در می آیند و بعد با استفاده از CSS، در هر قسمت فقط یکی از این سه قسمت نمایش داده می شود در حالیکه کلاً یک درخواست برای لود تنها یک عکس ارسال شده است.
چرا به جای CSS Sprite سراغ برش زدن و کوچک کردن تصاویر نرویم؟
یکی از روشهایی که در گذشته برای افزایش سرعت لود سایت کاربرد داشت، این بود که تصاویر مختلف را به قطعات کوچکتر برش می زدند تا با هر بار لود شدن صفحه، هر تکه ی تصویر جداگانه لود شود و به خیال خود سرعت لود سایت را افزایش می دادند حال آنکه چیزی که در عمل به وقون میپیوندد، صرفاً فریب چشم است که با لود شدن تکه تکه های تصاویر گمان میکنیم سایت سریع تر لود می شود!
با برش زدن تصویر و برای لود هر عکس چه با تگ <img> و چه با css، یک http request برای سرور ارسال می شود که همین باعث کاهش سرعت لود سایت خواهد شد یعنی هرچه تعداد این request ها بیشتر باشد، سایت شما کیفیت پایین تری خواهد داشت.
مثالی از کاربرد CSS Sprite
تصور کنید که قرار است یک منو با ۵ عکس ایجاد کنید مانند تصویر زیر:
کد CSS برای منوهای فوق:
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}
…
همانطور که در تصویر مشخص است، مجموعاً ۱۰ request برای ۱۰ تصویر (۵ مورد خود منوها و ۵ مورد هم hover های آنها) به سرور ارسال می شود. حال برای استفاده از CSS Sprite باید یک تصویر داشته باشیم با عرضی برابر عرض بزرگترین تصویر و ارتفاعی برابر مجموع ارتفاع تصاویر + ۱ پیکسل اضافی به ازای هر تصویر (یعنی اگر ۵ تصویر داریم، ارتفاع تصویر ترکیبی باید مجموع ارتفاع تصاویر + ۵ پیکسل باشد).
در تصویری که از ترکیب تصاویر ایجاد میکنیم، هر عکس را که گذاشتیم، به فاصله ۱ پیکسل، عکس بعدی را قرار میدهیم. در نهایت به نتیجه زیر (در این مثال) خواهیم رسید:
کد CSS منوهای فوق:
#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
…
نتیجه شگفت آور است! تنها یک request برای سرور ارسال می شود و حجم مصرفی پهنای باند هم به شدت کاهش یافته است!
کجا نمیتوان از CSS Sprite استفاده کرد؟
طبعاً روشی که تا این حد میتواند در بهبود سرعت لود سایت مؤثر باشد، بسیار ارزشمند است اما از این تکنیک نمیتوان در همه جا بهره گرفت. این روش صرفاً برای عناصر گرافیکی دارای یک بلاک مثل دکمه ها کاربرد دارد و برای تکرار تصاویر نمیتوان از آن بهره گرفت البته در این مورد هم تکنیکی وجود دارد که کاربرد CSS Sprite در عناصر گرافیکی تکرار شونده را ممکن میکند البته صرفاً در یک بعد (یعنی یا x یا y).
قسمت دیدگاهها آماده دریافت نظرات شما همراهان است.
سلام.من ۴ تا شکل دارم (فیس بوک-توییتر-گوگل پلاس-آر اس اس) که در سایت gtmetrix میگه باید ترکیبش کرد.
چطوری عکس ها رو ترکیبش کنم در کجای هاست این عکس جدید ساخته شده باید قرار بگیره.
کد این عکس ها رو چطور باید نوشت و کدها رو کجای هاست باید قرار داد در کدوم پوشه.
اگر سایتی هست که همه ی اینکارها رو بکنه لطفا معرفی کنید.
سلام
روی عکس RighClick کنید و بعد آدرس عکس رو از view image info پیدا کنید.
عکس توی سایز بزرگتر طراحی کنید و هر ۴ رو باهم بزارید جای همین عکس با همین آدرس !
به همین راحتی!
کدها معمولا بهم نمیریزند.
سایتی برای این کار نیست.
پ.ن: خیلی به استاندارد های gtmetrix اهمیت ندید…
میشه راهنمایی کنید با چه ابزاری مختصات رو بدست آوریم. آخه هی میخواهی عدد بنویسی و مثبت، منفی کنی تا همون عکسی رو که میخوای بشه!
سلام
میتونید با Inspect Element با راست کلیک کردن روی صفحه ی سایت توی فایرفاکس مختصات دقیق تصویر و عکستون رو دربیارید.
سلام
ممنونم
توی متن روش گفته شده. باید عکسها رو تا حد امکان در قالب یک عکس آپلود کنید و در زمان نمایش، با استفاده از کدهای css فقط بخش مربوطه رو نمایش بدید.
توی دو عکسی که به عنوان نمونه از ساختن یک منو ارسال شده اند، دقت کنید.
موفق باشید.
سلام
عالی بود.
یکی از دوستام قبلا بهم پیشنهاد داده بود چنین چیزی رو یاد بگیرم و از این به بعد توی طراحی هام استفاده کنم
روش خیلی خوبیه.
توی یکی از وب سایت ها دیدم که خیلی از اجزا فقط توی یک عکس هست :
http://weblogina.com/static/img/sprites.png?v35
ممنون می شم اگر یک توضیح در مورد استفاده چنین عکسی بدید که ما چطوری می تونیم برای چنین تصویری کد نویسی کنیم.
خواهش میکنم
کاربران یک سایت بزرگترین سرمایه ی اون هستند.
باعث افتخار ماست که بتونیم سرویس مناسب به دوستان بدیم.
براتون آرزوی موفقیت میکنم.
ممنون بابت این مطلب
و تشکر ویژه بابت احترام به کامنت ها و درخواست های کاربران