วิธีปรับขนาดและบีบอัดรูปภาพขนาดใหญ่จำนวนมาก (และปรับให้เหมาะสม)

คุณต้องการทราบวิธีการปรับขนาดและบีบอัดรูปภาพขนาดใหญ่จำนวนมากโดยไม่สูญเสียคุณภาพหรือไม่? คุณอยู่ในหน้าขวา มาดูกันว่าคุณจะประหยัดเวลาได้อย่างไรในขณะที่ปรับแต่งรูปภาพและเพิ่มประสิทธิภาพเว็บไซต์ของคุณ

การบีบอัดภาพเป็นกระบวนการลดน้ำหนักของภาพโดยการลดขนาดภาพโดยไม่ลดทอนคุณภาพมากเกินไป ในบทความนี้ คุณจะได้เรียนรู้ว่าเหตุใดการปรับขนาดและบีบอัดภาพจึงมีความสำคัญ และวิธีการทำได้อย่างง่ายดายโดยไม่สูญเสียคุณภาพ

มาดำน้ำกันเถอะ!

ทำไมต้องบีบอัดรูปภาพขนาดใหญ่ให้เล็กลง

หนึ่งในแนวโน้มที่ใหญ่ที่สุดในการออกแบบเว็บในขณะนี้คือการมีรูปภาพขนาดใหญ่และสวยงามบนเว็บไซต์ของคุณ แต่เมื่อพูดถึงประสิทธิภาพของเว็บ รูปภาพขนาดใหญ่เหล่านี้มักเป็นสาเหตุหลักที่ทำให้ไซต์ของคุณช้าลง หากนำไปใช้อย่างไม่ถูกต้อง รูปภาพเหล่านี้มักจะมีไฟล์ขนาดใหญ่ส่งผลให้มีคำขอ HTTP สูงขึ้นสำหรับเบราว์เซอร์ของคุณ

ประโยชน์บางประการที่คุณจะได้รับเมื่อบีบอัดรูปภาพขนาดใหญ่:

• รูปภาพที่บีบอัดจะเพิ่มความเร็ว ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด ตามที่ Google กล่าว Google PageSpeed ​​​​Insights แนะนำให้ปรับขนาดรูปภาพอย่างเหมาะสม (โดยเฉพาะสำหรับอุปกรณ์เคลื่อนที่) การเลื่อนรูปภาพนอกหน้าจอ (โดยใช้การโหลดแบบ Lazy Loading) และใช้รูปแบบรุ่นถัดไป เช่น WebP หากคุณต้องการปรับปรุงเวลาในการโหลด

• เมื่อปรับขนาดและบีบอัดรูปภาพ คุณสามารถลดขนาดหน้าและเพิ่มตัวชี้วัดประสิทธิภาพที่กำหนดโดย Google รวมถึง Core Web Vitals การเพิ่มประสิทธิภาพภาพของคุณยังหมายถึงการลดเวลาที่ผู้เข้าชมต้องรอก่อนที่จะโต้ตอบกับเว็บไซต์ของคุณ (ตัววัด Time To Interactive) และความเร็วในการรับรู้ที่ดีขึ้น (ตัวชี้วัด First Contentful Paint และ Largest Contentful Paint)

• ขนาดไฟล์ภาพที่เล็กลงใช้แบนด์วิดท์น้อยกว่า เครือข่ายและเบราว์เซอร์ของคุณจะประทับใจสิ่งนี้อย่างแน่นอน! การปรับรูปภาพให้เหมาะสมมักจะช่วยประหยัดไบต์ได้มากที่สุดและปรับปรุงประสิทธิภาพสำหรับเว็บไซต์ของคุณ: ยิ่งเบราว์เซอร์ต้องดาวน์โหลดจำนวนไบต์น้อยลง การแข่งขันด้านแบนด์วิดท์น้อยลง - หมายถึงเวลาในการโหลดเร็วขึ้น

• คำขอ HTTP สำหรับรูปภาพ HD ขนาดใหญ่อาจส่งผลเสียต่อประสิทธิภาพการทำงาน ดังนั้นคุณจึงควรส่งคำขอ HTTP น้อยลงเพื่อเพิ่มความเร็วไซต์ WordPress ของคุณ

