Css Image Sprites چیست؟ مهمترین نکات در استفاده بهینه و نحوه استفاده از آنچگونه است؟

webmac

Member
383.jpg

Css Image Sprites چیست؟نحوه استفاده و کاربرد آن چیست؟

در حالت عادی و روتین طراحی قالب، بعد از اینکه طرح قالب را در فتوشاپ ایجاد کردیم شروع به برش تصاویر مورد نیاز می کنیم. یک روش اولیه و قدیمی این هست که شما هر عکس مربوط به قالب را جداگانه اپلود نمایید و توسط CSS تک تک فراخوانی نمایید. قبل از اینکه معایب این روش را مطرح نماییم دو نکته بسیار مهم را باید بدانید و آن اینکه:
1. بررسی سایت های سرشناس نشان میدهد که تنها 5 تا 38 درصد از زمان لود شدن صفحات آنها صرف دانلود HTML شده و بقیه 62 تا 95 درصد صرف فراخوان HTTP و پیکربندی مطالب میشود(تصاویر، اسکریپت و استایل) با توجه به اینکه مرورگرها بین 2 تا 4 فراخوان بطور همزمان انجام میدهند تجربه نشان داده است که با افزایش تعداد فراخوان ها سرعت بارگذاری سایت به شدت کاهش می یابد.


2. هر تصویر یا تصویر زمینه در سایت شما فراخوان HTTP جدایی ارسال میکند . یعنی اگر شما 50 تصویر حتی هرکدام 1کیلوبایت هم داشته باشین یعنی 50 مرتبه فراخوان HTTP صورت گرفته است.
حالا با توجه به 2 نکته فوق کاملا واضح می باشد که اگر ما بتوانیم این تصاویر کوچک را در یک تصویر قرار دهیم تا تعداد فراخوان ها HTTPبه جای 50 بار (در مثال ما)یکبار انجام شود و با توجه به این موضوع که 92 تا 95 درصد زمان لود صفحه صرف این فراخوانها میشود معنایش این است که توانستیم به شدت در زمان لود صرفه جویی نماییم.
حال چگونه میتوان این کار را انجام داد؟ بله این کار توسط تکنیکی به نام Css Image Sprites انجام می شود.
در این روش شما همه تصاویر را در یک تصویر بزرگتر ادغام خواهید کرد که باعث کم شدن حجم تصاویر و نیز کمتر شدن تعداد درخواست ها به سرور خواهد شد. به تصویر زیر دقت نمایید تعداد زیادی از عکس در یک عکس ادغام شده است عکس بزرگ ادغام شده معمولا حجمش یا کمتر از مجموع حجم تک تک عکسهای کوچکتر هست و یا برابر اما برای لود شدن آن تنها یک بار فراخوان HTTP انجام میشود.


ادغام چندین عکس کوچیک به یک عکس بزرگتر جهت استفاده از تکنیک css image sprites
حال که به اهمیت استفاده از یک تصویر بزرگ به جایی استفاده از چندین تصویر کوچک پی بردین نحوه استفاده از تکنیک css image sprites با مثالی ساده توضیح میدهیم البته در این مقاله بنای ما آموزش نحوه استفاده از این تکنیک نیست بله دلیل و اهمیت استفاده از آن می باشد. لطفا مقایسه نمایید!!!

7C9GOLAXcW.jpg



1- بدون استفاده از تکنیک css image sprites :

8k8Jctac8K.jpg

کد CSS قبل از تغییر
WI5Hh4bhQ1.jpg

آیکون ها قبل از تکنیک CSS Sprite

با استفاده از CSS Sprite در مثال بالا میتوانیم بجای 10 تصویر مجزا (2 تصویر برای هر آیکون) یک تصویر بزرگتر داشته باشیم. تصویری به عرض آیکونی که بیشترین عرض را دارد و به ارتفاع مجموع ارتفاع آیکون ها بعلاوه 10 پیکسل (به تعداد عکس ها) میسازیم و آیکون ها را بصورت چپ چین از بالا و به فاصله یک پیکسل بین آنها در تصویر قرار میدهیم.
حالا کد CSS جدید را به شکل زیر میسازیم، همانطور که میبینید تنها یک تصویر زمینه قرار دارد و بقیه دستورها با جابجایی این تصویر با استفاده از مختصات X و Y آیکون ها را به نمایش میگذارند.


2- با استفاده از تکنیک Css Image Sprites :

S25SXPDUQd.jpg


کد CSS بعد از تغییر

با استفاده از CSS Sprite در این مثال ساده تعداد فراخوان HTTP 9عدد کاهش یافته و حجم تصویر 5/6 کیلوبایت کمتر شد حالا تصور کنید که تا چه حد میتواند در افزایش سرعت سایت موثر باشد.
GrAUGFySD2.jpg

آیکون ها بعد از تکنیک CSS Sprite

در مثال ساده بالا به راحتی از اهمیت استفاده از تکنیک CSS Sprites آگاه شدید.
استفاده از این تکنیک شاید در ابتدای شروع به کار خیلی راحت نباشد اما بعد از مدتی کار کردن متوجه خواهید شد که چندان هم سخت نیست ضمنا شما میتوانید از نرم افزار SpriteMe استفاده نمایید استفاده از این نرم افزار بسیار ساده می باشد.


تهیه شده توسط گروه وب مک
 

جدیدترین ارسال ها

بالا