wordle-css38
توسعه وب, مقاله

آموزش تکنیک CSS Sprites و استفاده از آن در ساختن Image Map

۸ 174

آیا تابحال دنبال تکنیکی بوده اید تا بتوانید با استفاده از بهینه کردن تصاویر بکاررفته در یک صفحه ی وب، سرعت بارگذاری را افزایش دهید؟ CSS Sprites تکنیکی ساده و موثر است که تاثیر بسزایی در بالا رفتن سرعت بارگذاری صفحات دارد. ابتدا به توضیح این تکنیک می پردازیم و در پایان نیز مثال جالبی در مورد نحوه ایجاد یک CSS Image Map با استفاده از CSS Sprites را بررسی خواهیم کرد.
فرض کنید رئیس یک شرکت بزرگ از شما در مورد پایین بودن سرعت بارگذاری یکی از صفحات وب شرکت که باعث ایجاد نارضایتی کاربران شده راه حلی می خواهد؛ شما بعنوان یک طراح و توسعه دهنده ی خوب بعد از مطالعه پروسه ی بارگذاری صفحه و بررسی درخواست ها و پاسخ های بین کلاینت وسرور پی به این موضوع می برید که بارگذاری حجم بالایی از عکس ها در کندشدن این صفحه تاثیر داشته است. نزدیک به ۱۰۰ عکس که سایز آن ها بین ۱ تا ۱۰ کیلوبایت است و فقط بالا بودن تعداد آن ها باعث بروز این مشکل شده است. با این وجود شما چه پاسخی به این سوال خواهید داد؟ آیا خواهید گفت مشکل از سرعت پایین اینترنت کاربران است یا مساله را به بهتر یا بدتر بودن تکنولوژی های PHP، JAVA یا ASP.NET نسبت می دهید؟
این مقاله به ارائه ی راه حلی برای این مساله می پردازد. تکنیکی به نام CSS Sprites که ایده ی اولیه آن از صنعت بازی سازی گرفته شده است و البته در عرصه وب نیز کاربرد دارد.
ایده اصلی این تکنیک به این صورت است که تمامی عکس های کوچک (دراینجا همه ۱۰۰عکس) در قالب یک تصویر بزرگ قرار خواهد گرفت و با استفاده از CSS مختصات هر عکس کوچک را در تصویر بزرگ پیدا کرده و نمایش می دهیم. یکی شدن ۱۰۰ عکس کوچک به یک عکس بزرگ، تاثیر زیادی در پایین آمدن حجم عکس جدید خواهد داشت و سختی کار فقط در تشخیص عکس های موردنظر از درون عکس جدید است.
به این مثال توجه کنید:

اگر این کد را اجراء کنید ۳ عدد مربع بصورت زیر خواهید دید:

1

حال به هر مربع یک عکس نسبت می دهیم، کلاس های خالی نوشته شده به این صورت اصلاح خواهد شد:

پس از اجرای صفحه سه مربع به رنگ های آبی، قرمز و زرد خواهید دید:

2
مساله ای که در این حالت وجود دارد اینست که سه بار درخواست بارگذاری برای سه عکس مختلف به سرور ارسال شده است. دقیقا همین نمایش را می توان با استفاده از تکنیک CSS Sprites انجام داد با این تفاوت که در این حالت ما یک عکس را بارگذاری کرده و با استفاده از CSS قسمتی از عکس اصلی را که مورد نظرمان هست به کلاس های تصویر پیش زمینه انتساب می دهیم. با استفاده از نرم افزار فتوشاپ سه عکس را بصورت زیر به یک عکس تبدیل می کنیم:
3
سپس تغییرات ذیل را لحاظ می کنیم:

در این کد تصویر جدید را که از ترکیب سه تصویر قبلی ایجاد کردیم بعنوان تصویر پیش زمینه به کلاس container نسبت دادیم و با استفاده از خاصیت background-position در سه کلاس blue، red و yellow قسمت مورد نظرمان را از عکس کلی انتخاب کردیم. استفاده از این تکنیک علاوه بر اینکه باعث کاهش برآیند حجم عکس ها می شود به پایین آمدن تعداد درخواست ها و پاسخ های بین کلاینت و سرور نیز منجر خواهد شد.

