CSS Sprite چیست؟

0 Comments

CSS Sprite چیه؟ چه کارایی داره؟ و چیجوری انجام بدیم؟

با معنی CSS Sprite آشنایی دارین؟ اسم اون میتونه تا حدی گول زننده باشه، شاید تا الان با دکمهایی که حالت روشن و خاموش اونا تو یه تصویر قرار گرفتن برخورد داشتین که با تغییر مکان تصویر زمینه حالات مختلفی رو نشون میدن.

نمونه-ای-از-CSS-Sprite

نمونه-ای از CSS Sprite

به کار گیری این فوت وفن رو CSS Sprite میگیم فرقش اینه که بجای قرار گرفتن دو عکس می تونین تعداد نامحدودی عکس و آیکون رو تو یه تصویر بذارین. CSS Sprite اولین بار در بازیای کامپیوتری استفاده شد که در اون با لود کردن یه تصویر و نشون دادن بخشهای جور واجور اون در هر لحظه سرعت پردازش رو تا حد زیادی در مقایسه با بارگزاری چندین عکس افزایش میداد.

به چه دلیل باید توسط CSS Sprite این همه عکس رو یکی کنیم؟ لود شدن تصاویر کوچکتر سرعت رو افزایش نمیده؟

شما با به کار گیری فوت وفن CSS Sprite  می تونین سرعت سایت خود رو تا حد زیادی زیاد کنین. تا همین چند وقت پیش همه طراحان سایت عکسا رو به تصاویر کوچکتر تقسیم می کردن تا صفحات سریعتر بارگزاری شن ولی این فوت وفن با فریب چشم آدم و نشون دادن تصاویر در هر گوشه از صفحه این حس رو می ده که سرعت بارگزاری زیاد شده ولی در واقع هرکدوم از این تصاویر یه فراخوان از HTTP رو بهمراه داره و بازدهی صفحه شما رو شدیدا کم می کنه.

بررسی سایتای سرشناس نشون می ده که تنها ۵ تا ۳۸ درصد از زمان لود شدن صفحات اونا صرف دانلود HTML شده و بقیه ۶۲ تا ۹۵ درصد صرف فراخوان HTTP و پیکربندی مطالب میشه (تصاویر، اسکریپت و استایل) با در نظر گرفتن اینکه مرورگرها بین ۲ تا ۴ فراخوان بطور همزمان انجام میدن تجربه نشون داده که با افزایش تعداد فراخوانا سرعت بارگزاری سایت شدیدا کم میشه.

نمونه-سایت-های-معتبر

نمونه سایتای معتبر

هر تصویر یا تصویر زمینه در سایت شما فراخوان HTTP جدایی می فرسته و می تونین تصور کنین که بدون CSS Sprite چه مقدار سرعت رو از دست میدین.

CSS Sprite چیجوری انجام میشه؟

اجازه بدین که قبل از توضیح روش CSS Sprite یه نمونه از تاثیر اون رو بررسی کنیم. دقت کنین که در CSS زیر هرکدوم از عکسا به شکل جداگونه و با یه دستور فراخوان می شن.

کد-CSS-قبل-از-تغییر

کد CSS قبل از تغییر

آیکون-ها-قبل-از-CSS-Sprite

آیکونا قبل از فوت وفن CSS Sprite

با به کار گیری CSS Sprite در مثال بالا میتونیم  بجای ۱۰ تصویر جدا از هم (۲ تصویر واسه هر آیکون) یه تصویر بزرگتر داشته باشیم. تصویری به عرض آیکونی که بیشترین عرض رو داره و به ارتفاع کل ارتفاع آیکونا هم اینکه ۱۰ پیکسل (به تعداد عکسا) میسازیم و آیکونا رو به شکل چپ چین از بالا و به فاصله یه پیکسل بین اونا در تصویر قرار می دیم.

حالا کد CSS جدید رو به شکل زیر میسازیم، همونطور که میبینین تنها یه تصویر زمینه قرار داره و بقیه دستورها با جابجایی این تصویر با به کار گیری مختصات X و Y آیکونا رو به نمایش میذارن.

کد-CSS-بعد-از-تغییر

کد CSS بعد از تغییر

با به کار گیری CSS Sprite در این مثال ساده تعداد فراخوان HTTP 9 عدد کم شده و حجم تصویر ۵/۶ کیلوبایت کمتر شد حالا تصور کنین که تا چه حد میتونه در افزایش سرعت سایت اثر داشته باشه.

آیکون-ها-بعد-از-CSS-Sprite

آیکونا بعد از فوت وفن CSS Sprite

در ادامه به آموزش فوت وفن CSS Sprite میپردازیم.

CSS Sprite به نظر زحمت زیادی داره

بیاد داشته باشین که موفقیتای بزرگ با تلاش زیاد بدست میان، انجام مراحل CSS Sprite زمان و علم زیادی رو طلب میکنه ولی حالا خوبیش اینه سرویس رایگانی هست که ساختن CSS Sprite رو واسه شما خیلی راحت و سریع انجام می ده. بهترین نرم افزار در این مورد SprieMeه.

به کار گیری Sprite Me

SpriteMe واسه انجام فوت وفن CSS Sprite روش ساده ای داره، شما با قرار دادن اون در bookmark مرورگر خود می تونین بدون هیچ سختی ای به هر سایتی رفته و برروی اون کلیک کنین. با این کار بخشی رو در کنار صفحه واسه شما نشون می ده. اینجا همین روش رو واسه نمونه روی سایت وبسیما انجام می دیم.

استفاده-از-SpriteMe

آموزش به کار گیری SpriteMe

 

باکس سفید بالایی تموم تصاویر موجود در صفحه که مناسب استفاده در فوت وفن CSS Sprite هستن رو به شما نشون می ده و در باکس پایانی تصاویر ناجور و دلیل اون رو به نمایش میگذاره. اگه بخواین می تونین هر کدوم از عکسا رو به باکس بالایی منتقل کنین. پس از قرار دادن همه عکسای مورد نظرتون در باکس بالایی با فشردن دکمه Make Sprite همه تصاویر با چیدمان مناسب تو یه تصویر گذاشته می شن که به شما نشون داده میشه. شما این تصویر رو دانلود کرده و در نشانی مشخصی از هاست خود قرار میدین.

استفاده-از-SpriteMe-2

استفاده ازSpriteMe واسه وبسیما

هم اینکه با export کردن CSS به شما نشون می ده که کدوم بخش از فایل CSS خود رو با چه کدی جانشین کنین تا واسه به کار گیری تصویر جدید آماده شه.

چه تصاویری واسه CSS Sprite مناسب نیس؟

CSS Sprite واسه تصاویری که در سایت شما ثابت هستن و تغییر زیادی در طول زمان نمی کنن مناسبه، آیکونا نمونه مناسب واسه به کار گیری فوت وفن CSS Sprite هستن. با در نظر گرفتن اینکه تموم این تصاویر باید تو یه تصویر گذاشته شن چیدمان اونا نقش زیادی در حجم تصویر کلی داره پس تصاویری که از نظر ابعادی همخوانی مناسب ندارن واسه روش CSS Sprite تو یه تصویر کلی مناسب نیستن. شما می تونین مجموعه تصاویر رو در ۲ یا ۳ تصویر اصلی بذارین.

در آخر چند نمونه استفاده شده از فوت وفن CSS Sprite در سایتای سرشناس رو نشون دادیم.

گوگل ریدر

فوت وفن CSS Sprite در گوگل ریدر

 

 

 

 

Ask.com

فوت وفن CSS Sprite در Ask.com

 

 

 

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *