css sprites چیست
سلام خیلی خوش امدید به مهراکت در این مطلب قصد داریم راجب موضوع ها ی css sprites چیست و CSS Sprites چیست؟ وچگونه کار می کند؟صحبت کنیم تا انتها با مهراکت همراه باشید.CSS Sprite چیست؟ چه کاراییدارد؟
آیا با مفهوم CSS Sprite آشنایی دارید؟ اسم آن میتواند تا حدی فریبنده باشد،
احتمالا تاکنون با دکمه هایی که حالت روشن و خاموش آنها در یک تصویر قرار گرفته اند
برخورد داشته اید
که با تغییر مکان تصویر زمینه حالات مختلفی را نشان میدهند.
نمونه-ای از CSS Sprite
استفاده از این تکنیک را CSS Sprite مینامیم
با این تفاوت که بجای قرار گرفتن دو عکس میتوانید تعداد نامحدودی عکس و آیکون را در یک تصویر بگنجانید.
CSS Sprite اولین بار در بازی های کامپیوتری بکار گرفته شد
که در آن با لود کردن یک تصویر و نشان دادن بخشهای مختلف آن در هر لحظه سرعت پردازش را تا حد زیادی در مقایسه با بارگزاری چندین عکس افزایش میداد.
چرا باید بوسیله CSS Sprite این همه عکس را یکی کنیم؟ آیا لود شدن تصاویر کوچکتر سرعت را افزایش نمیدهد؟
شما با استفاده از تکنیک CSS Sprite میتوانید سرعت سایت خود را تا حد زیادی افزایش دهید. تا همین چند وقت پیش همه طراحان سایت عکس ها را به تصاویر کوچکتر تقسیم میکردند تا صفحات سریعتر بارگزاری شوند ولی این تکنیک با فریب چشم انسان و نشان دادن تصاویر در هر گوشه از صفحه این حس را میدهد که سرعت بارگزاری افزایش یافته است ولی در واقع هرکدام از این تصاویر یک فراخوان از HTTP را بهمراه دارد و بازدهی صفحه شما را به شدت کاهش میدهد.
بررسی سایت های سرشناس نشان میدهد که تنها 5 تا 38 درصد از زمان لود شدن صفحات آنها صرف دانلود HTML شده و بقیه 62 تا 95 درصد صرف فراخوان HTTP و پیکربندی مطالب میشود (تصاویر، اسکریپت و استایل) با توجه به اینکه مرورگرها بین 2 تا 4 فراخوان بطور همزمان انجام میدهند تجربه نشان داده است که با افزایش تعداد فراخوان ها سرعت بارگزاری سایت به شدت کاهش می یابد.
نمونه سایت های معتبر
هر تصویر یا تصویر زمینه در سایت شما فراخوان HTTP جدایی ارسال میکند و میتوانید تصور کنید که بدون CSS Sprite چه مقدار سرعت را از دست میدهید.
CSS Sprites چیست ؟
CSS sprite یک تکنیک بهینه سازی عملکرد است که تصاویر چندگانه را به یک تصویر منفرد به نام یک صفحه ی sprite یا مجموعه کاشی ترکیب می کند. Sprites با کاهش تعداد بارگیری های لازم برای رندر یک صفحه وب، تراکم شبکه را کاهش می دهد.
بررسی اجمالی
تصاویر برای یک وب سایت به طور معمول در فایل های شخصی ذخیره می شود. بعضی از این تصاویر ممکن است مربوط باشد یا ممکن است تغییرات یک تصویر مشابه، مانند یک دکمه ساده و یک دکمه برجسته باشد. هنگامی که کاربر یک صفحه وب را باز می کند، مرورگر خود باید هر یک از این پرونده ها را درخواست کند، و در نتیجه تجربه ای کندتر را تجربه می کند.
با استفاده از CSS sprites، چندین تصویر به یک تصویر واحد به نام یک برگه ی sprite ترکیب می شوند. به جای بارگیری چندین فایل، کاربر یک فایل را دانلود می کند و sprite یا تصویر مورد نیاز را با جابجایی فایل نمایش می دهد. این باعث می شود که هزینه درخواست فایل های چندگانه در هزینه یک فایل بزرگتر را بارگیری کنید.
CSS چگونه کار می کند؟
یک توسعه دهنده وب، چندین عکس را به یک صفحه ی sprite متصل می کند، و آنها را در الگوی شب یلدا قرار می دهد. هنگامی که یک تصویر خاص مورد نیاز است، CSS به صفحه ای ارجاع اشاره می کند، آن را با شاخص عددی دلخواه بازنویسی می کند، سپس اندازه عبارتی را در پیکسل تعریف می کند.
نحوه بکارگیری تکنیک css sprite
برای شروع اگر بخواهیم با تصویر بالا شروع کنیم قطعا سردرگم خواهید شد، بنابر این با یک مثال ساده این کار را انجام خواهیم داد و نحوه استفاده از این تکنیک را شرح خواهیم داد.
قصد داریم یک منوی ساده طراحی کنیم که دارای 3 عنصر یا لینک است:
- لینک صفحه نخست
- لینک پروفایل نویسنده
- لینک اشتراک در مطالب
همانطور که ملاحظه میکنید 3 آیتم در هر ستون داریم، تصاویر ستون سمت راست (سفید) در حالت معمولی نمایش داده میشوند و هنگامی که ماوس بر روی هرکدام از گزینه های منو قرار بگیرد، تصویر با رنگ دیگر (نارنجی) نمایش داده خواهد شد. پس با این حساب اگر بخواهیم به صورت ساده (بدون sprite) منوی بالا را ایجاد کنیم باید 6 تصویر جداگانه داشته باشیم، برای مثال :
در ابن پست مطالب زیر را بیان کردیم:
- CSS چگونه کار می کند؟
- CSS Sprites چیست؟
- نحوه بکارگیری تکنیک css sprite
سپاس از این که وقت گذاشتین و با ما همراه بودید تا اخر این مطلب لطفا از بقیه پست ها هم دیدن فرمایید:
