در تکنیک CSS image Sprites تعدادی عکس کوچک با یکدیگر ادغام می شوند و یک عکس بزرگتر ایجاد می کنند و سپس با استفاده از CSS عکسهای کوچک درون عکس بزرگتر را در صفحات بارگذاری می کنند. تکنیک CSS Sprite جهت بهینه سازی عکس استفاده نمی شود و جهت بهینه سازی تعداد درخواست هایی که به سرور برای بارگذاری عکسها ارسال می شود، استفاده میشود.
کاربرد CSS Sprite در بهینه سازی سایت برای موتور جستجو
با استفاده از CSS Image Sprites، تعداد درخواست هایی که به سرور زده می شود کاهش می یابد و در نتیجه response time سرور بهبود می یابد. یک سئوکار حرفه ای باید دقت داشته باشد که جهت سئوی حرفه ای سایت باید حداکثر تلاش خود را بکند که تعداد درخواست های که به سرور ارسال می شود بهینه شود که ادغام کردن تعدادی عکس با یکدیگر یکی از این راه ها است.
تاریخچه Image Sprites
در دهه 80 میلادی تولیدکنندگان بازی های اتاری و کمدو برای بالا بردن کارایی سخت افزار اقدام به ترکیب عکسهای کوچکی که در صحنه های مختلف بازی استفاده می شد با یکدیگر کردند و سپس با بارگذاری عکس بزرگتر تولید شده در مموری، قسمتهایی از عکس بزرگتر را در صحنه هایی که می خواستند نمایش می دادند.
تکنیک CSS image Sprites دقیقا از همان تئوری دهه 80 بازی های آتاری تبعیت می کند. در تکنیک CSS Sprites شما می توانید تعدادی عکس را در یک عکس جدید در کنار یکدیگر قرار بدهید و در حقیقت یک فایل عکس داشته باشید که تعدادی عکس دیگر در آن در موقعیت های مختلف در کنار یکدیگر قرار گرفته باشند. سپس شما می توانید عکس مذکور را یک مرتبه لود کرده و سپس با استفاده از مشخص کردن فاصله هر عکس کوچک از لبه های عکس بزرگ و همچنین تعیین پهنای هر عکس کوچک در CSS، اقدام به نمایش عکس کوچک مورد نظرتان کنید.
به عنوان نمونه در شکل زیر تعداد 3 عکس یوز با رنگ های زرد و صورتی و آبی نمایش داده شده اند. سه عکس مذکور در حقیقت درون یک عکس بزرگتر هستند و با استفاده از CSS Sprites در محل دلخواه نمایش داده شده اند.
در کجا از CSS Sprite استفاده کنیم
البته باید به این نکته توجه کرد که استفاده از CSS Sprites همیشه جایز نیست و بیشتر برای صفحاتی مناسب است که تعدادی عکس مشترک در آنها لود می شود و با ادغام کردن عکسهایی که در صفحات مختلف بارگذاری می شوند، شما می توانید تعداد درخواست به سرور را کاهش دهید.
چه زمانی از CSS Sprite استفاده نکنیم
ادغام کردن عکسهایی که فقط در یک صفحه لود می شوند با عکسهایی که در صفحات گوناگون لود می شوند باعث بالا رفتن file size عکسی می شود که در CSS Sprite استفاده می شود و عملا باعث دیرتر لود شدن دیگر صفحات می شود. همچنین ادغام عکس های با file size بالا نیز منجر به تولید یک فایل با file size خیلی بالا می شود که لود آن به زمان زیادی نیاز خواهد داشت که از دیدگاه سئو جالب نیست.
استفاده از CSS Sprite Generator
ادغام کردن عکسها و محاسبه فاصله هر عکس کوچک از لبه های عکس بزرگ و نوشتن CSS کمی وقت گیر است. شما می توانید با استفاده از ابزار های آنلاین مانند سایت https://css.spritegen.com/ به راحتی عکسهای خود را آپلود کنید و یک عکس بزرگ به همراه کلاسهای CSS مورد نیاز و نحوه استفاده از آن در HTML را دریافت کنید.
سلام در زمانی که من پست میگذارم در نوشته ها میشه از این روش استفاده کرد؟
درتصویر شاخص چی میه در تصویر شاخص از روش css sprite استفاده کرد؟
سلام
بله در پست می توانید از CSS image sprite استفاده کنید. همان طور که بنده این کار را در همین نوشته انجام دادم. می توانید روی سه سر یوز رنگی که در متن نوشته است کلیک راست کرده و روی Inspect کلیک کنید تا از روش استفاده از تکنیک CSS image sprite در نوشته مطلع شوید.