آموزش بهینه‌سازی تصاویر وب‌سایت

آموزش بهینه‌سازی تصاویر وب‌سایت

مشخصات مقاله

آموزش بهینه‌سازی تصاویر وب‌سایت

آموزش بهینه‌سازی تصاویر وب‌سایت

Website Images Optimization Guide

آموزش بهینه‌سازی تصاویر وب‌سایت

رعالت تعادل بین کیفیت تصویر و حجم آن:

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

چرا بهینه سازی تصاویر وب سایت مهم است؟

آیا تابحال به این فکر کرده اید که وقتی آدرس سایتی را در مرورگر خود تایپ می کنید و اینتر را می زنید، چه اتفاقی در پشت صحنه رخ می دهد؟ قاعدتا مرورگر موبایل یا کامپیوتر شما ابتدا باید تمام منابع و المان های صفحه وب را دانلود کند تا بتواند آنرا در در اسکرین دستگاه کاربر (Mobile یا PC) نمایش دهد. اگر سرعت لود وب سایت پایین باشد، هم برای سئو (SEO) عواقب منفی دارد و هم برای تجربه کاربری سایت (UX). لازم به ذکر است که اغلب کاربران اینترنت برای لود طولانی مدت وب سایت ها صبور نمی باشند و آنرا می بندند و سراغ سایت دیگری می روند.

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

» مطالعه مقاله “defer کردن تصاویر بدون استفاده از jQuery” توصیه می شود.

تا چه حد می توان تصاویر را فشرده کرد؟

بهینه سازی تصاویر معمولا به دو تکنیک انجام می شود. اولین تکنیک، فشرده سازی (Compression) است. این روش ساده است: الگوریتم های نرم افزار شما، نقاطی از تصویر را که قابلیت حذف را دارند حذف می کند. تمام فرمت های فشرده سازی به همین طریق کار می کنند که معروف ترین آنها فرمت JPEG می باشد. پس از حذف پیکسل های اضافی، حجم عکس بطور قابل ملاحظه ای کاهش می یابد. استفاده از تصاویر با فرمت JPG در وب سایت باعث کاهش حجم صفحات وب و قاعدتا افزایش سرعت سایت خواهد شد.

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

آیا سایز تصاویر واقعا مهم است؟

اکثر دوربین های امروزی می توانند بدون هیچ زحمتی، تصاویری با کیفیت فوق العاده بالا تولید کنند. حتی دوبین های کمی قدیمی تر نیز قادرند عکس هایی با ابعاد 4290px*2800px بگیرند. این تصاویر با کیفیت مانند شمشیر دو لبه هستند! کیفیت و جذابیت بالای آنها می تواند به جنبه هنری کار شما کمک کند اما اینگونه تصاویر مسلما حجم بالایی دارند و استفاده از آنها در وب سایت چالش انگیز خواهد بود. اینجا جایی است که تکنیک دوم بهینه سازی تصاویر یعنی تغییر اندازه (Resize) بکار میاید. تغییر سایز به معنی کوچک کردن ابعاد تصاویر بدون تغییر در کیفیت می باشد.

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

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

لیستی از رزولوشن های دوربین های مختلف

جمع بندی:

با توجه به مطالب بیان شده تا اینجای مقاله، باید بتوانیم تعادلی بین کیفیت (Quality) و حجم (Size) تصاویر در وب سایت ایجاد کنیم. توصیه می شود اگر ابعاد تصویر موردنظرتان بزرگ است، ابتدا آنرا توسط نرم افزار فتوشاپ، Resize کرده و سپس آنرا توسط ابزارهای آنلاین رایگان مانند TinyPng.com بهینه سازی کنید. این وب سایت، قادر است حجم تصاویر را بدون افت کیفیت، کاهش دهد.

ضمیمه مقاله

چه تعداد تصویر باید در مقاله درج کنیم؟