پس از اجرای کد بالا همان خروجی قبل را خواهیم داشت با این تفاوت که بجای سه عکس اول، فقط عکس sprites.jpg بارگذاری خواهد شد.
در حالت اول حجم صفحه برابر با ۱۲ کیلوبایت و تعداد HTTP Requestها برابر با ۴ می باشد در حالتی که در حالت دوم، حجم صفحه برابر با ۸ کیلوبایت و تعداد HTTP Requestها به ۲ کاهش یافت.
در ادامه برای آشنایی بیشتر با تکنیک CSS Sprites، به شرح یک مثال جهت ایجاد Image Map خواهیم پرداخت.
مطمئنا تگ هایی که برای عکس ها در سایت هایی مانند facebook یا flickr می توان درست کرد را دیده اید. بعنوان مثال در سایت فیس بوک می توان اسامی افرادی که در یک عکس قرار دارند را با کادری که مشخص کننده هر فرد است تعریف کرد تا با اشاره موس روی صورت هر فرد، اسم فرد نمایش داده شود. یکی از روش هایی که می توان با استفاده از آن این کار را انجام داد CSS Image Map می باشد که با استفاده از تکنیک CSS Sprites قابل انجام است.
کاری که در این مثال می خواهیم انجام دهیم اینست که کاربر با قرار دادن موس روی هریک از شماره های موجود در عکس زیر توضیح مربوط به آن شماره در عکس نمایش داده شود.
4
بعنوان مثال با قرارگرفتن موس بر روی شماره ۴ که یک نوت بوک است این اتفاق بیفتد:
5
در فایلی که ضمیمه شده است نمونه این مثال جهت دانلود قراردارد. ابتدا کلاس officeMap را بررسی می کنیم:

در حالتی که موس روی هر کدام از شماره ها قرار می گیرد آیتم مورد نظر map می شود و همان طور که در شکل نمایش داده شده کادری با حاشیه سفید نمایان می شود. تصویر این کادرها را با استفاده از فتوشاپ ایجاد می کنیم و از آنجایی که در پروژه از تکنیک CSS Sprites استفاده کرده ایم عکس ها را به هم متصل می کنیم. علت وجود عکس سوم در شکل زیر اینست که کادر نوت بوک با کادر مانیتور و فلاپی هم پوشانی دارد و به این دلیل در یک تصویر مجزا این کادر را به تصویر اضافه کردیم. در نهایت عکس office.jpg که در عکس پیش زمینه کلاس officeMap قراردارد به این صورت درخواهد آمد:

6
از آنجایی که ۵ شماره در عکس داریم نیاز هست تا ۵ گروه کد CSS برای هر شماره ایجاد کنیم. تنها نکته ای که حائز اهمیت است مشخص کردن هر کادر در تصویر است که موقعیت هر عکس را در ویژگی background-image هر کلاس مشخص کرده ایم. کدی که برای مانیتور نوشته شده است به این صورت است:

برای ۴ شماره دیگر نیز کدها به همین صورت است. این مثال در مرورگرهای IE6+، Mozilla و Opera تست شده است.

این مقاله در شماره سوم مجله الکترونیکی برنامه نویس که در خرداد ۸۸ منتشر شد، درج شده است.
منابع:

http://www.codeproject.com/Articles/35118/Optimize-your-Pages-using-CSS-Sprites.aspx

http://www.frankmanno.com/ideas/css-imagemap

Share

در باره نویسنده / 

حمیدرضا متقیان

مدیر محصول نرم افزار. علاقه مند به دنیای وب و ارزش آفرینی در کسب و کار.

۸ دیدگاه

  1. شهاب ۱۳۸۹-۰۶-۰۷ در ۷:۱۶ ق.ظ - 

    سلام .
    من از این روش خواستم برای وب خودم استفاده کنم . برای چند تا عکس برام مشکل بوجود اومد .
    من از طریق سایت
    http://spritegen.website-performance.org
    عکس های رو وارد کردم و مختصات هر کدوم رو بدست آودم و وارد کردم . اما توس بعضی از عکس ها میدیدم که عکس های دیگه هم اومدن و قالب وب سایتم کاملاً بهم میریخت .
    چطوری میشه عکس ها رو یکی کرد و بعد مختصاتشون رو بدست آورد ؟
    ممنون

  2. حمیدرضا ۱۳۸۹-۰۶-۱۸ در ۳:۴۹ ب.ظ - 

    من اون سایت رو ندیدم.
    ولی برای عکس های ساده نیازی به ابزار برای مشخص شدن مختصات نیست. شما در فوتوشاپ عکس ها رو یا بصورت افقی یا عمودی کنار هم قرار میدی، طول و عرض هر عکس رو هم که میدونی باین صورت خیلی راحت میشه position رو نوشت.
    موفق باشید.

  3. مهسا ۱۳۸۹-۱۰-۱۸ در ۱۰:۰۰ ق.ظ - 

    عالی بود ممنونم

  4. علی پاییزی ۱۳۹۰-۰۶-۰۸ در ۹:۵۷ ق.ظ - 

    باسلام و خسته نباشید

    این مطلب رو زیاد خونده بودم. اما به این قشنگی توضیح نداده بودند. متشکرم

  5. jvd ۱۳۹۰-۰۹-۱۹ در ۷:۰۲ ب.ظ - 

    عالی بود ممنون

  6. محسن ۱۳۹۲-۱۱-۲۵ در ۲:۱۶ ب.ظ - 

    اگه کادر ما مثلا تگ p بزرگتر از اندازه قطعه عکس در سپرایت ایمیج باشه چطور میشه دقیق تر کار کرد

  7. حمیدرضا ۱۳۹۲-۱۲-۰۲ در ۱۲:۲۷ ب.ظ - 

    سلام دقیقاً متوجه سوال شما نشدم.