การบีบอัดภาพมีความจำเป็นเพื่อเพิ่มประสิทธิภาพ แต่ในทางกลับกัน คุณคงไม่อยากให้เว็บไซต์มีภาพเบลอใช่ไหม เป้าหมายคือการบรรลุผลลัพธ์ที่สมดุลระหว่างคุณภาพและการเพิ่มประสิทธิภาพดังในตัวอย่างด้านล่าง:

ไม่มีการบีบอัด JPEG – 400 KB	การบีบอัด (คุณภาพไม่เปลี่ยนแปลง) JPEG – 170 KB

นั่นนำเราไปสู่ส่วนถัดไป: คุณจะลดขนาดภาพโดยไม่สูญเสียคุณภาพได้อย่างไร?

วิธีปรับขนาดและบีบอัดรูปภาพจำนวนมาก (PNG และ JPEG)

สิ่งสำคัญสองประการที่ควรพิจารณาคือประเภทของการบีบอัดที่คุณต้องการใช้ (lossy vs lossless) และรูปแบบไฟล์ (PNG, JPEG, PDFs เป็นต้น) คุณสามารถดูด้านล่างว่ารูปแบบมีผลต่อขนาดภาพอย่างไร:

เพื่อให้ได้ประโยชน์สูงสุดจากภาพ PNG และ JPEG ของคุณ มีเครื่องมือมากมาย บางส่วนจะช่วยคุณทำงานทั้งหมดนี้แทนตัวคุณเอง (เช่น ปลั๊กอิน WordPress) ในขณะที่บางแอปอาจให้คุณดำเนินการเพิ่มประสิทธิภาพของคุณเองได้ (เช่น Photoshop)

ต่อไปนี้คือรายการเครื่องมือที่เราชื่นชอบซึ่งคุณสามารถใช้บีบอัดรูปภาพ JPEG หรือ PNG จำนวนมากได้ เราได้จำแนกออกเป็นสองประเภท:

• หมวดหมู่ #1 – เครื่องมือเว็บและซอฟต์แวร์การเพิ่มประสิทธิภาพรูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพ PNG และ JPEG ขนาดใหญ่ในกลุ่ม

• หมวดหมู่ #2 – ปลั๊กอิน WordPress เพื่อปรับขนาดและบีบอัดรูปภาพ PNG และ JPEG ขนาดใหญ่จำนวนมาก

มาเริ่มกันที่หมวดแรกกันเลย

หมวดหมู่ #1 – เครื่องมือเว็บและซอฟต์แวร์การเพิ่มประสิทธิภาพรูปภาพเพื่อเพิ่มประสิทธิภาพรูปภาพ PNG และ JPEG ขนาดใหญ่ในกลุ่ม

ต่อไปนี้คือรายการซอฟต์แวร์และเครื่องมือออนไลน์ที่คุณสามารถใช้ปรับขนาดและบีบอัดรูปภาพขนาดใหญ่หลายภาพได้:

• ภาพความสัมพันธ์ เพื่อบีบอัดภาพ PNG และ JPEG ของคุณเป็นชุด

1. ไปที่ ไฟล์ > งานแบทช์ใหม่

2. อัปโหลดรูปภาพทั้งหมดที่คุณต้องการบีบอัดเป็นกลุ่ม และเลือกรูปแบบที่เหมาะสมที่สุดตามความต้องการของคุณ:

3.กำหนดคุณภาพใหม่ (70 เป็นเลขดีมีคุณภาพ)

• ดูตัวอย่าง (บน Mac) – เพื่อปรับขนาดรูปภาพของคุณเป็นกลุ่ม ( แต่จะไม่บีบอัด รูปภาพ)

1. เปิดภาพทั้งหมดโดยใช้ Preview
2. เลือกทั้งหมด
3. ไปที่ เครื่องมือ > ขนาด และเลือกขนาดรูปภาพใหม่

งานเสร็จแล้ว! ขนาดผลลัพธ์จะเล็กลง

• Mass Image Compressor – เครื่องมือบีบอัดและแปลงอิมเมจแบบแบตช์แบบชี้แล้วยิงสำหรับการเพิ่มประสิทธิภาพเว็บไซต์

• Gimp – โปรแกรมแก้ไขรูปภาพยอดนิยมฟรีสำหรับ Mac และ Windows GIMP มาพร้อมกับโหมดแบทช์ที่เรียกว่าซึ่งช่วยให้คุณทำการประมวลผลภาพ PNG, JPEG และรูปแบบอื่น ๆ เช่น GIF หรือ PDF คุณจะต้องดาวน์โหลดและติดตั้งส่วนขยายฟรีที่เรียกว่า "Batch Image Manipulation Plugin (BIMP)" ขั้นตอนนั้นตรงไปตรงมาจริงๆ

