หน้าจออาจดูเหมือนเดิมแต่ไฟล์เปลี่ยนไป
ภาพหน้าจอคือภาพราสเตอร์ ไม่ใช่อินเทอร์เฟซที่กำลังทำงาน จอความหนาแน่นสูงอาจบันทึกพิกเซลได้มากขึ้นในหน้าตาเดียวกัน ซึ่งช่วยให้ข้อความคมชัด แต่ผู้รับที่ดูภาพตัวอย่างเล็กอาจไม่จำเป็นต้องได้ภาพเต็มความละเอียด
คำอธิบาย PNG ของเราพูดถึงภาพหน้าจอทั่วไป ที่นี่ใช้หน้าตาที่ออกแบบเฉพาะการทดลอง ไม่มีข้อมูลบัญชีหรือแบรนด์บุคคลอื่น เพื่อแยกผลดังกล่าว คู่มือการอัปโหลด อธิบายสิ่งที่ควรตรวจเมื่อปลายทางปฏิเสธไฟล์
ควบคุมการจับภาพแล้วบีบอัดจริง
ภาพเมื่อ 2026-10-29 ใช้อินเทอร์เฟซภายในเครื่องเดียวกันที่ความหนาแน่น 1× และ 2× เมื่อเพิ่มทั้งความกว้างและสูงเป็นสองเท่า จำนวนพิกเซลจะเป็น 4 เท่า แต่ไม่ได้ทำให้ขนาดไฟล์เพิ่มตามอัตราคงที่ จากนั้นใช้ Bitinz ระดับสมดุลกับภาพทั้งคู่
เราเก็บผลการบีบอัด PNG และผลการแปลง WebP อย่างละไฟล์สำหรับภาพหน้าจอแต่ละภาพ โดยรันแต่ละการตั้งค่า 3 ครั้งเพื่อตรวจสอบว่าไฟล์ผลลัพธ์เหมือนกันทุกประการ การทดลองมีไฟล์ต้นฉบับ ค่าแฮช และบันทึกผลลัพธ์ประกอบ ส่วนวิธีการโดยรวมอธิบายไว้ในนโยบายบรรณาธิการ
แสดงความหนาแน่นและรูปแบบแยกกัน
เทียบ PNG กับ WebP ที่ความหนาแน่นเดียวกันก่อน แล้วเทียบต้นฉบับสองภาพเพื่อดูต้นทุนจากจำนวนพิกเซลที่มากขึ้นแยกต่างหาก
| ภาพ | พิกเซล | รูปแบบผลลัพธ์ | ระดับ | ก่อน | หลัง | ลดลง |
|---|---|---|---|---|---|---|
interface-1x.png | 800 × 500 px | PNG | สมดุล | 42.8 KB | 13.3 KB | 68.8% |
interface-1x.png | 800 × 500 px | WebP | สมดุล | 42.8 KB | 11.1 KB | 74.1% |
interface-2x.png | 1600 × 1000 px | PNG | สมดุล | 101.5 KB | 30.6 KB | 69.9% |
interface-2x.png | 1600 × 1000 px | WebP | สมดุล | 101.5 KB | 27.6 KB | 72.8% |
Bitinz · 1 KB เท่ากับ 1000 ไบต์
ข้อความคือบริเวณที่ควรตรวจ
รายละเอียด PNG ต้นฉบับ
รายละเอียด PNG ที่บีบอัด
ข้อความเล็ก เส้นบาง และแผงสีอ่อนควรได้รับความใส่ใจมากกว่าพื้นว่างขนาดใหญ่ ตรวจภาพตัดที่ขนาดเต็ม แล้วดูภาพหน้าจอในความกว้างที่ผู้อ่านจะเห็นจริง
WebP ที่เล็กลงมีประโยชน์เมื่อปลายทางยอมรับและตัวอักษรยังชัด หากจำเป็นต้องใช้ PNG ให้เทียบกับ PNG ที่บีบอัดโดยตรง ควรใช้ข้อความจริงบนหน้าเว็บเมื่อไม่จำเป็นต้องแสดงภาพหน้าจอ
เลือกสิ่งที่ผู้อ่านจำเป็นต้องเห็น
ก่อนอัปโหลด ให้ตัดบริเวณรอบนอกที่ไม่เกี่ยวข้องในโปรแกรมแก้ไขภาพ นี่คือการเลือกเนื้อหาแยกจากการบีบอัด ช่วยลดทั้งสิ่งรบกวนและพิกเซล เก็บบริบทที่จำเป็นต่อคำแนะนำ เช่น ปุ่มที่เกี่ยวข้องและป้ายใกล้เคียง
หน้าเอกสารอาจต้องใช้ภาพความหนาแน่นสูงที่ขยายดูได้ ส่วนภาพตัวอย่างแชตอาจต้องการเพียงจุดสำคัญ ทดสอบปลายทางจริงแทนการย่อทุกภาพหน้าจอให้ขนาดเท่ากัน
ใช้ เครื่องมือบีบอัด PNG เมื่อต้องส่ง PNG หรือลอง PNG เป็น WebP สำหรับเว็บของคุณ เทียบทั้งคู่กับต้นฉบับ รูปแบบควรขึ้นกับความอ่านง่ายและการรองรับของปลายทาง
เตรียมภาพหน้าจอให้อ่านง่าย
- จับภาพเฉพาะอินเทอร์เฟซและบริบทที่ผู้อ่านต้องการ
- เก็บ PNG ต้นฉบับแล้วบีบอัดสำเนา
- เทียบตัวอักษรและเส้นบางทั้งขนาดเต็มและความกว้างที่จะใช้งาน
- ใช้ไฟล์ที่เบากว่าและยอมรับได้ในรูปแบบที่ปลายทางรองรับ
คำถามที่พบบ่อย
- ภาพหน้าจอ 2× มีพิกเซลเป็นสองเท่าหรือไม่
- หากเพิ่มทั้งกว้างและสูงเป็นสองเท่า ภาพจะมีพิกเซล 4 เท่า อัตราส่วนขนาดไฟล์ยังขึ้นกับเนื้อหาและรูปแบบภาพด้วย
- ควรแปลงภาพหน้าจอเป็น WebP เสมอหรือไม่
- ใช้ WebP เมื่อปลายทางยอมรับและข้อความยังชัด เก็บ PNG เมื่อปลายทางกำหนดหรือให้ผลที่เหมาะกับภาพนั้นมากกว่า
- Bitinz ตัดหรือเปลี่ยนขนาดภาพหน้าจอหรือไม่
- การตัดและเปลี่ยนขนาดเป็นขั้นตอนเตรียมในโปรแกรมแก้ไขภาพ Bitinz ประมวลผลที่ขนาดซึ่งคุณอัปโหลดมา