ارسال پاسخ

ایمیل شما نمایش داده نمی‌شود. موارد مورد نیاز علامتگذاری شده است *

نوشته های تصادفی

  • یوزر اینترفیس به سبک اجایل

    یوزر اینترفیس(رابط کاربری) به سبک اجایل #۳

    و اما قسمت آخر؛ در دو پست قبلی کلیاتی درباره UI Development مطرح شد. در این قسمت بصورت کاربردی تر به این موضوع خواهم پرداخت.  همونطور که می دونید Iterative(تکرارشونده) و Incremental(تدریجی)  بودن توسعه، دو اصل حیاتی در بطن Agile هستن. بعضی ها فکر می کنن که این دو مورد فقط باید در توسعه Back-End…

  • 5 افسانه Agile

    ۵ افسانه Agile

    بی شک برای استفاده از هر روش جدیدی دلایلی وجود دارد.  یکی از این دلایل می تواند برتری نقاط قوت روش جدید نسبت به روش فعلی باشد. اما آیا همیشه اینطور است؟ اگر شما به یکی از دلایل ذیل می خواهید به اجایل مهاجرت کنید باید بدانید که دچار افسانه زدگی Agile شده اید! این…

پربازدید ترین ها

  • بندهای حیاتی یک قرارداد تولید نرم افزار

    بندهای حیاتی یک قرارداد تولید نرم افزار

    یک قرارداد محکم از اساسی ترین ملزومات موفق انجام شدن یک پروژه نرم افزاری هست. خیلی از اختلافات بین کارفرما و مجری با استناد به قرارداد رفع میشه و مهمتر از هر چیز بحث ضرر و زیان پروژه هست که برای طرفین مهم هست. بعنوان یک اصل کلی، کلیات و جزئیات قرارداد رو جدی بگیرین…

  • بایدها و نبایدها در ارائه پروپوزال

    بایدها و نبایدها در ارائه پروپوزال

    در اسفند ۸۸ در وب سایت بزرگ برنامه نویس به موجب سوال یکی از دوستان در مورد “شیوه ارائه طرح پیشنهادی نرم افزار”  توضیحاتی هر چند مجمل دادم که خوندنش خالی از لطف نیست: Proposal رو باید بر اساس RFP یا Request For Proposal ای که از مشتری میگیرین تهیه کنید. RFP از اهمیت زیادی…

  • the-internet-of-things

    آینده در دستان اینترنت اشیاء (IoT)

    Internet Of Things تحولی در آینده اینترنت است که مسلماً کسب و کار نرم افزار رو بسیار پر رونق تر و در عین حال فراگیرتر می کنه.  فرض کنید به خرید رفتید و خیلی راحت از یخچال خونتون استعلام میکنید که چه چیزهایی رو باید خریداری کنید؛ نیم ساعت قبل از اومدنتون میتونید سیستم تهویه…

عضویت در خبرنامه

بایگانی

آخرین Tweet ها

  • RT @henrikkniberg: Scrum Checklist - broken links fixed! https://t.co/YkbJWKeWxU16 days ago
  • RT @ghanemzadeh: «ز آب خُرد، ماهی خُرد خیزد؛ نهنگ آن به که با دریا ستیزد.» - سعدی18 days ago
  • RT @theanother: این ایده‌ها نیستند که یک کسب و کار رو موفق می‌کنند بلکه آدم‌ها هستند! از کپی شدن ایده‌هاتون نترسید از رفتن آدم‌هاتون بترسید43 days ago