رفتن به مطلب

تکنیک CSS Sprite


پست های پیشنهاد شده

با سلام

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

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

لینک به ارسال

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

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

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

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

لینک به ارسال

توی تکنیک

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

لینک به ارسال

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

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

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

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

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

به غیر از

PNGGauntlet

و افزونه SMUCH

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

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

57 تا هستش

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

توی تکنیک

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

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

ویرایش شده توسط M.At
لینک به ارسال

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


.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>

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

ویرایش شده توسط M.At
لینک به ارسال

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

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

لینک به ارسال

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

به غیر از

PNGGauntlet

و افزونه SMUCH

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

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

57 تا هستش

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

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

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

لینک به ارسال

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

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

لینک به ارسال

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

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


background-repeat : ...

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

به غیر از

PNGGauntlet

و افزونه SMUCH

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

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

57 تا هستش

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

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

لینک به ارسال

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

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


background-repeat : ...

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

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

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

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

لینک به ارسال

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

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

لینک به ارسال

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

به غیر از

PNGGauntlet

و افزونه SMUCH

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

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

57 تا هستش

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

https://tinypng.com

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...