کاهش و بهینه سازی سایز تصاویر وب

کاهش و بهینه سازی سایز تصاویر وب

تصاویر بزرگترین نقطه ضعف صفحات سنگین هستند. ما همواره خود را درگیر کاهش سایز منابعی مانند JS یا CSS می کنیم ولی ناگهان تصاویر سنگینی را به سایت اضافه می نماییم.
در اینجا تصویری نمونه از فلیکر دانلود کردم که دارای 1,005,480 بایت یا 1مگابایت و سایز آن 2048*1151 است. خوب ببینیم چه کاری می توان با این تصویر انجام داد.

 


کاهش ابعاد تصویر
در ابتدا من ابعاد را به 1600px کاهش دادم. این بزرگترین سایزی است که من به سایتم اضافه می کنم زیرا محتوای سایت به ندرت از 900پیکسل بیشتر می شود. حتی به مقادیر کمتر 1600پیکسل نیز می شود آنرا کاهش ولی همین کافی است. از طرفی می توان برای صفحات نمایش مختلف نسخه های متفاوت از تصویر را آپلود کرد. 
در فوتوشاپ برای این کار شما می توانید از گزینه File->Save for Web استفاده نمایید، برای سایز 1600پیکسل حجم عکس به 971کیلوبایت کاهش می یابد.


کاهش کیفیت تصویر
در قدم تعدی کیفیت را روی60 گذاشتم و به عنوان نتیجه مشاهده شد حجم فایل به 213کیلوبایت کاهش یافت.
مات کردن قسمت های بی اهمیت در تصویر
در قدم بعدی مشاهده می شود عکس تنها بر روی شخص تمرکز داشته و شخص است که نقش اصلی در تصویر را بازی می کند. بنابراین برگشتم به تصویر اولیه و فرد را در تصویر با ابزار select انتخاب کردم (نقطه چین) و اطراف او را با استفاده از فیلتر Blur موجود در Filter->Blur->Blur more مات کردم، این کار را آنقدر تکرار کردم که پس زمینه مات شد تا جزئیات بی اهمیت موجود در تصویر فضای کمتری را اشغال نمایند و حجم نهایی کاهش یابد. 

 


سپس دو مرحله کاهش ابعاد و کیفیت تصویر را انجام دادم و تصویر حاصل تنها 149,792 بایت یا 152 کیلوبایت شده بود.
در نهایت با استفاده از ImageOptim سایز تصویر به 147,772 بایت یا 152 کیلوبایت کاهش پیدا کرد. این یعنی صرفه جویی 857,708 بایت در تصویری که از فلیکر دانلود شده بود و بسیار بیشتر از فایل های jQuery و دیگر منابع است.


سایت ها و ابزارهای موجود

  WebResizer 
یکی از مفیدترین ها در این زمینه سایت وب ریسایزر است که امکانات متنوعی دارد:
تغییر اندازه
تغییر زاویه
افزودن کادر 
تعیین کیفیت عکس خروجی
حاشیه دادن به عکس


ImageOptimizer 
سایت دوم برای کم کردن حجم عکس به صورت آنلاین ایمیج اپتیمایزر هست که می توانید اندازه عکس و کیفیت آنرا تغییر دهید.

 


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


نتیجه گیری
کل این مسیری که طی شد برای من 10 دقیقه زمان برد و باعث شد متوجه شوم چگونه می توان تصاویر را فشرده کرد و نسخ مختلف از آن را ذخیره نمود. اگر شما به این کار عادت کنید مطمئن باشید این پروسه برای شما بیش از 2-3 دقیقه طول نخواهد کشید و ارزشش را خواهد داشت.
در انتها همواره باید از خود بپرسید آیا این تصویر حتما باید در صفحه وب باشد؟ بنابراین از تصاویر اضافه بپرهیزید تا سایت پر سرعتتر و سبکتری داشته باشید.

کلیدواژه ها: SEO بهینه سازی سایت سئو
بازدید: 1264

نظرات

ارسال پاسخ