نقش تصاویر در طراحی سایت

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

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

JPG

واژه JPG مخفف عبارت Joint Photographic Experts Group است که نوع استانداردی از تصاویر هستند که در بدنه وبسایت ها مورد استفاده قرار میگیرند.از این فرمت به منظور ذخیره و فشرده سازی تصاویری که توسط دوربین های دیجیتالی گرفته شده اند و دارای میلیون ها رنگ هستند ،استفاده میشود.شما با استفاده از این فرمت میتوانید با اعمال برخی تغییرات نسبت به فشرده سازی عکس اقدام نموده و آن را برای استفاده در سایت آماده نمایید .تکنیک مورد استفاده برای این منظور Lossy Compression است .با استفاده از این فن ،از میزان کیفیت عکس کاسته میشود و متعاقبا حجم کمتری را به شما میدهد.به منظور استفاده از این قابلیت در نرم افزار فتوشاپ میتوانید از منوی file گزینه save for web را انتخاب و کیفیت مورد نظر خودتان را انتخاب نمایید .

GIF

GIF مخفف عبارت Graphics Interchange Format است و نمایانگر تصاویر گرافیکی ثابت و یا متحرک هستند. در فرمت تصویری GIF از تکنیک LZW (Lempel-Ziv-Welch) برای فشرده سازی تصاویر استفاده می شود که یک تکنیک فشرده سازی ( Lossless compression ) است.در این نوع از تصاویر ،محدودیت رنگی وجود دارد.بدین معنی که با توجه به 8 بیتی بودن آن ،تنها 256 رنگ در اختیار شما قرار میگیرد .
نکته : این فرمت تصویری نباید برای تصاویر دیجیتالی و یا تصاویر دارای گرادیانت مورد استفاده قرار گیرد.زیرا با توجه به محدودیت رنگی آن ،موجب کیفیت نامطلوب عکس و بهم ریختگی آن خواهد شد.
با استفاده از این فرمت تصویری ،قادر خواهید بود تصاویر متحرک یا Animation GIF را طراحی نمایید .

نقش تصاویر در طراحی سایت

PNG

PNG مخفف عبارت Portable Network Graphics است و به عنوان جایگزینی برای تصاویر GIF مورد استفاده قرار میگیرد. از محدوده رنگ ۲۴-bit RGB or 32-bit RGBA و همچنین Grayscale ( همراه و یا بدون alpha channel ) پشتیبانی می کند.فرمت PNG تنها به منظور مناسب سازی تصاویر مورد استفاده در وب مورد استفاده قرار میگیرد و برای امور چاپی نامناسب است و به همین دلیل از محدوده فایل های چاپی CMYK نیز پشتیبانی نمیکند.بر خلاف نوع JPG که کیفیت تصاویر پس از فشرده سازی افت پیدا میکردند ،در فرمت PNG و GIF پس از فشرده سازی کیفیت تصاویر کاهش پیدا نمیکنند.در این فرمت برای فشرده سازی تصاویر از تکنولوژی ZLib استفاده میشود که از تکنیک فشرده سازی در GIF که همان LZW است کارامدتر است.
در فرمت PNG دو نوع چنل رنگی 8 بیتی و 24 بیتی وجود دارد.
متاسفانه امروزه تعدادی از مرورگر ها از تصاویر PNG پشتیبانی نمیکنند و این امر موجب بوجود آوردن مشکلاتی برای طراحان وب شده است .اما در نهایت تمامی مرورگر ها ملزم به پشتیبانی از آن خواهد شد زیرا طراحان نسبت به استفاده از این نوع از تصاویر از خود ترغیب نشان داده اند.
استفاده از این فرمت تصاویری به منظور ذخیره سازی تصاویر با کیفیت بالا و اندازه کوچک ،مناسب است.مانند لوگوهایی که رنگ های بسیار زیاد و اندازه کوچکی دارند.
نکته : تصاویر با بکگراند شفاف ،از این نوع تصاویر هستند.

و اما پس از شناختن انواع فرمت های تصویری مورد استفاده در وب به پاسخ برخی از سوالات رایج در مورد چگونگی بکار بردن تصاویر در وب نظیر سوالات زیر خواهیم پرداخت :
• سایز تصاویر چه حد و اندازه ای دارد
• چه نرم افزارهایی برای ادیت تصاویر مناسب هستند
• چه فرمت هایی مناسب تر هستند

اندازه تصاویر برای استفاده در سایت

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

نرم افزارهای مناسب ادیت عکس

هیچ یک از تصاویری که در وبسایت ها مورد استفاده قرار گرفته اند بشکل خام ،در سایت استفاده نشده اند و قبل از استفاده تغییراتی بر روی آن ها صورت گرفته است .
اما یکی از محبوب ترین نرم افزارهایی که بشکل تخصصی بر روی تصاویر کار میکند ،نرم افزار فتوشاپ است که میتوان با استفاده از آن تصاویر را تصحیح رنگی یا محتوایی نمود و سایز آن را اصلاح نموده و به منظور استفاده در وبسایت ،بصورت فشرده سازی شده ذخیره نمایید.
علاوه بر نرم افزارهای ادیت تصاویر ،سایت های متعددی وجود دارند که میتوان بصورت آنلاین ،تصاویر را ادیت نمود .یکی از این سایت ها ،وبسایت tinypic است که با استفاده از آن میتوانید کیفیت عکس ها را به منظور استفاده در وب کاهش دهید .
همچنین در سیستم های مدیریت محتوای سایت ها نیز میتوانید اندازه تصاویر را بنا بر نیاز خود تغییر دهید .
نکته: توجه داشته باشید که هیچ کدام از سایت ها و یا CMSها نمیتوانند برخی امکانات ادیت محتوای عکس ها نظیر تغییرات رنگی و یا حذف و اضافه نمودن یک المان در عکس را بر روی تصویر اعمال نمایند و تنها نسبت به تغییر سایز تصاویر کمک کننده خواهند بود.بنابراین به منظور ادیت عکس ها ،توصیه ما به شما همان نرم افزار محبوب و معروف فتوشاپ است .

فرمت های رایج در تصاویر مورد استفاده در وب

در مورد این نکته در ابتدای مقاله بشکل مفصلی توضیح داده شد .اما بصورت خلاصه فرمت هایی که در مورد تصاویر بکار رفته در وب مورد استفاده قرار میکیرند ،سه فرمت JPG ، PNG و GIF هستند

ما در بهترین آموزشگاه طراحی سایت ، برای طراحی حرفه ای وب سایت ها در کنار شما هستیم