بهینه سازی تصاویر سایت چه مزایایی دارد؟ در مبحث بهینه‌سازی و افزایش سرعت لود یکی از مهم‌ترین مسائلی که روی سرعت لود تاثیر بسیار زیادی دارد بهینه‌سازی تصاویر میباشد. تصاویر با سایزهای نامناسب، اولاً باعث افزایش میزان مصرف سایت شما می‌گردد و دوماً زمان لود سایت شما با توجه به تعداد تصاویر و سایز آنها بالاتر رفته و کند می‌گردد.
برای این منظور و جهت بهینه‌سازی تصاویر یک وب سایت شما می‌توانید هنگام تهیه تصاویر آنها را بهینه ذخیره کنید تا در آینده دچار مشکل نشوید. در نظر داشته باشید که ذخیره بهینه فقط به سایز مناسب تصویر مربوط نیست بلکه نوع ذخیره‌سازی نیز بایستی بهینه و مناسب صفحات وب باشد. به دلیل اینکه تصاویر ایجاد شده در نرم‌افزارهای گرافیکی پیش فرض با کیفیت و مناسب چاپ با کیفیت بالا طراحی میشوند همچنین حجم خروجی آنها نیز بالا می‌رود. در ذخیره‌سازی مناسب جهت صفحات وب مقداری کیفیت پایین می‌آید تا حجم تصویر کاهش پیدا کند. البته در این کاهش حجم کیفیت تصاویر خیلی هم پایین ذخیره نمی‌شوند.
برای داشتن تصویر مناسب باید چند نکته را درنظر داشته باشید. هنگامی که شما قصد دارید تصویر خود را مناسب برای وب ذخیره کنید ۲ مورد بسیار مهم را باید رعایت کنید. اولین مورد انتخاب پسوند فایل مناسب و مورد دوم و مهم نیز فشرده‌سازی (بهینه سازی برای وب). با انتخاب صحیح این ۲ مورد سایز تصاویر شما تا ۵ برابر می‌تواند کاهش یابد.
اکثر تصاویری که در وب استفاده می‌گردند Png و JPG هستند. البته این ۲ فرمت برای تصاویر ثابت استفاده میشوند. برای تصاویر بنری و متحرک از فرمت Gif استفاده میشود.
هنگامی که شما قصد دارید تصاویر ترنسپرنت استفاده کنید همچنین تعداد رنگ‌های استفاده شده در تصاویر نیز پایین است باید نوع خروجی PNG را برای تصویر خود استفاده کنید. جهت ذخیره تصاویر مناسب وب در ادامه خروجی نرم افزار Adobe Photoshop برای وب را بررسی خواهیم نمود.
در صورتی که تصاویر شما دارای رنگ می‌باشند و پشت زمینه آنها نیز ترنسپرنت نیست یعنی شما می‌توانید تصاویر خود را با کیفیت دلخواه در خروجی JPG ذخیره کنید. تصاویری که با تعداد رنگ بالا به صورت JPG ذخیره میشوند دارای حجم کمتری هستند. بدین منظور بهتر هست از خروجی نرمافزار Adobe Photoshop استفاده کنید. هنگام ذخیره فایل های JPG یا Jpeg توسط نرمافزار فتوشاپ شما این انتخاب را دارید که با توجه به کیفیت تصویر خروجی، حجم آن را بسیار کاهش دهید.
جهت استفاده از خروجی بسیار مناسب و بهینه شده تصاویر ویژه وب سایت، بهترین نرمافزار فتوشاپ است. شما می‌توانید تصاویر خود در فتوشاپ را با اندازه مناسب ذخیره کنید همچنین با کیفیت و نحوه فشرده‌سازی بسیار بهینه استفاده کنید. طبق تحقیقات انجام شده خروجی‌های تهیه شده توسط نرمافزار فتوشاپ حداقل ۲ برابر بهینه‌تر از سایر نرم‌افزارهای گرافیکی میباشد. البته این مقایسه برای تصاویر با خروجی JPG صدق می‌کند.
دلایل اهمیت بهینه سازی تصاویر
در صورت بهینه‌سازی تصاویر سایت مزایای زیادی متوجه شما میشود. اما موضوع مهم‌تر از مزیت، این است که در صورت بهینه نکردن تصاویر، مشکلاتی برای وب‌سایت‌تان ایجاد میشود. دلیل اینکه به بهینه کردن تصاویر سایت اصرار داریم، موارد زیر است:
کاهش مصرف حافظه یا هاست سایت
تصاویر، ذاتِ وب مدرن‌اند! شاید حتی یک صفحه را هم در سایت‌های معتبر مشاهده نکنید که در آن عکس و تصویر وجود نداشته باشد. بنابراین شما نیز برای بهبود سایت‌تان ناچارید در هر صفحه از آن تصویر یا تصاویری آپلود کنید. حالا تصور کنید، سایت‌تان شامل ۲۰۰ صفحه و در هر صفحه ۳ تصویر بهینه نشده وجود دارد!
افزایش حجم تصاویر، باعث افزایش مصرف حافظه یا فضای هاست شما میشود. این موضوع علاوه بر اینکه مشکلات فنی زیادی را به وجود می‌آورد؛ شما را مجبور می‌کند که هزینۀ بیشتری را صرف ارتقاء فضای هاست و سرور کنید؛ در حالی که با بهینه‌سازی تصاویر به سبک‌تر شدن سایت کمک کرده و از این مشکلات جلوگیری می‌کنید.
بهبود تجربه کاربری
مطمئنا خودتان هم بارها با سایت‌هایی روبرو شده‌اید که تصاویر بی‌کیفیت‌شان مجبورتان کرده، به سرعت از آن خارج شوید. تمامی فعالیت‌هایی که شما در سایت خودتان انجام می‌دهید، برای جلب نظر مخاطب و تبدیل او به مشتری است. وجود تصاویر باکیفیت و البته با حجم مناسب، می‌تواند باعث افزایش تجربه کاربری یا UX و در نهایت افزایش نرخ تبدیل شود.
افزایش سرعت سایت
گوگل و دیگر موتورهای جستجو تمرکز خاصی روی سرعت سایت دارند و آن را یکی از فاکتورهای مهم در رقابت سایت‌ها دسته‌بندی می‌کنند؛ بنابراین، سرعت یکی از مهم‌ترین عوامل برای بهبود سئوی سایت است.
علاوه بر موتورهای جستجو، کاربران هم برای زمان خود ارزش بسیار زیادی قائل‌اند. طبق آمار به دست آمده از یک تحقیق، شما تنها ۳ تا ۵ ثانیه پس از ورود کاربر زمان دارید که تمامی صفحه سایت را به او نشان دهید. بسیاری از کاربران ایرانی پس از گذشت این زمان و باز نشدن صفحه وبسایت، از آن خارج میشوند. این یعنی یک “نرخ پرش” وحشتناک برای سایت شما که در نهایت باعث کاهش رتبه‌تان در نتایج میشود.
بهینه سازی و کاهش حجم تصاویر با Adobe Photoshop
در صورتی که شما تصاویر خود را در محیط‌های دیگری همچون Paint یا سایر نرم‌افزارها تهیه نموده‌اید پیشنهاد می‌کنیم فتوشاپ را نصب کنید و با چند قدم ساده تصاویر بهینه برای سایت خود ذخیره کنید. در قدم اول از منو Image گزینه Image Size را انتخاب کنید تا طبق تصویر زیر بتوانید سایز عکس خود را به صورت مناسب تغییر دهید.
در این قسمت می‌توانید تصاویر خود را با PX و یا CM و… تغییر اندازه دهید.
بعد از انتخاب سایز مناسب برای عکس خود می‌توانید با توجه به فرمت خود تصاویر با فشرده‌سازی بیشتر و حجم کمتری ذخیره کنید. برای این منظور از منو File نرمافزار فتوشاپ گزینه Save For Web را انتخاب کنید تا ابزار ذخیره‌سازی فتوشاپ برای وب را همانند تصویر زیر مشاهده کنید.
کاهش حجم تصاویر
همانطوری که مشاهده می‌کنید در این تصویر ما خروجی PNG را با حالت Transparent انتخاب نموده‌ایم تا بتوانیم تصویر را در همه جا بدون پشت زمینه استفاده کنیم. همچنین فرمت PNG نیز بصورت ۲۴ بیتی انتخاب شده است. در صورتی که تعداد رنگ‌های عکس PNG شما کمتر باشد می‌توانید به صورت ۸ بیتی نیز ذخیره کنید تا تصویر شما حجم کمتری داشته باشد.
در صورتی که عکس شما به صورت Transparent نباشد شما می‌توانید آن را به صورت JPG با فشرده‌سازی بیشتری ذخیره کنید. برای این منظور در همان منو File و Save For Web نوع خروجی را همانند تصویر زیر JPG انتخاب کنید.
شاید این مقاله را دوست داشته باشید: دیباگ وردپرس
بهینه سازی عکس ها
همانطوری که در تصویر فوق نیز مشاهده می‌کنید می‌توانید کیفیت خروجی را از ۰ تا ۱۰۰ مشخص کنید. همچنین کیفیت خروجی را تغییر داده و تاثیر آن روی عکس خود را مشاهده کنید. بهترین عدد برای جلوگیری از افت کیفیت بسیار زیاد ۸۰ میباشد. البته معمولاً در بسیاری از تصاویر این عدد تا ۷۰ نیز تغییر خیلی زیادی در کیفیت تصویر نخواهد داشت.
جهت مشاهده حجم تصویر نهایی قبل از ذخیره‌سازی آن می‌توانید در انتهای تصویر و سمت چپ حجم نهایی را مشاهده کنید.
بهینه سازی تصاویر با استفاده از ابزارهای آنلاین
ابزارهای آنلاین رایگان و غیر رایگانی هم در سطح وب وجود دارد، که می‌توانند با کمترین نرخ کاهش کیفیت، باعث بهینه‌سازی حجم تصاویر شما شوند. معروفترین ابزار، سایت tinypng است. در این سایت می‌توانید تا ۲۰ تصویر را به صورت یکجا بارگذاری کنید و پس از بهینه‌سازی، آنها را دانلود کنید. دقت کنید که گاهی اوقات سایت tinypng و همینطور ابزار معرفی شده در فتوشاپ، می‌توانند تا ۷۰ درصد از حجم فایل شما را کاهش دهند.
تفاوت روش‌های کاهش حجم تصویر
به طور کلی، ۲ راهکار برای کاهش حجم تصاویر وجود دارد که می‌توانید از آنها استفاده کنید:
- Lossless
- Lossy
در روش اول یا Lossless، با کاهش حجم تصویر، کیفیت عکس هم پایین می‌آید؛ این یعنی با کم شدن رنگ‌های موجود در عکس، پیکسل‌ها و… حجم تصویر شما هم کاهش پیدا می‌کند.
اما در روش دوم یا Lossy، کم شدن حجم تصویر با استفاده از حذف اطلاعات آن انجام میشود! منظور از اطلاعات، کدهای ذخیره شده در تصاویر است. هر تصویر دارای چندین خط کد مختلف است. برخی از آنها برای ساخت خود عکس و برخی دیگر هم شامل اطلاعاتی مثل نام عکاس، دوربین، کپی‌رایت و… هستند.
در روش Lossy این کد‌ها تا جای ممکن حذف شده و باعث میشوند تا حجم تصویر شما کاهش پیدا کند. البته در صورت زیاده روی در این روش هم، کیفیت عکس افت پیدا می‌کند. ابزار save for web در فتوشاپ و سایت tinypng از روش Lossy استفاده می‌کنند.
