در نوشته قبلی(اندازه و حجم تصاویر در طراحی و پیاده سازی وب سایت ها) کارکردن با تصاویر مورد نیاز استاتیک و ثابت وب سایت را آموختیم.در این نوشته می خواهیم کارکردن با تصاویر داینامیک در طراحی و توسعه وب سایت ها که قرار است توسط کاربر وارد شوند را بررسی نماییم.
سوال : چه مشکلاتی در تصاویر وارد شده توسط کاربر وجود دارد؟
کاربر نهایی وب سایت لزوما فرد متخصص کامپیوتری نیست که از جزئیات تصویری که بر روی وب سایت قرار می دهد مطلع باشد.پس برنامه نویس وب سایت است که باید این مواد را چک کند و در صورت لزوم به کاربر راهنمایی و پیام مناسب نمایش دهد.نکات مهم در تصاویر شامل حجم تصویر، ابعاد تصویر و همچنین کیفیت تصویر می باشد که رعایت نکردن هرکدام برای وب سایت شما مشکلاتی ایجاد خواهد کرد.
- حجم تصاویر : اگر حجم تصور بالا باشد زمان زیادی برای لود آن از سرور نیاز خواهد بود که زمان کلی برای دیده شدن صفحه را بالا می برد.
- ابعاد تصویر : اگر ابعاد تصویر با محلی که قرار است در آن نمایش داده شود تناسب نداشته باشد، تصویر به صورت کشیده و بی کیفیت دیده خواهد شد.انگار شما طول 200 پیکسل را بخواهید در 500 پیکسل نمایش دهید.
- کیفیت : عدم رعایت کیفیت تصاویر نیز تاثیر بسیار بدی بر طراحی و صفحه شما خواهد گذاشت.
سوال : با این سه مشکل چگونه می توان برخورد کرد؟
- در رابطه با حجم تصاویر باید حداکثر حجمی که کاربر می تواند آپلود نماید را نمایش دهید.سپس بعد از آپلود فایل نیز باید شما حجم فایل ارسالی را چک نمایید و در صورت بالا بودن از حجم استاندارد، پیغام خطای مناسب به کاربر نمایش دهید.
- ابعاد تصویر نیز به همان روش اول می توان کنترل کرد.ولی این روش اصلا در فضای وب سایت ها معمول نیست.چون کاربر نمی تواند تصاویر را به ابعاد مورد نیاز ما تبدیل نماید چون توانایی این کار را ندارد.پس در رابطه با ابعاد تصاویر، در اکثر مواقع اجازه می دهیم کاربر تصویر خود را آپلود نماید.
- در برخورد با کیفیت تصویر نیز کار زیادی از دست برنامه نویس و طراح وب سایت برنمی آید و فقط باید با توصیه های خود کاربر وب سایت را توجیه به استفاده از تصاویر باکیفیت نماید.
در تصویر بالا شما یک آپلودر تصویر ساده مشاهده می نمایید.در بالا دو تصویر آپلود شده است.چند نکته در تصویر بالا مهم است.ابتدا حجم هر تصویر که باید سقف آن رعایت شود.نکته بعدی تعداد تصاویر است که فقط می توان یک تصویر را آپلود نمود ولی این در متن توضیحات کنار حجم تصاویر نیامده است و کاربر پس از آپلود تصویر دوم، خطای مربوطه که به زبان انگلیسی هم هست را می بیند.
نکته سوم نام تصاویر است که به صورت عددی می باشد.ما باید در مدیریت تصاویر داینامیک وب سایت، به نام تصاویر نیز توجه داشته باشیم و آنها را با استانداردی که برای خود داریم تغییر دهیم.
سوال : چرا باید نام فایل های آپلود شده توسط کاربر را تغییر دهیم؟
سه دلیل اصلی برای این کار داریم.دلیل اول این است که کاربر شاید تصاویر با نام های غیراخلاقی و نامربوط بر روی فایل ارسالی گذاشته باشد که ما را دچار مشکلات فیلترینگ نماید.دلیل دوم اینکه احتمال دارد مثلا دو کاربر یک وب سایت برای محصولی خاص تصاویر هم نام وارد نمایند که در این صورت نیز تصویر دوم بر روی تصویر اول نوشته خواهد شد.دلیل سوم که بسیار نیز مهم است نام گذاری مناسب برای بحث سئو وب سایت که بسیار نیز مهم است.
*** ویژگی alt و نام فایل ها از نکات مهم در بحث سئو می باشد.
پس نام تصاویر را با استانداردی درست و در صورت امکان معنادار تغییر داده و در هارد سرور با نام جدید ذخیره سازی می نماییم.
در ادامه تصویر یک فایل آپلودر بهتر از تصویر قبلی را مشاهده می فرمایید.
تا این قسمت نکات اصلی در مدیریت تصاویر در طراحی و پیاده سازی وب سایت ها را گفتیم.حالا با فرمت های مناسب برای تصاویر در این قسمت آشنا شویم.فرمت های تصاویر می تواند jpg یا png و یا gif باشد.بیشتر تصاویر با فرمت jpg هستند چون نسبتا حجم کمتری نسبت به بقیه فرمت ها دارد و بیشتر بین کاربران استفاده می شود.png در تصاویر با کیفیت بالا و همچنین تصاویری که نیاز به دیده شدن background پشت خود را دارند مناسب تر می باشد.مثلا بهترین فرمت برای آیکون، فرمت png می باشد.
تا بدین جا با مطالب پایه در کار با تصاویر آشنا شدیم.در نوشته بعد با ابزار و تکنیک آشنا خواهیم شد.
این نوشته بخش سوم ی هم خواهد داشت که به معرفی ابزار و تکنیک ها برای مدیریت حجم و ابعاد تصاویر خواهیم پرداخت.
مشاهده دوره رایگان آموزش طراحی صفحات وب
