ایجاد: ۱۸:۳۷ ۱۳۹۱/۷/۶
ویرایش: ۲۰:۲۵ ۱۳۹۳/۹/۲۵
»
اگر در انتهای صفحه نتایج جستجوی گوگل، بر روی لینک یکی از صفحات نتیجه کلیک راست کرده و گزینه view background image را انتخاب کنید، با تصویر زیر روبرو می‌شوید:
همانطور که در تصویر فوق می‌بینید، گوگل تمامی تصاویر مورد نیاز در بخش‌های مختلف (اعم از بخش جستجو، گوگل ریدر، بخش خرید گوگل و گوگل مپ و گوگل گروپ و …) را در یک تصویر گنجانده و سپس در جای مورد نیاز از هرکدام از آنها استفاده می‌کند. به عبارت دیگر شما با ورود به گوگل این تصویر 30 کیلوبایتی برای شما یک بار لود می‌شود و روی سیستم شما cache می‌شود و دیگر نیازی نیست که برای دیدن هر صفحه از گوگل، ده‌ها درخواست به سمت سرور گوگل ارسال شود تا یک عکس کوچک بارگذاری شود.
قبلا سرعت اینترنت و تعداد کاربران آن بسیار کمتر از حال بود. همین مساله باعث شده بود که گاهی حتی یک تصویر (مثل لوگوی بالای یک سایت) را تبدیل به چند تصویر کنند تا بتوانند آن را سریعتر برای کاربران سرو کنند. (در واقع با این کار لازم نبود برای تمام قطعات از کیفیت بالا استفاده کنند و همین امر موجب کاهش حجم مجموع تصاویر تشکیل دهنده لوگو می‌شد)
اما با پیشرفت تکنولوژی و به تبع آن بسترهای سخت‌افزاری وب، سرعت ارتباط کاربران به اینترنت و تعداد آنها به شدت افزایش یافت و همین امر باعث شد که طراحان وب تغییراتی در نحوه طراحی خود اعمال کنند. از جمله این تغییرات می‌توان «کاهش تعداد درخواست‌ها برای مشاهده یک صفحه» را برشمرد که برای حفظ کیفیت سایت‌های پربازدید ضرورت دارد.
قبلا برای مشاهده یک صفحه درخواست‌هایی مانند درخواست‌های زیر معمول و متداول بود:
- درخواست اصل سورس صفحه
- درخواست css مربوط به کل سایت و css آن بخش از سایت و css پرینت و سایر css ها
- درخواست هسته اصلی کدهای جاوااسکریپت (core) و فایل js مربوط به پلاگینها و کدهای اضافی
- درخواست تصاویر موجود در صفحه
- درخواست محتویات مبتنی بر Ajax
- درخواست سایر اضافات خاص مثل صدا یا تصویر یا فلش و …
اما برای سایت‌های پربازدید (خصوصا وقتی با Ajax هم طراحی شده باشد) تعداد درخواست‌هایی که به سرور ارسال می‌شود آنقدر بالاست که یا سرور را دچار اختلال می‌کند یا برخی کاربران را از مشاهده کامل و سریع سایت محروم می‌کند.
برای حل این مشکل (تعداد درخواست‌ها)، css و js ها و تصاویر را با هم تلفیق می‌کنند و همچنین cache سمت کاربر را با استفاده از header ارسالی از سمت سرور، فعال می‌کنند.
برای استفاده از این تکنیک، سایت‌هایی وجود دارد که به صورت آنلاین شما را کمک می‌کنند.
شما می‌توانید به
این سایت یا
این سایت بروید و تک تک آن تصاویر کوچک را در آن آپلود کنید و تصویر بزرگ (شامل همه آن تصاویر کوچک) را به همراه css مبوطه تحویل بگیرید.
اگر حوصله آپلود تک تک تصاویر کوچک را ندارید،
این سایت یا
این سایت انتخاب مناسبی برای شماست چرا که اجازه می‌دهد شما فایل zip شامل همه تصاویر کوچک را یکباره آپلود کنید.
اگر هم تک تصویر بزرگ (شامل تصاویر پرکاربرد سایتتان) را آماده دارید، می‌توانید به
این سایت رفته و با استفاده از آن، محدوده هر تصویر را معین و css مربوط را تحویل بگیرید.
این سایت نیز که به تازگی راه افتاده، نیز در این زمینه می‌تواند به شما کمک کند.
سایر کاربردهای css sprite
css sprite معمولا برای همان هدفی که ابتدای مطلب تشریح شد (کاهش تعداد درخواست‌ها از سرور برای بارگزاری یک صفحه) استفاده می‌شود اما کاربردهای جالب دیگری نیز دارد.
نمایش تاریخ به صورت عمودی، یکی از کاربردهای زیبای آن است که در برخی سایت‌ها بکار گرفته می‌شود.
یک نمونه بسیار زیبای آن در مطلب
Date Display Technique with Sprites به همراه کد آن قابل مشاهده است.
من یک نمونه ساده فارسی آن را به همراه تصویر آن، تهیه کرده‌ام که کد آن را در ادامه مشاهده می‌کنید:
.num{width:23px;height:110px;}
.dgt{width:23px;height:11px;font-size:0;background:#fff url(http://129.7.img98.net/out.php/i243308_n.gif) no-repeat;}
.d9{background-position:0 0px}
.d8{background-position:0 -16px}
.d7{background-position:0 -31px}
.d6{background-position:0 -47px}
.d5{background-position:0 -64px}
.d4{background-position:0 -80px}
.d3{background-position:0 -95px}
.d2{background-position:0 -112px}
.d1{background-position:0 -128px}
.d0{background-position:0 -143px}
.ds{background-position:0 -159px}
حال برای نمایش تاریخ امروز (1391/7/6) کافی‌ست اینگونه عمل کنید:
<div class="num">
<div class="dgt d6"></div>
<div class="dgt ds"></div>
<div class="dgt d7"></div>
<div class="dgt ds"></div>
<div class="dgt d1"></div>
<div class="dgt d9"></div>
<div class="dgt d3"></div>
<div class="dgt d1"></div>
</div>
CSS Sprite با کمک SVG
این موضوع نسبتا جدید و مدرن است که مقاله
SVG Sprite Techniques آن را به خوبی توضیح داده است.
یادداشت‌های مرتبط
- روش شروع طراحی تم برای وردپرس
- نکاتی برای افزایش سرعت و کارآمدی سایت
- چند لینک جامع برای یادگیری جاوا اسکریپت
