ابزارها گرافیک گرافیک رابط کاربری هنرهای تجسمی

چگونه با بهینه‌سازی عکس‌ها در فوتوشاپ، سرعت بارگذاری سایت را بیشتر کنیم؟

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

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

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

امکان Save For Web در فوتوشاپ

اولین کار برای بهینه سازی تصاویر، تنظیم چگونگی ذخیره تصویر برای وب از فوتوشاپ است. اگر تا به الان از همان امکان متداول «Save» یا «Save As…» برای ذخیره تصاویرتان استفاده می‌کردید، وقتش رسیده که یک ترفند جدید بیاموزید.

هنگامی‌که می‌خواهید تصاویر را برای استفاده در محیط وب ذخیره کنید، « File > Save for Web & Devices…» امکانی است که باید از آن بهره ببرید. با این روش ذخیره سازی، امکانات اضافه‌تری برای کنترل تنظیمات تصویر، و همچنین پیش نمایشی از آنچه در آخر ذخیره خواهد شد دارید. حتی تنظیمات خاص‌تری برای کاربران حرفه‌ای تر نیز تدارک دیده شده است.

ما در این مقاله، در مورد سه فرمت صحبت می‌کنیم، فرمت‌هایی که بیش از بقیه مورد استفاده قرار می‌گیرند:

  • jpg. – فرمتی با فشرده سازی با اتلاف – مناسب تصاویر
  • png 8-bit. – فرمتی با فشرده سازی بی اتلاف، و با وسعت رنگی محدود
  • gif. – مانند .png 8 با فشرده سازی بی‌اتلاف، و با وسعت رنگی محدود است، اما عموما png. انتخاب بهتری است.

مواردی هست که به استفاده از فرمت png 24-bit. نیازمند می‌شوید (مثلا: این نوع فایل، تنها فرمت متداول دارای alpha channel برای پشتیبانی از نقاط شفاف در تصویر است)، اما با توجه به موضوع این مقاله، اینجا درباره اش صحبتی نمی‌کنیم. بهرحال این فرمت، به دلیل دارا بودن فشرده سازی بی اتلاف و وسعت رنگی (color range) وسیع‌تر، حجیم‌تر هم هست.

فشرده سازی با فرمت jpg.

فرمت تصویری jpg. مناسب‌ترین فرمت برای تصاویری است که دارای پهنه وسیعی از رنگ‌ها هستند، اما در عین حال خطوط تیز یا لبه‌های خیلی ظریفی ندارند.

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

به طور نمونه، تصویر زیر را در نظر بگیرید: به سختی می‌توانید بین تصویری که با بالاترین کیفیت ذخیره شده است (نمونه‌ی مشابهی از تصویر اصلی)، و تصویری که با کیفیت «High» یا (۶۰٪) ذخیره شده تفاوتی بیابید. با این حال، تصویر ما تقریبا حجمی برابر با ۴/۱ تصویر اصلی پیدا کرده است!

کاهش سرعت بارگذاری سایت با فوتوشاپ

تصویر سمت چپی، تصویری است که توسط امکان Save For Web فوتوشاپ و با بالاترین کیفیت ذخیره شده است (۷۴.۹ کیلوبایت). تصویر وسط، همان تصویر است که این بار با کیفیت «High» ذخیره شده و در یک نگاه، کمترین تغییری را می‌توان در آن پیدا کرد، اما حجم فایلش به ۱۹.۶ کیلوبایت کاهش پیدا کرده است! تصویر سمت راستی هم با کیفیت «Low» ذخیره شده که البته کاهش کیفیت مشهودی هم دارد (۶.۲۹ کیلوبایت).

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

فشرده سازی با فرمت gif. و png.

فرمت‌های gif. و png 8-bit. مناسب تصاویری هستند که وسعت رنگی محدودی دارند (این فرمت‌ها می‌توانند تا ۲۵۶ رنگ را نشان بدهند)، و دارای پهنه‌های قابل توجهی از رنگ‌های یکنواخت هستند.

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

معمولا، فرمت png 8-bit. بهتر از فرمت gif. فشرده می‌شود. هر دوی این فرمت‌ها، از پیکسل‌های شفاف پشتیبانی می‌کنند (البته قابل مقایسه با نوع پشتیبانی از شفافیتی که در نسخه 24-bit فایل‌های .png وجود دارد نیستند).

هر دو فرمت .gif و .png 8-bit از نوع فشرده سازی بی اتلاف بهره می‌برند، اما منحصر به وسعت رنگی محدودی هستند. مادامیکه تصویر شما رنگ‌های محدودی داشته، و دارای پهنه‌های وسیعی از رنگ‌های یکنواخت باشد، این فرمت‌های فشرده سازی کیفیتی به مراتب بالاتر و در عین حال حجم بسیار پایین‌تری ارائه خواهند کرد. این فرمت‌ها معمولا برای رابط کاربری و همچنین متن‌ها مناسبند، جاهایی که اگر بخواهید تصاویرش را با فرمت .jpg ذخیره کنید نیازمند ذخیره سازی با کیفیت بالاتری هستید تا جلوه‌ای مشابه بدست آورید (که مساوی با حجم فایل بیشتر است).

هر دو فرمت gif. و png 8-bit. از نوع فشرده سازی بی‌اتلاف بهره می‌برند، اما منحصر به وسعت رنگی محدودی هستند. مادامی‌که تصویر شما رنگ‌های محدودی داشته، و دارای پهنه‌های وسیعی از رنگ‌های یکنواخت باشد، این فرمت‌های فشرده سازی کیفیتی به مراتب بالاتر و در عین حال حجم بسیار پایین‌تری ارائه خواهند کرد. این فرمت‌ها معمولا برای رابط کاربری و همچنین متن‌ها مناسبند، جاهایی که اگر بخواهید تصاویرش را با فرمت jpg. ذخیره کنید نیازمند ذخیره سازی با کیفیت بالاتری هستید تا جلوه‌ای مشابه بدست آورید (که مساوی با حجم فایل بیشتر است).

حجم فایل تصاویر در سرعت بارگذاری سایت اهمیت ویژه‌ای دارد

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

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

 

***

آیا نکته‌ای درباره سرعت بارگذاری سایت هست که از قلم افتاده باشد؟

9

یک دیدگاه

نظر بدهید

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

[انصراف]