บีบอัดรูปไม่เสียคุณภาพ: เทคนิคและวิธีปฏิบัติที่ดีที่สุด
การบีบอัดอาจประหยัดมาก น้อย หรือแทบไม่เลย ขึ้นกับต้นฉบับ ฟอร์แมต ตัวเข้ารหัส และค่า เป้าหมายที่มีประโยชน์ไม่ใช่เปอร์เซ็นต์ที่สัญญา แต่คือผลลัพธ์เล็กที่สุดที่ยังเหมาะกับงาน ต่อไปนี้คือวิธีหาจุดนั้นตามฟอร์แมต
"ไม่เสียคุณภาพ" หมายความว่าอย่างไรจริงๆ
การบีบอัดแบบไม่สูญเสียแทนข้อมูลพิกเซลอย่างมีประสิทธิภาพขึ้นเพื่อให้ตัวถอดรหัสคืนค่าเดิม ข้อมูลกำกับและโครงสร้างไฟล์ยังเปลี่ยนได้ การบีบอัดแบบสูญเสียทิ้งข้อมูลภาพเพื่อลดขนาดเพิ่ม และการยอมรับขึ้นกับเนื้อหาและการใช้
“ไม่เสียคุณภาพ” มักหมายถึงการเปลี่ยนแบบสูญเสียไม่รบกวนในบริบทการดูเฉพาะ ตัวชี้วัดอย่าง SSIM ช่วยเปรียบเทียบ แต่คะแนนเดียวไม่พิสูจน์ว่าทุกคนแยกไม่ออก ตัวอักษร ใบหน้า ไล่สี การบันทึกซ้ำ ความหนาแน่นจอ และซูมอาจเผยข้อบกพร่องต่างกัน
JPEG: หาจุดคุณภาพที่เหมาะกับต้นฉบับ
JPEG ใช้แพร่หลายในการส่งภาพถ่าย ตัวเข้ารหัสจำนวนมากมีสเกลคุณภาพ แต่ปลายสเกล ค่าเริ่มต้น การสุ่มสี ตาราง quantization และการปรับเหมาะต่างกัน แม้ค่า 100 โดยทั่วไปยังเป็นการเข้ารหัส JPEG ไม่ใช่ “ไม่บีบอัด” ให้เปรียบเทียบผลแทนการมองตัวเลขเป็นเปอร์เซ็นต์คุณภาพต้นฉบับ
ค่าที่แนะนำ:
- คุณภาพ 80–85 — ช่วงเริ่มระมัดระวังสำหรับภาพหลัก พอร์ตโฟลิโอ และภาพสินค้า ตรวจพื้นผิวละเอียด ตัวอักษร และขอบ
- คุณภาพ 75–80 — ช่วงเริ่มทั่วไปสำหรับภาพเนื้อหาและภาพย่อเมื่อต้องการไฟล์เล็ก เปรียบเทียบที่ขนาดแสดงจริง
- คุณภาพ 60–70 — ช่วงแรงขึ้นสำหรับภาพตัวอย่างเล็กหรือไฟล์แนบที่ยอมรับข้อบกพร่องได้
การใช้ตัวเข้ารหัสต่างกันอาจสร้างขนาดและข้อบกพร่องต่างกันที่ค่าชื่อเดียวกัน ใช้ตัวบีบอัด JPEG ของ Vizuaสร้างตัวเลือก แล้วเทียบพื้นผิว ตัวอักษร ไล่สี ขอบ สี และขนาดกับต้นฉบับที่ดีที่สุด
PNG: Lossless เป็นค่าตั้งต้น Lossy เลือกได้
การบีบ PNG มาตรฐานไม่สูญเสียสำหรับพิกเซลที่ถอดรหัส แม้ข้อมูลกำกับหรือ chunk เสริมยังเปลี่ยนได้ เหมาะกับภาพหน้าจอ โลโก้ ไอคอน และกราฟิกขอบคมหรือโปร่งใส การประหยัดขึ้นกับต้นฉบับมาก PNG ที่ปรับแล้วอาจแทบไม่เล็กลง
การลดพาเลตเปลี่ยน PNG สีจริงเป็นภาพดัชนีที่มีรายการสีไม่เกิน 256 รายการได้ การทำงานนี้สูญเสียแม้ผลดูยอมรับได้ เหมาะกับภาพประกอบสีเรียบและภาพหน้าจอบางชนิด แต่ต้องตรวจไล่สี การลบรอยหยัก และขอบกึ่งโปร่งใส
ตัวบีบอัด PNG ของ Vizuaเข้ารหัสพิกเซล raster ใหม่แบบไม่สูญเสีย การถอดรหัสผ่านเบราว์เซอร์อาจลบหรือเปลี่ยนข้อมูลกำกับ โปรไฟล์สี chunk เสริม หรือค่า RGB ที่ซ่อนใต้ความโปร่งใสเต็ม อย่าเรียกช่องเหล่านั้นว่า “ไม่จำเป็น” โดยไม่ตรวจเวิร์กโฟลว์
WebP: แบบสูญเสีย ไม่สูญเสีย โปร่งใส และแอนิเมชัน
WebP รองรับการบีบแบบสูญเสียและไม่สูญเสีย ความโปร่งใส และแอนิเมชัน ผล WebP อาจเล็กกว่าต้นฉบับ JPEG หรือ PNG แต่การเทียบมีความหมายเมื่อควบคุมมิติ คุณภาพมองเห็น ข้อมูลกำกับ ความพยายามเข้ารหัส และประวัติต้นฉบับ
ค่าที่แนะนำ:
- คุณภาพแบบสูญเสีย 75–80 — ช่วงเริ่มสำหรับภาพถ่าย ไม่ใช่ความเท่ากับค่า JPEG ใด ให้เทียบผล
- โหมดไม่สูญเสีย — เหมาะกับกราฟิก โลโก้ และภาพหน้าจอที่ต้องรักษาพิกเซล ไม่รับประกันว่าจะชนะ PNG ที่ปรับแล้ว
WebP ทำงานในเบราว์เซอร์หลักปัจจุบัน แต่ผู้ชมอาจมีเบราว์เซอร์เก่า webview ฝัง ตัวอ่านอีเมล หรือซอฟต์แวร์ผลิตที่รองรับต่างกัน ตรวจ analytics และข้อกำหนดส่ง ตัวบีบอัด WebP ของ Vizuaให้คุณภาพแบบสูญเสียปรับได้สำหรับ WebP เดิม แต่ไม่มีสวิตช์โหมดไม่สูญเสีย
AVIF: บีบอัดได้มากที่สุดสำหรับงานสมัยใหม่
AVIF อิงการเข้ารหัสภาพ AV1 และรองรับ HDR ช่วงสีกว้าง และความโปร่งใส อาจเหนือ JPEG หรือ WebP สำหรับต้นฉบับและค่าบางแบบ แต่ไม่มีการประหยัดตายตัวสำหรับทุกภาพหรือตัวเข้ารหัส
การเข้ารหัสอาจใช้การคำนวณมากขึ้น และความเข้ากันได้นอกเบราว์เซอร์ปัจจุบันไม่สม่ำเสมอ AVIF เป็นตัวเลือกเมื่อ pipeline เว็บทดสอบและให้ฟอร์แมตสำรองได้ สำหรับแชร์ตรงให้เลือกฟอร์แมตที่ผู้รับเปิดได้
คุณสร้างตัวเลือก AVIFด้วย Vizua ในเบราว์เซอร์ที่รองรับได้ ไฟล์ที่เลือกประมวลผลในเบราว์เซอร์และไม่ส่งไปเซิร์ฟเวอร์ประมวลผลภาพของเรา โค้ดและบริการไซต์ที่จำเป็นยังอาจใช้เครือข่าย และโปรไฟล์ตัวเข้ารหัสที่ให้มาอาจไม่ครอบคลุมทุกฟังก์ชัน AVIF
ตารางสรุป: ค่าที่เหมาะสมแยกตามฟอร์แมต
| ฟอร์แมต | ค่าตั้งต้น | การประหยัดที่คาด | การใช้ที่เหมาะ |
|---|---|---|---|
| JPEG | 75-85 | ขึ้นกับต้นฉบับและค่า | รูปถ่าย รูปสินค้า แบนเนอร์ |
| PNG (Lossless) | บีบอัดสูงสุด | ขึ้นกับต้นฉบับ อาจน้อย | Screenshot โลโก้ กราฟิกที่มีข้อความ |
| PNG (8-bit) | 256 สี | มักมากสำหรับกราฟิกที่เหมาะ | ภาพประกอบ กราฟิกเรียบง่าย |
| WebP (Lossy) | 75-80 | ขึ้นกับต้นฉบับและค่า | ภาพถ่ายและกราฟิกหลังตรวจด้วยตา |
| AVIF | 60-75 | ขึ้นกับต้นฉบับและค่า | pipeline ส่งสมัยใหม่ที่ทดสอบ พร้อมสำรองเมื่อจำเป็น |
เทคนิคขั้นสูงเพื่อประหยัดพื้นที่สูงสุด
- สร้างมิติ responsive ก่อนบีบครั้งสุดท้าย ต้นฉบับกล้องมักใหญ่เกินช่องเล็ก แต่จอหนาแน่นและ breakpoint กว้างอาจต้องตัวเลือกใหญ่ ใช้
srcsetและชุดที่เหมาะกับเลย์เอาต์แทนความกว้างเดียว - ตรวจข้อมูลกำกับ EXIF, IPTC, ภาพย่อ และโปรไฟล์สีอาจเพิ่ม byte และเปิดเผยข้อมูล เก็บช่องที่งานต้องใช้และลบช่องอ่อนไหวหรือไม่จำเป็น
- ใช้ฟอร์แมตให้ตรงงาน JPEG หรือ WebP มักเหมาะภาพถ่าย PNG เหมาะกราฟิกขอบคม ทดสอบ AVIF เมื่อเส้นทางส่งรองรับ
- ประมวลผลเป็นชุดเมื่อเครื่องมือรองรับ เก็บต้นฉบับและตรวจผลตัวแทนก่อนใช้ค่าหนึ่งกับทั้งชุด
- เปรียบเทียบก่อนและหลัง ตรวจที่ขนาดจริงและซูมสูง ทดสอบหน้าจอสำคัญ และเก็บต้นฉบับ “ดีพอ” ขึ้นกับจุดประสงค์และผู้ชม
คำถามที่พบบ่อย
“การบีบอัดแบบไม่สูญเสีย” หมายถึงอะไรจริง ๆ?
การบีบอัดภาพแบบไม่สูญเสียแทนข้อมูลพิกเซลอย่างมีประสิทธิภาพขึ้น เพื่อให้การถอดรหัสคืนค่าพิกเซลเดิม แต่เครื่องมือยังอาจลบหรือเปลี่ยนข้อมูลกำกับ โปรไฟล์ chunk เสริม หรือ byte ของไฟล์ ดังนั้น “ไม่สูญเสีย” ไม่ได้หมายความว่าไฟล์ทั้งหมดเหมือนกันทุกบิต PNG และ WebP แบบไม่สูญเสียรองรับการเข้ารหัสพิกเซลแบบไม่สูญเสีย
ค่า JPEG ที่ดีที่สุดสำหรับเว็บไซต์คือเท่าไร?
ไม่มีค่าสากล เพราะตัวเข้ารหัสใช้สเกลต่างกันและภาพตอบสนองต่างกัน ช่วงประมาณ 75–85 เป็นจุดเริ่มต้นที่ใช้ได้กับภาพเว็บจำนวนมาก: ส่งออกภาพตัวแทน ตรวจที่ขนาดแสดงจริงและซูมสูงขึ้น แล้วปรับ เก็บต้นฉบับไว้แทนการบีบ JPEG ซ้ำหลายครั้ง
WebP บีบอัดดีกว่า JPEG หรือไม่?
สำหรับภาพบางภาพ WebP อาจเล็กกว่า JPEG ที่คุณภาพมองเห็นใกล้เคียงกัน แต่ผลขึ้นกับตัวเข้ารหัส ค่า และภาพ WebP ยังรองรับความโปร่งใสและแอนิเมชัน ตรวจเบราว์เซอร์จากทราฟฟิกของคุณและให้ฟอร์แมตสำรองเมื่อจำเป็น
ควรแปลงภาพทั้งหมดเป็น AVIF หรือไม่?
ไม่ควรทำโดยอัตโนมัติ AVIF อาจมีประสิทธิภาพ แต่ต้นทุนเข้ารหัส การรองรับของตัวถอดรหัส ความเข้ากันได้ซอฟต์แวร์ ชนิดต้นฉบับ และการสูญเสียจากการเข้ารหัสซ้ำล้วนสำคัญ เหมาะกับ pipeline เว็บที่สร้างและทดสอบหลายแบบพร้อมให้ WebP หรือ JPEG สำรอง สำหรับการส่งตรงให้ใช้ฟอร์แมตที่ซอฟต์แวร์ผู้รับเปิดได้
พร้อมบีบอัดรูปของคุณแล้วหรือยัง?
ไม่ต้องมีบัญชี ไฟล์ที่เลือกประมวลผลในเบราว์เซอร์และไม่ส่งไปเซิร์ฟเวอร์ประมวลผลภาพของเรา