วิธีลดขนาดรูปภาพโดยไม่สูญเสียคุณภาพที่มองเห็นได้

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

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

ความละเอียด vs ขนาดไฟล์: ความแตกต่างสำคัญ

หลายคนสับสนความละเอียดรูปกับขนาดไฟล์ มันเกี่ยวข้องกันแต่เป็นคนละเรื่อง

ความละเอียด คือจำนวนพิกเซลในรูป วัดเป็นกว้าง x สูง รูป 4000 x 3000 พิกเซลมี 12 ล้านพิกเซล (12 เมกะพิกเซล) ความละเอียดกำหนดว่ารูปแสดงได้ใหญ่แค่ไหนโดยยังคมชัด

ขนาดไฟล์ คือจำนวนไบต์ที่รูปใช้บนดิสก์ ขึ้นอยู่กับความละเอียด แต่ยังขึ้นกับรูปแบบ ระดับการบีบอัด และเนื้อหาของรูป

ทำไมความแตกต่างนี้สำคัญ: รูป 4000 x 3000 ที่แสดงที่ 800 x 600 บนเว็บไซต์กำลังสูญเสียพิกเซลกว่า 90% เบราว์เซอร์ต้องดาวน์โหลดพิกเซล 12 ล้านทั้งหมด แล้วทิ้งส่วนใหญ่เพื่อแสดงรูปขนาดเล็กลง การปรับขนาดรูปให้ตรงมิติที่แสดงจริงก่อนอัปโหลดสามารถลดขนาดไฟล์ได้ 80% หรือมากกว่า โดยไม่มีความแตกต่างที่มองเห็นได้เลย

ทำความเข้าใจรูปแบบรูปภาพ

รูปแบบที่คุณเลือกมีผลกระทบมหาศาลต่อขนาดไฟล์

JPG (JPEG)

มาตรฐานสากลสำหรับภาพถ่าย JPG ใช้การบีบอัดแบบสูญเสียข้อมูล หมายความว่าทิ้งข้อมูลรูปบางส่วนที่ตามนุษย์ไม่น่าจะสังเกตเห็น ที่คุณภาพ 80-85% รูป JPG ดูเหมือนต้นฉบับแต่ขนาดเล็กลงมาก

ดีที่สุดสำหรับ: ภาพถ่าย รูปที่มี gradient รูปสมจริง

PNG

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

ดีที่สุดสำหรับ: โลโก้ ภาพหน้าจอ กราฟิกที่มีข้อความ รูปที่ต้องการพื้นโปร่งใส

WebP

พัฒนาโดย Google WebP มีทั้งการบีบอัดแบบสูญเสียและไม่สูญเสียข้อมูล สร้างไฟล์เล็กกว่า JPG 25-35% ที่คุณภาพเทียบเท่าและรองรับพื้นโปร่งใส (ต่างจาก JPG) เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ WebP

ดีที่สุดสำหรับ: รูปเว็บทุกประเภท รูปแบบอเนกประสงค์ที่ดีที่สุดสำหรับเว็บในปัจจุบัน

การบีบอัดรูปทำงานอย่างไร

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

โดยเฉพาะ การบีบอัดแบบสูญเสียข้อมูลใช้ประโยชน์จาก:

• ความไวต่อสี ตามนุษย์ไวต่อการเปลี่ยนแปลงความสว่างมากกว่าการเปลี่ยนแปลงสี การบีบอัดลดความแม่นยำสีอย่างรุนแรงกว่า
• รายละเอียดความถี่สูง พื้นผิวละเอียดและ gradient ที่ละเอียดอ่อนสามารถทำให้ง่ายลงโดยไม่มีผลที่สังเกตได้
• ความซ้ำซ้อน พื้นที่ที่มีสีคล้ายกัน (ท้องฟ้าสีน้ำเงิน ผนังสีขาว) สามารถแทนได้อย่างมีประสิทธิภาพมากขึ้น

