بهینه سازی عکس برای صفحات وب چطور انجام میشه ؟

[<?php?>]

من برای اسلاید شو صفحه سایت خودم دارم از یک عکس 2000*1333 استفاده میکنم با حجم فعلی : 192 کیلو بایت

معمولا عکس رو میبرم تو فتوشاپ و در فتوشاپ از طریق گزینه save for web عکس رو برای استفاده در وب بهینه میکنم . ( نه تنها حجمش کم میشه بلکه برای وب هم بهینه میشه )

بعدش میام توی سایت هایی مثل این سایت ها عکس رو مجدد کمپرس میکنم تا به حداکثر بهینه سازی برسن :
http://compressjpeg.com/
https://compressor.io/


مشکلم اینجاست که وقتی میخوام از بخش save for web تو فتوشاپ عکس رو برای وب بهینه کنم - عکس من به سایز 597 کیلوبایت ارتقاع پیدا میکنه ( البته من کیفیت رو 100 درصد گذاشتم ) . اما این حجم تقریبا 2 برابر حجم واقعیشه .

من قصدم اینه که عکس تو وب هم کم حجم باشه - هم وقتی کاربر عکس رو میبینه , عکس تیکه تیکه لود نشه - بلکه مات باشه اروم اروم کیفیتش بیشتر بشه .
باید از چه سایت یا نرم افزاری استفاده کنم ؟


تشکر

[jalaljee]

بهتر از این نرم افزار استفاده کنی
https://soft98.ir/software/pic-tools/16732-Caesium.html
سایت های بزرگ برای کاهش حجم تصاویر از این نرم افزار استفاده می کنند

[persiandroid]

سلام
بعد از بارگذاری عکس در وب سایت به وب سایت https://gtmetrix.com بروید و در آنجا پس از وارد کردن وب سایت خود و درخواست آنالیز، نسخه کم حجم و بهینه شده عکس را دانلود کنید.

[AtrafNet]

سلام
من فایل های png. رو با نرم افزار رایگان PNGGauntlet به صورت گروهی فشرده میکنم: https://pnggauntlet.com

درباره تیکه تیکه لود شدن یا اول مات بودن بعد با کیفیت شدن عکس تو مرورگر های وب هم باید بدونید که این موضوع تو عکس های jpg. هستش که وقتی به صورت Baseline Standard عکس ها رو ذخیره کنید عکس به صورت تیکه تیکه از بالا به پایین لود میشه اما وقتی به صورت Progressive که معمولاً خروجی حجم کمتری هم داره ذخیره کنید عکس ها اول به صورت مات و بی کیفیت لود میشن بعدش بسته به سرعت اینترنت شخص لودش کامل و با کیفیت میشه.
یه حالت دیگه Baseline Optimized هم هست که تو فتوشاپ فقط می نویسه Optimized که نسخه ارتقاء یافته Baseline Standard هست و خروجی فشرده تری میده ولی ممکنه در مرورگر های خیلی خیلی قدیمی مثل IE 6 و قدیمی تر پشتیبانی نشه.
نمونه تفاوت لود شدن فایل های jpg در مرورگر ها با روش های ذخیره سازی Baseline و Progressive رو می تونید در تصاویر زیر ببینید:

http://s9.picofile.com/file/8303155284/jpg_baseline_vs_optimized_1.jpg



http://s9.picofile.com/file/8303155318/jpg_baseline_vs_optimized_2.jpg

راستی تو بخش Save for Web فتوشاپ برای کمی کاهش حجم بیشتر می تونید بخش Metadata هم که به صورت پیش فرض حاوی Copyright and Contact Info هستش که تو فایل jpg. ذخیره میشه رو غیرفعال کنید.

همچنین برای فایل های هم jpg. و هم png. می تونید از سایت عالی https://tinypng.com هم استفاده کنید نکته ای که هست این سایت خروجی jpg. هم برخلاف اسمش داره و حتی دامنه tinyjpg.com هم داره و تازه خروجی jpg. کم حجم تر از Save for Web فتوشاپ داره و ظاهراً تا اون جایی که یکی دو بار قدیم تست کردم به نظرم مشابه حالت Progressive هم سیو میکنه.

[Nomix]

سلام


اتفاقا من هم مدتی پیش سایت با این https://gtmetrix.com چک کردم دیدم سرعت لود و حجم مصرفی بالاست
و بیشتر عکسای سایت کم حجم کردم

همون طور که خودتون و دوستان دیگر گفتند ، با فتوشاپ save for web استفاده کردم
و با نرم افزار https://soft98.ir/software/pic-tools/16732-Caesium.html هم مجدد فشرده کردم

بهترین راه همین بود ، خیلی هم حجم بیاد پایین کیفیت خراب میشه

فرمت فایل هم jpg بزارید

[سیدرضا بازیار]

من تصاویرم رو میدم به این سایت
https://tinypng.com/

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

به همین دلیل سایتم با روزانه بیش از ۱۰هزار بازدید کننده، ۱۰۰گیگ پهنای باند هم مصرف نداره و حجم کل سایتم ۲ گیگ هم نیست