آشنایی با تکنیک css sprite ، روش تولید و کاربردهای آن

قبلا سرعت اینترنت و تعداد کاربران آن بسیار کمتر از حال بود. همین مساله باعث شده بود که گاهی حتی یک تصویر (مثل لوگوی بالای یک سایت) را تبدیل به چند تصویر کنند تا بتوانند آن را سریعتر برای کاربران سرو کنند. (در واقع با این کار لازم نبود برای تمام قطعات از کیفیت بالا استفاده کنند و همین امر موجب کاهش حجم مجموع تصاویر تشکیل دهنده لوگو می‌شد)

اما با پیشرفت تکنولوژی و به تبع آن بسترهای سخت‌افزاری وب، سرعت ارتباط کاربران به اینترنت و تعداد آنها به شدت افزایش یافت و همین امر باعث شد که طراحان وب تغییراتی در نحوه طراحی خود اعمال کنند. از جمله این تغییرات می‌توان «کاهش تعداد درخواست‌ها برای مشاهده یک صفحه» را برشمرد که برای حفظ کیفیت سایت‌های پربازدید ضرورت دارد.

قبلا برای مشاهده یک صفحه درخواست‌هایی مانند درخواست‌های زیر معمول و متداول بود:

1. درخواست اصل سورس صفحه
2. درخواست css مربوط به کل سایت و css آن بخش از سایت و css پرینت و سایر css ها
3. درخواست هسته اصلی کدهای جاوااسکریپت (core) و فایل js مربوط به پلاگینها و کدهای اضافی
4. درخواست تصاویر موجود در صفحه
5. درخواست محتویات مبتنی بر Ajax
6. درخواست سایر اضافات خاص مثل صدا یا تصویر یا فلش و …

اما برای سایت‌های پربازدید (خصوصا وقتی با Ajax هم طراحی شده باشد) تعداد درخواست‌هایی که به سرور ارسال می‌شود آنقدر بالاست که یا سرور را دچار اختلال می‌کند یا برخی کاربران را از مشاهده کامل و سریع سایت محروم می‌کند.

برای حل این مشکل (تعداد درخواست‌ها)، css و js ها و تصاویر را با هم تلفیق می‌کنند و همچنین cache سمت کاربر را با استفاده از header ارسالی از سمت سرور، فعال می‌کنند.
من در این مطلب قصد دارم به تلفیق تصاویر اشاره کنم.

برای درک ملموس‌تر، مطلب را با یک مثال توضیح می‌دهم. زمانی که شما در گوگل عبارتی را جستجو می‌کنید، در زیر صفحه نتایج گوگل، تصویر زیر را می‌بینید:

اگر بر روی یکی از تصاویر paging نتایج کلیک راست کنید و گزینه view background image را انتخاب کنید، با تصویر زیر مواجه می‌شوید:

همانطور که در این تصویر می‌بینید، گوگل تمامی تصاویر مورد نیاز در بخش‌های مختلف (اعم از بخش جستجو، گوگل ریدر، بخش خرید گوگل و گوگل مپ و گوگل گروپ و …) را در یک تصویر گنجانده و سپس در جای مورد نیاز از هرکدام از آنها استفاده می‌کند.

به عبارت دیگر شما با ورود به گوگل این تصویر 30 کیلوبایتی برای شما یک بار لود می‌شود و روی سیستم شما cache می‌شود و دیگر نیازی نیست که برای دیدن هر صفحه از گوگل، ده‌ها درخواست به سمت سرور گوگل ارسال شود تا یک عکس کوچک بارگزاری شود.

به تکنیک فوق css sprite می‌گویند. یک مثال خوب برای استفاده از این تکنیک را در مطلب نوشتن تاریخ به صورت عمودی ارائه کرده بودم.

برای استفاده از این تکنیک، سایت‌هایی وجود دارد که به صورت آنلاین شما را کمک می‌کنند. در اینجا به چند نمونه آن اشاره می‌شود.

شما می‌توانید به سایت اسپرایتر یا csssprites بروید و تک تک آن تصاویر کوچک را در آن آپلود کنید و تصویر بزرگ (شامل همه آن تصاویر کوچک) را به همراه css مبوطه تحویل بگیرید. (اگر حوصله آپلود تک تک تصاویر کوچک را ندارید، اسپرایت جنریتور انتخاب مناسبی برای شماست چرا که اجازه می‌دهد شما فایل zip شامل همه تصاویر کوچک را یکباره آپلود کنید)

اگر هم تک تصویر بزرگ (شامل تصاویر پرکاربرد سایتتان) را آماده دارید، می‌توانید به اسپرایت باکس رفته و با استفاده از آن، محدوده هر تصویر را معین و css مربوط را تحویل بگیرید.