เคล็ดลับคือหาระดับบีบอัดที่เหมาะสม บีบอัดน้อยเกินไปสิ้นเปลือง bandwidth บีบอัดมากเกินไปทำให้เกิด artifact ที่มองเห็นได้: เบลอ แถบสี และบริเวณเป็นบล็อก

กฎปฏิบัติสำหรับกรณีใช้งานต่างๆ

สำหรับเว็บไซต์

• ความกว้างสูงสุด: 1920 พิกเซลสำหรับ hero image เต็มความกว้าง, 800-1200 พิกเซลสำหรับรูปเนื้อหา
• รูปแบบ: WebP พร้อม JPG สำรอง
• คุณภาพ: 75-85%
• ขนาดเป้าหมาย: ไม่เกิน 200 KB ต่อรูป, ไม่เกิน 100 KB สำหรับ thumbnail

สำหรับไฟล์แนบอีเมล

• ความกว้างสูงสุด: 1200-1600 พิกเซล
• รูปแบบ: JPG (รองรับทุกที่)
• คุณภาพ: 80-85%
• ขนาดเป้าหมาย: ไม่เกิน 500 KB ต่อรูป, ไฟล์แนบทั้งหมดไม่เกิน 10 MB

สำหรับโซเชียลมีเดีย

แต่ละแพลตฟอร์มมีขนาดที่เหมาะสมของตัวเอง แต่กฎทั่วไป:

• Instagram: 1080 x 1080 (สี่เหลี่ยม), 1080 x 1350 (แนวตั้ง)
• Facebook: 1200 x 630 สำหรับ link preview
• LinkedIn: 1200 x 627
• รูปแบบ: JPG หรือ PNG
• คุณภาพ: 85-90% (แพลตฟอร์มจะบีบอัดรูปอีกครั้ง ดังนั้นเริ่มด้วยคุณภาพสูงกว่านิดฉลาดกว่า)

ข้อผิดพลาดที่พบบ่อยที่สุด

1. อัปโหลดไฟล์ต้นฉบับจากกล้อง

รูปจากสมาร์ทโฟนสมัยใหม่มีขนาด 3-8 MB ไฟล์ raw จาก DSLR อาจมีขนาด 25-50 MB การอัปโหลดโดยตรงไปยังเว็บไซต์เป็นสาเหตุที่พบบ่อยที่สุดของหน้าเว็บที่โหลดช้า

2. ใช้ PNG สำหรับภาพถ่าย

PNG เป็นรูปแบบที่ผิดสำหรับภาพถ่าย รูปที่บันทึกเป็น PNG อาจใหญ่กว่ารูปเดียวกันที่บันทึกเป็น JPG ที่คุณภาพ 85% ถึง 5-10 เท่า โดยไม่มีความแตกต่างที่มองเห็นได้

3. ไม่ปรับขนาดก่อนบีบอัด

การบีบอัดรูปกว้าง 4000 พิกเซลให้เหลือ 200 KB ไม่มีประสิทธิภาพเท่าการปรับขนาดเป็น 1200 พิกเซลก่อนแล้วค่อยบีบอัด ปรับขนาดก่อน บีบอัดทีหลัง

4. บีบอัดหลายครั้ง

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

ผลกระทบของการปรับแต่งรูปภาพ

การปรับแต่งรูปภาพไม่ใช่แค่เรื่องความสะดวก สำหรับเว็บไซต์ มันส่งผลโดยตรงต่อ:

• ความเร็วโหลดหน้า หน้าที่เร็วกว่าอันดับสูงกว่าในผลค้นหา Google
• ประสบการณ์ผู้ใช้ 53% ของผู้ใช้มือถือออกจากหน้าที่โหลดนานกว่า 3 วินาที
• ค่า bandwidth สำหรับเว็บที่มีทราฟฟิกสูง การปรับแต่งรูปภาพประหยัดค่าโฮสติ้งได้มาก
• การเข้าถึง ผู้ใช้ที่เชื่อมต่อช้าหรือมีแผนข้อมูลจำกัดได้ประโยชน์มหาศาล

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