• ارسال کننده: علی یزدی مقدم
  • تاریخ انتشار: 2014 / 12 / 19

جادوگری با تصاویر وب سایت یا Image Sprites

اسپرایتز کردن یا جادوی مخفی کردن بخشی از تصویر فنی است که به کمک آن می توانید سرعت باز شدن صفحه را افزایش و بار سرور وب سایت خود را کاهش دهید به خصوص اگر وب سایتی پربازدید را اداره می کنید موضوع اهمیت بیشتری پیدا می کند.

img_navsprites

صفحه وبی که تعداد زیادی عکس دارد زمانی زیادی برای باز شد نیاز دارد چون باید تعداد زیادی درخواست برای سرور ارسال نماید تا یک صفحه باز شود. با استفاده از Image Sprites می توانید تعداد درخواست ها را کاهش دهید و نه تنها سرعت باز شدن صفحه را کاهش دهید بلکه در هزینه های اداره وب سایت خود صرفه جویی نمایید.

یک مثال ساده از Image Sprites

همانطور که در شکل زیر مشاهده می نمایید به جای انکه از سه تصویر جداگانه استفاده کنیم همه عکس ها را در یکی جمع کرده ایم:

با استفاده از CSS می توانیم فقط قسمتی از عکس را که باید دیده شود به نمایش بگذاریم.

در مثال زیر کد های CSS مشخص می کنند که کدام قسمت از عکس ما نام img_navsprites.gif نمایش داده شود


#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

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

<img id=”home” src=”img_trans.gif”>

در کد CSS مشاهده می کنید که عرض 46 پیکسل و ارتفاع 44 پیکسل مشخص شده است به این ترتیب مشخص شده است که کدام قسمت از تصویر باید نمایش داده شود.

در خط آخر کد CSS مشخص شده است که تصویر باید به صورت پشت زمینه نمایش داده شود و پس از آن مسیری که عکی در آنجا قرار دارد مشخص شده است.

ترجمه: علی یزدی مقدم

این محتوا اختصاصاً برای یاد بگیر دات کام تهیه شده است استفاده از آن با ذکر منبع همراه با لینک آن و نام نویسنده یا مترجم مجاز است
برچسب ها:



 

در یاد بگیر دات کام مشترک شوید و آخرین مطالب را در ایمیل خود دریافت نمایید

نظر شما چیست؟

پرسش های خود را در بخش پرسش و پاسخ مطرح کنید



تبلیغات اینترنتی در یاد بگیر دات کام

بسته های تبلیغاتی ارزان قیمت



بستن تبلیغات

طراحی سایت
تبلیغات اینترنتی در یاد بگیر دات کام



صفحه ما را در فیس بوک دنبال کنید صفحه ما را در توییتر دنبال کنید صفحه ما را در  اینستاگرام دنبال کنید صفحه ما را در لینکداین دنبال کنید