CSS Sprites چیست؟

CSS sprite یک تکنیک بهینه سازی عملکرد است که تصاویر چندگانه را به یک تصویر منفرد به نام یک صفحه ی sprite یا مجموعه کاشی ترکیب می کند. Sprites با کاهش تعداد بارگیری های لازم برای رندر یک صفحه وب، تراکم شبکه را کاهش می دهد.

بررسی اجمالی

تصاویر برای یک وب سایت به طور معمول در فایل های شخصی ذخیره می شود. بعضی از این تصاویر ممکن است مربوط باشد یا ممکن است تغییرات یک تصویر مشابه، مانند یک دکمه ساده و یک دکمه برجسته باشد. هنگامی که کاربر یک صفحه وب را باز می کند، مرورگر خود باید هر یک از این پرونده ها را درخواست کند، و در نتیجه تجربه ای کندتر را تجربه می کند.
با استفاده از CSS sprites، چندین تصویر به یک تصویر واحد به نام یک برگه ی sprite ترکیب می شوند. به جای بارگیری چندین فایل، کاربر یک فایل را دانلود می کند و sprite یا تصویر مورد نیاز را با جابجایی فایل نمایش می دهد. این باعث می شود که هزینه درخواست فایل های چندگانه در هزینه یک فایل بزرگتر را بارگیری کنید.

CSS چگونه کار می کند؟

یک توسعه دهنده وب، چندین عکس را به یک صفحه ی sprite متصل می کند، و آنها را در الگوی شب یلدا قرار می دهد. هنگامی که یک تصویر خاص مورد نیاز است، CSS به صفحه ای ارجاع اشاره می کند، آن را با شاخص عددی دلخواه بازنویسی می کند، سپس اندازه عبارتی را در پیکسل تعریف می کند.
راهنماهای CSS معمولا در موقعیت هایی استفاده می شوند که در آن یک صفحه وب از تصاویر چندگانه ای با اندازه یکسان استفاده می کند (به عنوان مثال برای دکمه ها یا آرم ها). هر دکمه به همان برگه راهنمایی مراجعه می کند، اما به وسیله ی تعدادی از پیکسل ها، با جابجایی یک صفحه، به یک تصویر دسترسی پیدا می کند. سپس تصویر دلخواه بر روی صفحه وب “قاب” قرار می گیرد.

چگونگی ایجاد یک CSS Sprite Sheet

ابزارهای زیادی وجود دارد که صفحات Sprite را خودکار سازی می کند، اما برای ایجاد یک برگه ی sprite می توان از هر برنامه ی ویرایش تصویر استفاده کرد..

1-یک شبکه از پیکسل ها ایجاد کنید:

این شبکه نه تنها به موقعیت تصاویر کمک می کند، بلکه در اشاره به مراجع تصاویر نیز کمک می کند.

2-تصاویر را اضافه کنید:

تصاویر کوچک ممکن است در یک سلول واحد قرار گیرند، در حالی که تصاویر بزرگتر چندین سلول را می گیرند. بیشتر برگه های Sprite تصاویررا بر اساس اندازه دسته بندی میکند.

3-CSS را اضافه کنید:

سه خصوصیت برای ایجاد یک فیلد در CSS وجود دارد: عرض، ارتفاع و پس زمینه. عرض و ارتفاع اندازه تصویر را تعیین می کنند، در حالی که پس زمینه ستاره ی اسپریت و موقعیت یاب مورد نظر (در پیکسل ها) را تعیین می کند.

4-عنصر را به صفحه اضافه کنید:

یک برچسب img با یک تصویر حفره یا سوراخ می تواند CSS sprite را از طریق شناسه یا کلاس طبقه بندی کند. وقتی صفحه بارگذاری می شود، تصویر حفره یا سوراخ جایگزین خواهد شد.

مزایای CSS Sprites