در سالهای متمادی این چالش بین نویسندگان و نقاشان وجود داشت که تاثیر کدامیک روی مخاطی بیشتر است؟ رنگ ها یا کلمات؟

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

بنابراین باید بپذیریم که کلمات به تنهایی قدرت نفوذ در ذهن مخاطبان دنیای وب را ندارند.

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

پس باید در چند ثانیه اول که کاربر در حال تصمیم گیری برای خواندن یا نخواندن مقاله می باشد نظر او را بوسیله تصاویر جلب کنید و به این رو او را به خواندن محتوای متنی مقاله ترغیب کنید.

حالا که به لزوم نمایش تصاویر در کنار متن در مقالات پی بردید، به سراغ سوال مقاله می رویم که چند تصویر می تواند در مقاله مفید باشد و باعث رضایت کاربران و همچنین گوگل شود؟

برای پاسخ به این سوال باید دو نکته را در نظر بگیریم:

1- ماهیت محتوا

2- تعداد کلمات محتوا

» ماهیت محتوا

هر مقاله مخاطب خاص خود را دارد که انتظارات متفاوتی از مقاله دارند. با توجه به ماهیت محتوا، نوع مخاطب و انتظاری که از محتوا دارد تعداد تصاویر هر مقاله مشخص می شود.

بعنوان مثال بیایید چند نمونه مقاله را بررسی کنیم:

مقاله آموزش فتوشاپ، مقاله‌ای با موضوع فلسفی، مقاله‌ای درباره نقد یک محصول و…

وقتی عناوین این مقالات را می شونیم، انتظارات مختلفی از ساختار محتوای هر یک به ذهن کاربر خطور می کند. مثلا در مقاله آموزش فتوشاپ، توقع داریم برای هر مرحله از آموزش، یک اسکرین شات مرتبط وجود داشته باشد.یا در مقاله ای با موضوع فلسفی، ممکن است یک تصویر انتزاعی یا abstract نمایش یابد. یا در مقاله ای که هدف آن نقد یک محصول است (مثلا موبایل)، انتظار داریم برای مراحل باز کردن جعبه محصول (unboxing) یا تماس با مخاطب یا وسایل جانبی آن یک تصویر مرتبط وجود داشته باشد.

پس وقتی خودمان را جای مخاطب می گذاریم، میبینیم که تصورات کاربر از مقاله می تواند مهم ترین عامل تعیین کننده تعداد تصاویر در مقالات باشد. پس برای پرسش اصلی این مقاله پاسخ دقیقی نمی توان ارائه کرد.

» تعداد کلمات مقاله:

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

چه نوع تصاویری می تواند برای مخاطبین سایت و نیز گوگل جذاب باشد؟

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

– اسکرین شات از مراحل آموزش تخصصی مانند نرم افزار فتوشاپ یا یک اپلیکیشن موبایل و…

– تصاویری از شخصیت های واقعی یک داستان در مقاله.

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

ویژگی بخصوص اینگونه تصاویر اینست که برندتان را از رقبا متمایز می کند که می توانند در بخش جستجوی تصاویر یا images گوگل نسبت به رقبا متمایز شود.

نکته: درج تصاویری که از سایت های دیگر کپی شده اند یا تصاویر بی مفهوم و تکراری هیچ ارزشی به سایت شما اضافه نمی کند. بلکه می توانند امتیاز منفی از دید گوگل در پی داشته باشد.

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

اگر تجربه ای متفاوت در زمینه استفاده از تصاویر در سایت تان دارید یا سوال و ابهامی دارید با آیدی [email protected] در شبکه های اجتماعی با ما در تماس باشید.

 

0/5 (0 نظر)

اطلاعات مقاله

آموزش بهینه‌سازی تصاویر وب‌سایت

فرم ارسال دیدگاه درباره

آموزش بهینه‌سازی تصاویر وب‌سایت

دیدگاه کاربران درباره

آموزش بهینه‌سازی تصاویر وب‌سایت

دیدگاهی وجود ندارد