ทำไมภาพถึงดูเบลอหลังจากบีบอัด

สิ่งที่เปลี่ยนไปเมื่อคุณบีบอัดภาพ

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

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

วิธีการระบุสาเหตุ

1. เปิดไฟล์ต้นฉบับและไฟล์ที่ถูกบีบอัดในระดับการซูมเดียวกัน
2. เปรียบเทียบพื้นที่ที่มีข้อความ ขอบเฉียง เงานุ่ม และรายละเอียดเล็ก ๆ
3. ตรวจสอบขนาดพิกเซลของไฟล์ทั้งสอง
4. จินตนาการผลลัพธ์ที่ขนาดสุดท้าย ไม่ใช่แค่ภาพขนาดย่อ
5. ถ้าต้นฉบับก็เบลอ การบีบอัดไม่สามารถกู้รายละเอียดที่ไม่เคยมีอยู่ได้

สัญญาณของการบีบอัดที่รุนแรงเกินไป

• บล็อกสี่เหลี่ยม: มักสังเกตเห็นได้บนท้องฟ้า ผนัง และความชัน
• ฮาโล: ปรากฏรอบตัวอักษร วัตถุสีเข้ม หรือเส้นที่มีความเปรียบต่างสูง
• พื้นผิวแบบหนากัน: เส้นผม, หญ้า และเนื้อผ้าเสียการแยก
• สีเป็นเส้น: การไล่ระดับสีอ่อนจะกลายเป็นลายเส้นที่มองเห็นได้

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

คุณภาพที่แนะนำตามเนื้อหา

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

หากภาพที่จับต้องรักษาขอบให้ชัดเจน ลองใช้ PNG สำหรับภาพถ่าย JPG หรือ WebP มักจะให้ความสมดุลที่เหมาะสมกว่า คู่มือของ JPG, PNG และ WebP อธิบายเมื่อแต่ละรูปแบบเหมาะสม

ความละเอียดก็อาจเป็นปัญหาได้เช่นกัน

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

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

วิธีแก้ภาพที่เบลอ

1. กู้คืนเวอร์ชันต้นฉบับหรือสำเนาที่ความละเอียดสูงกว่า
2. เลือกรูปแบบตามเนื้อหา: JPG หรือ WebP สําหรับรูปภาพ; PNG สําหรับความโปร่งใส ข้อความละเอียด หรือกราฟิกที่เรียบง่าย
3. บีบอัดด้วยระดับที่นุ่มกว่าและคงขนาดหากมีขนาดที่เหมาะสมแล้ว
4. ตรวจสอบผลลัพธ์ที่ 100% และภายในดีไซน์สุดท้ายด้วย
5. ดาวน์โหลดเมื่อการประหยัดน้ำหนักคุ้มกับความแตกต่างทางสายตา

คำถามที่พบบ่อย

ฉันสามารถคืนความคมชัดให้ภาพที่บีบอัดแล้วได้หรือไม่?

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

ทำไมภาพขนาดเล็กถึงดูดี แต่ภาพใหญ่ไม่ดี

เมื่อลดขนาด ข้อบกพร่องจะใช้พื้นที่น้อยลงและยากต่อการสังเกต ตรวจสอบรายละเอียดสำคัญด้วยการซูมและเช็คขนาดจริงของการเผยแพร่

ไฟล์ที่เล็กที่สุดดีกว่าตลอดเวลาหรือไม่?

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