بهینه سازی تصاویر در صفحات وب

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

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

۱ – حذف فضای اضافه (Crop Out)

در بسیاری از تصاویر مشاهده میشه که فضای زیادی عملا بدون استفاده میمونه و همین باعث بالا رفتن حجم میشه. نرم افزار Photoshop  و یا همتای متن باز اون GIMP میتونن ابزار خوبی برای حذف فضای اضافه باشن.

Crop out excess space

۲- انتخاب بهترین فرمت تصویر

گاهی اوقات استفاده از یک فرمت نامناسب باعث میشه عکس شما عملا فضایی رو اشغال کنه که به اون احتیاجی نداره. برای مثال, برای تصاویری که تنوع رنگ پایینی دارن یا اینکه کلا سیاه و سفید هستند استفاده از فرمت PNG 8-bit و یا GIF باعث کاهش قابل ملاحظه در حجم میشه.به خاطر داشته باشید کاهش عمق رنگ از 256 به چیزی مثل 32 میتونه حجم تصویر شما رو حتی به یک چهارم کاهش بده.

از طرف دیگه اگر تصویر شما یک عکس با تنوع رنگ بالا و زیاد هست میتونید از فرمتهای PNG 24-bit و یا JPEG استفاده کنید. به خاطر داشتبه باشید استفاده از فرمت PNG 24-bit کیفیت بی نظری رو به همراه داره, ولی خوب فضای زیادی رو هم اشغال میکنه. بهتره زمانی که میتونید از فرمت JPG استفاده کنید و اون رو طوری تنظیم کنید که با فشرده کردن تصویر حجم اون شما رو کاهش بده.

Optimizing images through formats

برای مثال حجم تصویر بالا در فرمتهای مختلف به شرح زیره:

  • JPG, 60 quality – 32K
  • PNG-8, 256 colors – 37K
  • GIF, 256 colors – 42K
  • PNG-24 – 146K

همچنین به خاطر داشته باشید که فرمت JPG خاصیتی داره به نام Progressive که باعث میشه هنگام بارگذاری, تصویر به صورت مرحله به مرحله انجام بگیره یعنی ابتدا تصویر تار هست و به مرور واضخ میشه. همچنین فرمت PNG خاصیت مشابهی با نام Interlaced داره که همین کار رو انجام میده. البته استفاده از این خاصیت حجم کلی تصویر رو افزایش میده.

پس به یاد داشته باشید زمانی که در حال ایجاد تصاویری برای سایتتون هستید, تعداد رنگهای استفاده شده رو به حداقل برسونید تا بتونید از از فرمتهای GIF و یا PNG 8-bit استفاده کنید, چرا که حجم تصاویرتون به مراتب کمتر خواهند بود.

۳- تار کردن تصاویر (Blur)

محو یا تار کردن تصاویر باعث میشه که حجم اونها کاهش پیدا کنه. تعدادی از برنامه های گرافیکی مثل Photoshop و یا GIMP فیلتری رو همراه دارن با نام Blur. اگر مایلید میتونید با اعمال این فیلتر به تصویر تون در حد یک یا حداکثر دوبار حجم تصویرتون رو به طور قابل ملاحظه‌ای کاهش بدید. برای مثال تصویر بالا رو با دوبار اعمال فیلتر Blur در پایین مشاهده میکنید که حجم اون از 32 کیلوبایت رسید به 16 کیلوبایت یعنی دقیقا نصف شد.

Optimizing images through bluring

بخشی از مطلب برگرفته از مقالات آموزشی گوگل

مطالب مرتبط:

بهینه سازی کدهای HTML