* این مطلب را برای طراحان وب مینویسم.

برای سبکتر شدن حجم یک عکس و خصوصا لوگوهای بزرگ و اصلی بالای سایت، گاهی لازم است آن را به چند تکه تقسیم کنیم. سبکتر شدن حجم تصویر چند تکه، بدلیل استفاده از فرمت و کیفیت متغیر قطعات یک تصویر است.
(مثلا قطعه ای از لوگو ممکن است بدلیل محدود بودن تعداد رنگ یا بمنظور transaparent شدن، با فرمت gif و بخشی دیگر بدلیل وجود طیف با فرمت jpg ذخیره گردد. همچنین ممکن است بخشی از تصویر با کیفیت پایین مثلا 10% قابل قبول باشد اما بخش دیگر کیفیت 70% را نیاز داشته باشد. در این موارد معمولا یک لوگو یا بنر را چند تکه میکنند.)

اما گاهی هم در یک صفحه وب تعداد زیادی تصاویر کوچک وجود دارد؛ خصوصا دکمه های موجود در نوار ابزار ویرایشگرها و یا دکمه های ریزی که برای خدمات جانبی سایت بکار میرود...

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

در اینجا روشی وجود دارد بنام CSS Sprites...

شما در این روش، همه تصاویر کوچک را به هم میچسبانید و بصورت یک تصویر آن را لود میکنید سپس با محدود کردن width و height المان محل نمایش تصویر، تصویر بزرگ فوق را به عنوان بکگراند آن المان تعریف میکنید و با استفاده از ویژگی background-position در استایل المان فوق، تنها آن تصویر کوچک مورد نظر را در بکگراند آن المان نمایش میدهید. کدی شبیه این:

بنظر خودم که توضیحات بالا برای آشنایی با این تکنیک کافیه اما اگه خواستار توضیحات بیشتر و همچنین آشنایی با نرم افزارهای تولید کننده خودکار کد برای این تکنیک هستید، این مقاله خوب از smashingmagazine را از دست ندهید.

* این هم یک ارائه ویدئویی ده دقیقه ای از این تکنیک

** این آموزش جالب گرد کردن گوشه های یک المان از صفحه وب به روش css sprites را هم از دست ندهید.