تکنیک CSS immage Sprites

در ارتباط با موضوع تکنیک CSS immage Sprites می توان گفت ابتدا در دهه 80 میلادی تولید کنندگان بازی های آتاری و کمدو برای بالا بردن کارایی سخت افزار اقدام به ترکیب عکس های کوچکی که در صحنه های مختلف بازی استفاده می شد با یکدیگر کردند و سپس با گذاری عکس بزرگتر تولید شده در مموری، قسمتهایی از عکس بزرگتر را در صحنه هایی که می خواستند نمایش می دادند.

تکنیک CSS immage Sprites دقیقا از همان تنوری دهه 80 بازی های آتاری تبعیت می کند. در تکنیک CSS Sprites شما می توانید تعدادی عکس را در یک عکس جدید در کنار یکدیگر قرار دهید و در حقیقت یک فایل عکس داشته باشید که تعدادی عکس دیگر در آن در موقعیت های مختلف در کنار یکدیگر قرار گرفته باشند. سپس شما می توانید عکس مذکور را یک بار بار گذاری کردهو با استفاده از مشخص کردن فاصله هر عکس کوچک از لبه های عکس بزرگ و همچنین تعیین پهنای هر عکس کوچک در CSS، اقدام به نمایش عکس کوچک مورد نظرتان کنید.

بنابراین از تکنیک CSS Sprites جهت بهینه سازی عکس(طراحی سایت , سئو سایت, طراحی سایت فروشگاهی) استفاده نمی شود و جهت بهینه سازی (طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت , طراحی سایت )تعداد درخواست هایی که به سرور برای بارگذاری عکس ها ارسال می شود، استفاده میشود.

چه زمانی از CSS Image Sprites استفاده کنیم

استفاده از CSS Sprites همیشه جایز نیست و بیشتر برای عکس هایی مناسب است که در صفحات مختلف استفاده می شوند و در نتیجه با ادغام کردن عکس های پرکاربرد با این تکنیک می توانید تعداد درخواست به سرور را کاهش دهید.

چه زمانی از CSS Image Sprites استفاده نکنیم

ادغام کردن عکس هایی که فقط در یک صفحه بارگذاری می شوند با عکسهایی که در صفحات گوناگون بارگذاری می شوند، باعث بالا رفتن file size عکسی می شود که در CSS Sprites استفاده می شود و عملا باعث بارگذاری دیرتر دیگر صفحات می شود. همچنین ادغام عکس های با file size بالا نیز منجر به تولید یک فایل با file size خیلی بالا می شود که بارگذاری آن به زمان زیادی نیاز خواهد داشت که از دیدگاه سئو منطقی نیست.

استفاده از CSS Sprite Generator

ادغام کردن عکس ها و محاسبه فاصله هر عکس کوچک از لبه های عکس بزرگ و نوشتن CSS کمی وقت گیر است.

شما می توانید با استفاده از ابزار های آنلاین مانند سایت http://css.spritegen.com به راحتی عکس های خود را آپلود کنید و یک عکس بزرگ به همراه کلاس های CSS مورد نیاز و نحوه استفاده از آن در HTML را دریافت کنید.