آموزش Combine images using CSS sprites در سایت gtmetrix.net

[mohi]

سایت gtmetrix.net نمره ای به سرعت سایت میده و یه قسمتی داره به نام Combine images using CSS sprites
در این قسمت میخاد که تصاویری که مشخص کرده با css ترکیب بشه برای این کار به روش زیر عمل میکنیم

فرض میکنیم تصاویر مورد نظر چند تصویر الحاق شده به ماژول از نوع html هست (ماژول های دیگه در صورت نیاز به فایل مربوطه آن ماژول مراجعه شود)
-1اول به سایت دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
میریم
-2 سپس تصاویر مورد نظر را از طریق brows یکی کی اضافه میکنیم (عکس 1و2)
3-تصویری که سایت فوق میده رو با نامی که در کد css که داده شده است روی سیستم ذخیره میکنیم
4-سپس تصویر در پوشه مربوط به فایل css آپلود میکنیم
نکته : لینکی که در url کد css هست باید دقیقا جایی باشه که تصویر آپلود شده مثلا اگه این تصویر در پوشه img باشه فراخوانی این صورت مشه

کد: (انتخاب همه)

url('../img/sprite.png')

5- سپس با استفاده از فایر باگ مشخص میکنیم که ماژول فراخوانی شده در کدام فایل css است (برای من bootstrap.css بود)
6- کد مربوط css را در انتهای فایل paste میکنیم و سپس ذخیره میکنیم
7-بعد وارد ماژول مربوطه شده در قسمت tools تگ ها (div) هایی که داده رو قرار میدهیم
8- سپس ذخیره میکنیم

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

امیدوارم مفید بوده باشه
با تشکر