نکاتی برای بهینه‌سازی تصاویر مورد استفاده در سایت – بخش دوم

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

تنظیم نوع رنگ در ایجاد لایه‌های گرافیکی تصاویر

در طراحی تصاویر گرافیکی برای آن‌که بتوانید بهترین کیفیت را در سایت نمایش دهید، باید به رعایت برخی از نکات بپردازید! در واقع از نظر طراحان گرافیک که از دید بصری به تصاویر شما نگاه می‌کنند، تصاویر شما باید طراحی بهینه‌ای داشته باشند تا در دید کاربران حس خوبی القا کنند.رنگ‌بندی تصاویر باتوجه به نوع استفاده آنها انواع مختلفی دارند که برخی از آنها بر روی نمایش‌گرها (مانیتورها) و برخی دیگر در دسته چاپ قرار می‌گیرند. برای استفاده از تصاویر در سایت خود باید نوع رنگ (Color mode) را بر روی RGB Color قرار دهید و سپس شروع به طراحی تصاویر موردنظر خود کنید. برای گرافیک چاپی نیز باید حالت CMYK Color را انتخاب کنید؛ توجه داشته باشید که اگر به منظور طراحی گرافیک‌های چاپی بخواهید از حالت RGB استفاده کنید، پس از چاپ رنگ‌بندی با طرحی که شما طراحی کرده‌اید کاملا متفاوت خواهند بود! در گرافیک‌های وب نیز اگر از حالت CMYK استفاده کنید، رنگ‌بندی‌ها کمی متفاوت خواهند بود.

• ۵ نکته اساسی در تصویرسازی با نرم افزار Adobe Illustrator

• نکته: طراحی‌های گرافیکی که با فرمت GIF طراحی می‌شوند، برای طرح‌های انیمیشنی هستند که این طرح‌ها تنها برای استفاده در وب استفاده می‌شوند؛ بنابراین اگر قصد طراحی یک طرح GIF را دارید، باید نوع رنگ را بر روی RGB قرار دهید و سپس شروع به طراحی طرح خود کندی.

حذف بخش‌های اضافی تصاویر

در هنگام ویرایش تصاویر، بسیاری از مواقع شما نیاز به بریدن بخش‌های اضافی تصاویر خواهید داشت! در واقع شما تنها به بخش‌های اصلی یک تصویر جهت استفاده در سایت نیاز خواهید داشت و باید بخش‌های اضافی آن را با استفاده از ابزار Crop فتوشاپ یا سایر نرم‌افزارهای گرافیکی برش بزنید. با استفاده از ابزار Crop فتوشاپ به راحتی می‌توانید در یک محیط مستطیل، مربع یا دایره بخش دلخواه تصاویر را انتخاب کنید و آن را در یک تصویر یا سند گرافیکی دیگر قرار دهید. البته ما در مطلبی آموزش ابتدایی برش عکس در فتوشاپ را به شما آموختیم . با حذف بخش‌های اضافی یک تصویر، ابعاد و جزییات تصاویر شما نیز کاهش پیدا کرده و در نهایت به کاهش حجم تصاویر و تاثیرگذاری بیشتر تصاویر کمک می‌کند.

تنظیم لایه‌های گرافیکی در طرح‌های گرافیکی

یکی از مهم‌ترین مسائلی که در نگاه اول کاربران را تحت‌تاثیر خود قرار می‌دهد، نحوه تنظیم فیلترها بر روی تصاویر است! در واقع تصاویر شما ممکن است در حالت اصلی جذابیتی نداشته باشند اما با استفاده از افکت‌های موجود در نرم‌افزار فتوشاپ به راحتی می‌توان روح تازه به تصاویر ببخشید. با استفاده از تنظیمات مربوط به هر لایه در نرم‌افزارهای گرافیکی نظیر فتوشاپ به راحتی می‌تواند به تصاویر خود سایه اضافه کنید و طرح‌های زیبایی را جهت نمایش به کاربران سایت خود ایجاد کنید.

• چگونه یک لایه را در فتوشاپ به عنوان عکس استخراج کنیم؟

• نکته: اگر از نرم‌افزار فتوشاپ استفاده می‌کنید، سعی کنید هر عنصر گرافیک را در یک لایه قرار دهید؛ این‌کار به شما کمک می‌کند تا به راحتی بتوانید هر لایه را ویرایش کنید و تغییرات موردنظر خود را بر روی آن ایجاد کنید.

تنظیم یک بک‌گراند برای نمایش تصاویر

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

با اینکار می‌توانید نوع نمایش تصاویر گرافیکی خود را نیز کاملا مشاهده و در صورت نیاز در رنگ‌های مورد استفاده در طراحی تصاویر تجدید نظر کنید! اگر درباره سایز تصاویر مشکلی دارید، با یک مثال این مسئله را برای شما شفاف‌سازی می‌کنیم:

فرض کنید تصاویر گرافیکی شما در ابعاد ۳۰۰ در ۳۰۰ پیکسل طراحی شده‌اند؛ در این‌صورت فایل گرافیکی متناسب با رنگ بک‌گراند سایت باید سایز بزرگ‌تر مانند ۶۰۰ در ۶۰۰ پیکسل باشد.

استفاده از تصاویر در محتوای سایت اهمیت بسیار زیادی دارند و تاثیرگذاری مقالات سایت را تا ۹۰درصد افزایش می‌دهند! استفاده از محتوای بصری نباید به گونه‌ای باشد که سبب کاهش سرعت بارگذاری سایت شوند؛ در این مقاله به بررسی برخی از مسائل پرداختیم که به شما در زمینه بهینه‌سازی تصاویر سایت کمک می‌کنند و در مقالات بعدی به بررسی ادامه این مسئله خواهیم پرداخت.