بکارگیری مناسب تصاویر و بهینه سازی تصاویر در طراحی سایت یکی از مهم ترین قسمت ها، برای طراحی یک سایت حرفه ای است.پس باید بیاموزیم که چگونه تصاویر را در وب سایت خود مدیریت نماییم.مخصوصا در وب سایت های داینامیک و محتوایی ، مدیریت تصاویر بسیار حائز اهمیت است.به این دلیل که روز به روز مطالب جدید همراه آن تصاویر مربوطه بر روی وب سایت بارگذاری می شود و در نهایت حجم زیادی از این جور وب سایت ها را تصاویر شامل می شود.
در طراحی سایت در کل دو دسته تصاویر ثابت که تعداد آنها مشخص است و تصاویری که نسبت به موضوع فعالیت و محتوای وب سایت مانند وب سایت فروشگاهی که مدام در حال افزودن محصول و اطلاعات مربوط به آن هستند وجود دارد.
در این مقاله سعی داریم بهینه سازی تصاویر ثابت را بررسی کنیم .تصاویر ثابت وب سایت شامل تصاویر آیکون ها و قسمت هایی مانند لوگو و … می باشد.مدیریت این تصاویر ساده تر از تصاویری است که به صورت محتوایی به وب سایت افزوده می شود.ما تصاویر ثابت با اندازه های مورد نیاز را تهیه و بهینه می کنیم و در وب سایت قرار می دهیم.
بهینه سازی آیکن ها
در رابطه با آیکون ها روش های مختلفی وجود دارد.چون تعداد آیکون ها می تواند زیاد باشد و به همین دلیل برای هر عکس باید یک درخواست از مرورگر کاربر به سرور ارسال میشد تا فایل آیکون مربوطه دریافت شود در روشی به نام Image Sprite همه آیکون ها کنار هم و در یک فایل تصویر قرار داده می شدند و با استفاده از خصوصیت Position قسمت مربوط از تصویر خوانده و نمایش داده میشد.مشکل این روش آماده کردن تصویر اصلی ، عدم امکان رنگ پذیری تصاویر، مشکل در اندازه و خواندن موقعیت هر آیکون بر روی تصویر بود.
روش دیگری که هم اکنون بهینه ترین روش در نمایش آیکون ها به شمار می رود استفاده از فونت آیکون ها است .فونت آیکون های معروفی وجود دارد که آیکون های پراستفاده و عمومی را کنار هم به صورت یک فونت ارائه می دهند.مثلا در فونت آیکون fontawesome اگر نیاز به آیکن خانه داشته باشید می توانید از کلاس fa fa-home برای نمایش دادن آیکن خانه استفاده نمایید.فونت آیکون های مزیت های فرآوانی دارند.شما دقیقا مانند یک نوشته با آنها برخورد می کنید.یعنی می توانید به آن اندازه و رنگ دلخواه بدهید.پس برای آیکون ها بهترین روش استفاده از فونت آیکون ها می باشد.
بهینه سازی تصاویر ثابت
حالا به سراغ تصاویر ثابت مانند لوگو و دیگر تصاویر ثابت وب سایت می رویم.این تصاویر را آماده نمودیم ولی شاید حجم آنها هنوز بهینه نشده باشد و خود نیز براحتی نتوانیم این کار را انجام دهیم.وب سایت هایی در این زمینه سرویس دهی می کنند که حجم تصاویر را به خوبی کاهش می دهند بدون اینکه کیفیت قابل لمسی را از تصویر بکاهند مانند وب سایت compressjpeg.com و نمونه های دیگر که تصویر شما را گرفته و به نسبت خوبی کاهش می دهند.