• Photoshop – เพื่อปรับขนาดและบีบอัดภาพ PNG และ JPEG ของคุณ (ส่งผลต่อคุณภาพและค่อนข้างแพง)
  1. เปิด Adobe Photoshop เลือก File > Scripts > Image Processor
  2. คลิก เลือกโฟลเดอร์ เพื่อให้คุณสามารถเลือกโฟลเดอร์ที่มีภาพอยู่
  3. ปรับการตั้งค่าเพื่อลดขนาด
  4. เลือกการตั้งค่าระหว่าง 1 ถึง 12 ในฟิลด์คุณภาพ (ฉันขอแนะนำไม่ให้ต่ำกว่า 6)
  5. คลิก "เรียกใช้การดำเนินการ"

หมายเหตุ: Photoshop อาจเป็นช่วงการเรียนรู้ที่สูงชัน ดังนั้นหากคุณสนใจ เราได้ระบุ 10 ทางเลือกแทน Photoshop สำหรับการเพิ่มประสิทธิภาพภาพ

หากคุณต้องการประหยัดเวลา ไม่จำเป็นต้องจัดการกับการจัดรูปแบบและการบีบอัดทั้งหมดด้วยมือ โชคดีที่ ปลั๊กอินบางตัวทำงานนี้ให้คุณโดยอัตโนมัติ! นั่นนำเราไปสู่หมวดหมู่ที่สอง: ปลั๊กอิน WordPress

หมวดหมู่ #2 – ปลั๊กอิน WordPress เพื่อปรับขนาดและบีบอัดรูปภาพ PNG และ JPEG ขนาดใหญ่ในกลุ่ม

คุณสามารถใช้ปลั๊กอิน WordPress ตัวใดตัวหนึ่งด้านล่างเพื่อบีบอัดรูปภาพขนาดใหญ่จำนวนมาก กล่าวคือ:

• Imagify (ปลั๊กอินฟรีของเรา)
• Optimole
• บีบอัด JPEG & PNG (PNG จิ๋ว)
• EWWW
• ShortPixel
• reSmush.it

พวกเขาทั้งหมดเสนอการเพิ่มประสิทธิภาพเป็นกลุ่ม และส่วนใหญ่ยังแปลงรูปภาพของคุณเป็นรูปแบบ WebP ตามที่ Google แนะนำ สำหรับกรณีศึกษาของเรา เราจะใช้ Imagify และเน้นขั้นตอนที่คุณต้องปฏิบัติตามเพื่อปรับรูปภาพขนาดใหญ่ของคุณให้เหมาะสม

วิธีบีบอัดรูปภาพขนาดใหญ่โดยไม่สูญเสียคุณภาพด้วย Imagify

ด้วย Imagify คุณสามารถปรับขนาดและบีบอัดจำนวนมากโดยไม่ต้องออกจาก WordPress มาดูแดชบอร์ดของ Imagify กัน เพื่อที่คุณจะได้เห็นภาพของคุณลักษณะการเพิ่มประสิทธิภาพเป็นกลุ่มจากเมนู สื่อ > การเพิ่มประสิทธิภาพ เป็นกลุ่ม:

หลังจากเปิดใช้งานปลั๊กอิน Imagify เพียงเลือก ระดับการบีบอัดของ คุณและคลิกที่ปุ่ม " IMAGIF'EM ALL "

นั่นคือประเภทของการประหยัดที่คุณจะได้รับในขณะที่ใช้คุณลักษณะการเพิ่มประสิทธิภาพจำนวนมากของ Imagify: เกือบ 87%!

ตอนนี้ มาทำการแสดง "ก่อนและหลัง" กัน คุณจะได้เห็นว่าเหตุใดคุณจึงควรเพิ่มประสิทธิภาพภาพด้วย Imagify

การบีบอัดรูปภาพขนาดใหญ่จำนวนมาก: ตู้โชว์

ฉันจะเรียกใช้สองสถานการณ์ของการเพิ่มประสิทธิภาพเป็นกลุ่มสำหรับรูปภาพของฉันบนมือถือ:

