SPRITE نمودن عکس ها در صفحه وب سایت

صاحبان کسب وکار به دنبال هرچه زیباتر نمایش دادن صفحات وب سایت و طراحی سایت خود می کوشند. بدین جهت تلاش می نمایند تا از طرح ها و عکس های گرافیکی در طراحی وب سایت خود استفاده نمایند. اما همان طور که می دانید عکس ها عامل تاخیر در لود شدن صفحه سایت می باشند و تاخیر در لود شدن تاثیر منفی بر سئو سایت برجا خواهد گذاشت. Sheet sprite در واقع تکنیکی برای تنظیم و چیدمان عکس های یک صفحه از وب سایت در فرمت یک عکس تنها می باشد. با استفاده از این قابلیت می توانید موجب سبک شدن در لود صفحه سایت خود شوید. می توانید از نرم افزارهایی مانند PhotoShop Sprite Sheet Exporter extensionبدین منظور استفاده نمایید و از طریق مسیر زیر می توانید این پروسه را انجام دهید.

• در منوی فایل مسیر script و پس از آن مسیر ‘load files into stack’را دنبال نمایید.
• هر یک از عکس های خود را درون فولدر Browse نمایید.
• تمامی عکس ها که می خواهید import نمایید را انتخاب نمایید.

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

‘Sprite Sheet Exporter’ script from Files->Scripts

در نتیجه عمل شما یک SPRITE از عکس های صفحه وب سایت در طراحی سایت خود خواهید داشت. حال می بایست در قسمت های مودر نظر ار عکس این تنظیم را قرار دهید که از SPRITE بخواند. بدین منظور می بایست URL فایل عکس SPRITE شده را در کدهای CSS آن درج نمایید و در کلاس مورد نظر این عمل را انجام دهید. برای مثال در زیر می خواهیم URL فایل عکس SPRITE شده را در بخشی از صفحه که از کلاس "megaphone" می خواند اعمال نماییم.

<div class="megaphone"></div>

و در کلاس CSS آن کد زیر را داشته باشیم

.megaphone

{

width:50px;

height:50px;

background: url(/demo/images/sprite.png) 0 0px;

}

بدین نحو می توانید تمامی بخش هایی از صفحه که می بایست از SPRITE بخواند را مشخص نماییم. CSS sprites تکنیک جدیدی نمی باشد و در طراحی سایت می تواند مزایای فراوانی را در بر داشته باشد.