در حالت عادی و روتین طراحی قالب، بعد از اینکه طرح قالب را در فتوشاپ ایجاد کردیم شروع به برش تصاویر مورد نیاز می کنیم. یک روش اولیه و قدیمی این هست که شما هر عکس مربوط به قالب را جداگانه اپلود نمایید و توسط 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 انجام میشود.
در صورت تمایل برای مطالعه بیشتر کلیک کنید.