• สถานการณ์ที่ 1 – ผลลัพธ์ด้านประสิทธิภาพด้วยรูปภาพ JPEG (ไม่มี Imagify)
• สถานการณ์ที่ 2 – ผลการเพิ่มประสิทธิภาพรูปภาพจำนวนมากด้วยรูปภาพ WebP และโหมดการเพิ่มประสิทธิภาพเชิงรุก (ด้วย Imagify)

ต่อไปนี้คือเครื่องมือและเมตริกที่ฉันจะพิจารณา:

เครื่องมือ:
Google PageSpeed ​​Insights และการทดสอบหน้าเว็บ

ตัวชี้วัด:

• ขนาดไฟล์ของแต่ละภาพ
• ระบายสีเนื้อหาที่ใหญ่ที่สุด
• ขนาดหน้า
• คำขอ HTTP
• เวลาในการโหลด

สถานการณ์ที่ 1 – ผลลัพธ์ด้านประสิทธิภาพด้วยรูปภาพ JPEG (ไม่มี Imagify)

1. 9 ภาพที่เสิร์ฟในรูปแบบ JPEG
2. รูปภาพไม่ได้รับการปรับให้เหมาะสม

ต่อไปนี้คือค่าสถานะการเพิ่มประสิทธิภาพรูปภาพที่ฉันได้รับหลังจากเรียกใช้การตรวจสอบ PageSpeed ​​Insights:

ด้านล่างมีรายละเอียดเนื้อหาของหน้าของฉัน รูปภาพมีหน้าที่ในการสร้าง 60% ของคำขอและ 81.5% ของไบต์ทั้งหมด:

สถานการณ์ที่ 2 – ผลการเพิ่มประสิทธิภาพรูปภาพจำนวนมากด้วยรูปภาพ WebP และโหมดการเพิ่มประสิทธิภาพเชิงรุก (ด้วย Imagify)

• 9 ภาพเดียวกันที่แปลงเป็นรูปแบบ WebP ด้วย Imagify
• รูปภาพที่ปรับให้เหมาะสมเป็นกลุ่มด้วย Imagify

มาเพิ่มประสิทธิภาพรูปภาพของเราเป็นกลุ่มและแปลงเป็น WebP โดยใช้ Imagify:

หลังจากคลิกไม่กี่ครั้ง Imagify จะบันทึกขนาดไฟล์ของเราโดยเฉลี่ย 55%:

ตัวชี้วัดประสิทธิภาพของเรายังอยู่ในสภาพที่ดีขึ้นอีกด้วย :

Imagify ยังแก้ปัญหาด้านประสิทธิภาพที่ตั้งค่าสถานะโดย PageSpeed ​​Insights :

เราเห็นผลในเชิงบวกเท่านั้นด้วยคุณลักษณะการเพิ่มประสิทธิภาพจำนวนมากของ Imagify:

• รูปภาพทั้งหมดของฉันถูกบีบอัด: มีขนาดที่เล็กกว่าและเราไม่ได้ประนีประนอมกับคุณภาพ
• My Core Web Vital (LCP) เป็นสีส้มด้วยคะแนน 3.6 วินาที แต่ด้วย Imagify มันย้ายไปที่โซนสีเขียวด้วย 1.6 วินาที
• เวลาในการโหลดหน้าของฉันลดลงจาก 3.7 วินาที เป็น 2.1 วินาที
• ขณะนี้มีเพียง 43% ของคำขอที่มาจากรูปภาพ (เป็น 60% ที่ไม่มี Imagify)
• รูปภาพครอบครอง 26.5% ของเนื้อหาทั้งหมดไบต์ (เทียบกับก่อนหน้านี้ 82%)

ห่อ

ปลั๊กอิน Imagify ช่วยให้เราปรับขนาดและบีบอัดรูปภาพขนาดใหญ่ได้อย่างรวดเร็วจากแดชบอร์ดของ WordPress โดยตรง เราใช้เวลาสองครั้งในการเพิ่มประสิทธิภาพภาพทั้งหมดของเราโดยอัตโนมัติ และช่วยประหยัดขนาดไฟล์ได้โดยเฉลี่ย 60%! นอกจากนี้ Imagify ยังสามารถแปลงรูปภาพ WordPress ของคุณเป็น WebP ซึ่งเป็นรูปแบบ Next-gen ที่ Google แนะนำ

อย่าให้ประสิทธิภาพของเว็บไซต์ที่ช้าทำให้คุณต้องเสีย Conversion เริ่มปรับแต่งภาพของคุณเป็นกลุ่มด้วย Imagify ฟรีวันนี้!