راهنماهای CSS باعث کاهش کل زمان بارگذاری صفحه می شوند، در حالی که شرکت ها کنترل بیشتری برعملکرد وب سایت خود دارند.
کاربران از زمان بارگذاری صفحه سریعتر، از زمانیکه تصاویر به محض بارگیری صفحات ارجاع به نمایش در می آیند، تجربه می کنند.
شرکت ها شاهد عملکرد بیشتر و استفاده کمتر از منابع را به عنوان درخواست های کمتر از HTTP کمتر خواهند بود. در نتیجه این موضوع باعث کاهش میزان تراکم در شبکه می شود.

نتیجه

هنگامی که به دنبال افزایش عملکرد وب هستیم، کاهش تعداد بارگیری ها یک استراتژی است که شرکت ها به آن وابسته هستند. برای خدمات وب با میلیون ها کاربر، یک برگه ی Sprite می تواند تفاوت بین یک میلیون تا 100 میلیون بارگیری را مشخص می کند.

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

سه پیوند ساده

بیایید تصور کنیم که برخی از پیوندهای شما در صفحه شما وجود دارد:

حذف یک آیتم|تماس با ما|آیا به کمک نیاز دارید؟|

html

|<a href=”#”>Delete an item</a>
|<a href=”#”>Contact us</a>
<a href=”#”>Need help?</a>

سه لینک با استایل

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

html

<img src=”/styles/articles/delete.png”> <img src=”/styles/articles/group.png”> <img src=”/styles/articles/help.png”>

با استفاده از CSS و تصاویر، پس زمینه را تنظیم می کنید و کمی از padding را در سمت چپ قرار دهید تا قبل از شروع متن، فضای اضافه کنید. لینک های شما اکنون شبیه این هستند:

حذف یک آیتم|تماس با ما|آیا به کمک نیاز دارید؟|

html

|<a href=”#” class=”nosprite delete”>Delete an item</a>
|<a href=”#” class=”nosprite group”>Contact us</a>
<a href=”#” class=”nosprite help”>Need help?</a>

style type=”text/css”

nosprite { padding-left: 20px; line-height:16px; background-repeat: no-repeat; }.
nosprite.help { background-image: url(‘/styles/articles/help.png’); }.
nosprite.delete { background-image: url(‘/styles/articles/delete.png’); }.
nosprite.group { background-image: url(‘/styles/articles/group.png’); }.

به نظر می رسد عالی است فقط یک مشکل است سه تصویر وجود دارد. برای هر تصویر یک مرورگر وب باید یک اتصال HTTP برای بارگیری تصویر را باز کند. بعضی از مرورگرها فقط می توانند 2 بار اتصال را در یک بار باز داشته باشند، بنابراین این می تواند صفحه شما را به آرامی کاهش دهد.

سه لینک، با CSS اسپریت

شما می توانید تمام این تصاویر را با استفاده از ژنراتور CSS sprite ترکیب کنید.

html

<img src=”/styles/articles/icon.png”>

ما نمی توانیم تصویر پس زمینه را روی همه آنها به icon.png تنظیم کنیم. این به نظر می رسد:

حذف یک آیتم|تماس با ما|آیا به کمک نیاز دارید؟|

html

|<a href=”#” class=”sprite”>Delete an item</a>
|<a href=”#” class=”sprite”>Contact us</a>
<a href=”#” class=”sprite”>Need help?</a>

این به نظر کاملا درست نیست … مشاهده کنید که تنظیم تصویر پس زمینه به بالا سمت چپ باعث می شود که هر لینک برای نمایش تصویر بالا در ماجرا (در این مورد تصویر حذف شده) باشد. این کار فوق العاده ای است که ما برای انجام آن باید انجام دهیم. ما باید از تعرفه ها برای قرار دادن تصویر پسزمینه درست استفاده کنیم.

حذف یک آیتم|تماس با ما|آیا به کمک نیاز دارید؟|

html

|<a href=”#” class=”sprite delete”>Delete an item</a>
|<a href=”#” class=”sprite group”>Contact us</a>
|<a href=”#” class=”sprite help”>Need help?</a>

style type=”text/css”

sprite { background: url(‘/styles/articles/icon.png’) no-repeat top left; padding-left: 20px; line-height: 16px; }.
sprite.delete { background-position: 0px 0px; }.
sprite.group { background-position: 0px -26px; }.
sprite.help { background-position: 0px -52px; }.