اندازه و حجم تصاویر در طراحی و پیاده سازی وب سایت ها(قسمت اول)

توسط: محسن درم بخت | منتشر شده در 1394/08/12 | بازدید : 15352 بار | زمان مطالعه : 12 دقیقه

استفاده مناسب از تصاویر در طراحی و پیاده سازی وب سایت یکی از مهم ترین قسمت ها، برای طراحی یک سایت حرفه ای است.پس باید بیاموزیم که چگونه تصاویر را در وب سایت خود مدیریت نماییم.مخصوصا در وب سایت های دینامیک و محتوا محور، مدیریت تصاویر بسیار مهم است.به دلیل اینکه روز به روز مطالب جدید و همراه آن تصاویر مربوطه بر روی هاست وب سایت آپلود می شود.

سوال : در چه قسمت هایی  از سایت، از تصاویر استفاده می کنیم؟


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

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

در رابطه با آیکون ها روش های مختلفی ارائه شد.چون تعداد آیکون ها می توانست زیاد باشد و به همین دلیل برای هر عکس باید یک درخواست از مرورگر کاربر به سرور ارسال میشد تا فایل آیکون مربوطه دریافت شود در روشی که Image Sprite نامیده می شود همه آیکون ها کنار هم و در یک فایل تصویر قرار داده شدند و با استفاده از خصوصیت Position قسمت مربوط از تصویر خوانده و نمایش داده میشد.مشکل این روش آماده کردن تصویر اصلی ، عدم رنگ پذیری تصاویر، مشکل در بزرگ - کوچک کردن و خواندن موقعیت هر آیکون بر روی تصویر بود.


در روش دیگری که الان بهترین روش در نمایش آیکون ها است از فونت آیکون ها استفاده می شود.ما فونت آیکون های معروفی داریم که آیکون های پراستفاده و عمومی را کنار هم به صورت یک فونت ارائه می دهند.مثلا در فونت آیکون fontawesome  اگر نیاز به ستاره داشته باشید می توانید از کلاس fa fa-star برای نمایش دادن یک ستاره استفاده نمایید.فونت آیکون های مزیت های بسیاری دارند.شما دقیقا مانند یک نوشته با آنها برخورد می کنید.یعنی می توانید به آن اندازه و رنگ دلخواه بدهید.پس برای آیکون ها بهترین روش استفاده از فونت آیکون ها می باشد.

 

سوال : آیا می توان فونت آیکون جدید و اختصاصی ایجاد کرد؟

بله.شما باید در ابتدا آیکون های خود را با فرمت svg طراحی نمایید و سپس آنها را با ابزاری یا وب سایت هایی مانند fontastic.me تبدیل به فونت نمایید و بتوانید از آنها استفاده نمایید.

حالا به سراغ تصاویر ثابت مانند لوگو و دیگر تصاویر ثابت وب سایت می رویم.این تصاویر را آماده نمودیم ولی شاید حجم آنها هنوز بهینه نشده باشد و خود نیز براحتی نتوانیم این کار را انجام دهیم.وب سایت هایی در این زمینه سرویس دهی می کنند که حجم تصاویر را به خوبی کاهش می دهند بدون اینکه کیفیت قابل لمسی را از تصویر بکاهند مانند وب سایت compressjpeg.com و نمونه های دیگر که تصویر شما را گرفته و به نسبت خوبی کاهش می دهند.

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


تا این قسمت کارکردن با تصاویر ثابت وب سایت را بررسی نمودیم.در قسمت بعدی مقاله کارکردن با تصاویر داینامیک که توسط کاربر وارد می شوند را بررسی خواهیم کرد.

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

دوره‌های آنلاین برنامه‌نویسی لیست دوره‌ها