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

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

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

Website Images Optimization Guide

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

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

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

چرا بهینه سازی تصاویر وب سایت مهم و چالش‌انگیز است؟

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

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

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

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

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

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

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

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

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

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

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

جمع بندی:

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

منبع: https://www.wix.com

0/5 (0 نظر)

مشخصات مقاله

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

تبلیغات

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

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

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

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

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