تکنیک CSS Sprite

[Blood 23]

با سلام

میخواستم از استادید بپرسم آیا برای استفاده از تکنیک CSS Sprite میشه تمام عکس های صفحه اول رو داخل یک عکس قرار داد؟

میخواست بپرسم که دیر لود نمیشه؟ یعنی کل عکس هار بزارم یا چندتا چندتا قرار بدم ؟

[kasra 4929]

یکی از مزیت های اسپریت هم اینه که سرعت لود و تعداد درخواست رو کاهش میده

اگر عکس ها خیلی زیاده به چند تا اسپریت مختلف تقسیم کنید و اگر کمه همون یه اسپریت کافیه

معمولا نزارید انقدری زیاد بشه که هر عکس اسپریت بیشتر از 50 یا 60 کیلوبایت باشه

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

[bestdata 830]

توی تکنیک

CSS Sprite عکس هایی که تکرار میشن رو نمیشه استفاده کرد (اگر پشت زمینه سایتتون عکس هست اون رو رها کنید) مابقی عکس ها میشه (حالا بستگی به کدنویسی داره سخت و آسون میشه درست کرد)

[Blood 23]

یکی از مزیت های اسپریت هم اینه که سرعت لود و تعداد درخواست رو کاهش میده

اگر عکس ها خیلی زیاده به چند تا اسپریت مختلف تقسیم کنید و اگر کمه همون یه اسپریت کافیه

معمولا نزارید انقدری زیاد بشه که هر عکس اسپریت بیشتر از 50 یا 60 کیلوبایت باشه

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

ممنون میشه یه چند تا راه نام ببرید ؟

به غیر از

PNGGauntlet

و افزونه SMUCH

من عکس های سایتم بیشترش .PNG هست به نظر شما خوبه این پسوند ؟

تعداد عکس های سایتم که تکرار نمیشن

57 تا هستش

حجمش با فشرده سازی شده 203 کیلوبایت به نظر شما 2 قسمت کنم؟

توی تکنیک

CSS Sprite عکس هایی که تکرار میشن رو نمیشه استفاده کرد (اگر پشت زمینه سایتتون عکس هست اون رو رها کنید) مابقی عکس ها میشه (حالا بستگی به کدنویسی داره سخت و آسون میشه درست کرد)

منظورتون از تکرار شدن یعنی بک گراندها هستش یا ؟؟؟؟ عکس هایی که در صفحات دیگر سایت چند بار ازش استفاده شده؟ منظورتون هست؟؟

ویرایش شده مهر 93 توسط M.At

[Blood 23]

میخواستم ببینم به این صورت هستش؟

.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}
.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

باید از منفی استفاده بشه؟ تو پوزیشن؟

برای نمایش هم به این صورت استفاده کردم؟

<div class="Sp-ImageAll-2.home"></div>

اما نمایش نمیده؟

ویرایش شده مهر 93 توسط M.At

[hamidwi 479]

میتونید برای این کار از پنراتورهای آنلاین استفاده کنید.

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#sourceid=chrome-psyapi2&ie=UTF-8&q=css%20sprite%20generator

[bestdata 830]

ممنون میشه یه چند تا راه نام ببرید ؟

به غیر از

PNGGauntlet

و افزونه SMUCH

من عکس های سایتم بیشترش .PNG هست به نظر شما خوبه این پسوند ؟

تعداد عکس های سایتم که تکرار نمیشن

57 تا هستش

حجمش با فشرده سازی شده 203 کیلوبایت به نظر شما 2 قسمت کنم؟

منظورتون از تکرار شدن یعنی بک گراندها هستش یا ؟؟؟؟ عکس هایی که در صفحات دیگر سایت چند بار ازش استفاده شده؟ منظورتون هست؟؟

منظورم عکس هایی هستن که repeat میشن توسط css (وگرنه همه عکس های قالب در صفحات دیگه استفاده میشه)

[Blood 23]

منظورم عکس هایی هستن که repeat میشن توسط css (وگرنه همه عکس های قالب در صفحات دیگه استفاده میشه)

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

[kasra 4929]

دوستان لطفا اطلاعات اشتباه ندید

هیچ فرقی نداره و میتونید عکس های تکرار شونده رو هم استفاده کنید با خاصیت :

background-repeat : ...

ممنون میشه یه چند تا راه نام ببرید ؟

به غیر از

PNGGauntlet

و افزونه SMUCH

من عکس های سایتم بیشترش .PNG هست به نظر شما خوبه این پسوند ؟

تعداد عکس های سایتم که تکرار نمیشن

57 تا هستش

حجمش با فشرده سازی شده 203 کیلوبایت به نظر شما 2 قسمت کنم؟

برنامه های گرافیکی مثل فتوشاپ خروجی مخصوص وب سایت دارن

[bestdata 830]

دوستان لطفا اطلاعات اشتباه ندید

هیچ فرقی نداره و میتونید عکس های تکرار شونده رو هم استفاده کنید با خاصیت :

background-repeat : ...

برنامه های گرافیکی مثل فتوشاپ خروجی مخصوص وب سایت دارن

بنده بر اساس تجربه شخصی گفتم ...

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

باید اون عکس پشت زمینه رو با دیگر عکس ها ترکیب نکنی و جداگانه بذارید

[Alireza Xn 1644]

اسپرایت عیبی که داره اینکه تو حالت واکنش گرایی مشکل ایجاد میکنه چون که یک حالت ثابتی داره .

به نظر من اگه از اسپرایت به عنوان ایکون استفاده میکنید از فونت ایکون های SVG استفاده کنید خیلی خیلی بهتره .

[Ghasem Paran 333]

ممنون میشه یه چند تا راه نام ببرید ؟

به غیر از

PNGGauntlet

و افزونه SMUCH

من عکس های سایتم بیشترش .PNG هست به نظر شما خوبه این پسوند ؟

تعداد عکس های سایتم که تکرار نمیشن

57 تا هستش

حجمش با فشرده سازی شده 203 کیلوبایت به نظر شما 2 قسمت کنم؟

https://tinypng.com