ตัวแปลงพิกเซล

ตัวแปลงพิกเซลคืออะไร?

ตัวแปลงพิกเซลแปลงค่าระหว่างพิกเซลดิจิทัลกับหน่วยความยาวในโลกจริง (มิลลิเมตร เซนติเมตร นิ้ว) ที่ค่า DPI ใดก็ได้ที่คุณเลือก พิกเซล CSS ใช้ค่ามาตรฐาน 96 DPI ตามค่าเริ่มต้น แต่งานพิมพ์ใช้ 300 DPI และการพิมพ์ภาพถ่ายอาจสูงถึง 600 DPI — ที่ค่า DPI ต่างกัน จำนวนพิกเซลเดียวกันจะให้ขนาดทางกายภาพต่างกันมาก พิมพ์ค่าลงในหน่วยใดหน่วยหนึ่งจากสี่หน่วย เลือกพรีเซ็ต DPI ที่ตรงกับบริบทของคุณ แล้วอีกสามหน่วยจะอัปเดตแบบเรียลไทม์ ทุกผลลัพธ์อยู่ห่างจากคลิปบอร์ดเพียงคลิกเดียว

วิธีใช้ตัวแปลงพิกเซล

1. พิมพ์ค่าที่ต้องการแปลงลงในช่องอินพุต — เช่น 100
2. เลือกหน่วยของค่าที่คุณป้อน: พิกเซล มิลลิเมตร เซนติเมตร หรือนิ้ว
3. เลือกพรีเซ็ต DPI — 96 DPI สำหรับเว็บ, 300 DPI สำหรับงานพิมพ์ หรือเลือก "กำหนดเอง" เพื่อป้อน DPI ของคุณเอง
4. อ่านค่าที่แปลงแล้วของอีกสามหน่วยในแผงผลลัพธ์ด้านล่าง
5. คลิกคัดลอกข้างผลลัพธ์ใดก็ได้เพื่อนำไปไว้ในคลิปบอร์ด หรือแชร์ URL — อินพุตของคุณจะคงอยู่เป็นพารามิเตอร์ใน URL

ใครใช้ตัวแปลงพิกเซลบ้าง

• นักเรียน: การบ้านวิชาคณิตศาสตร์และฟิสิกส์ที่เกี่ยวกับการแปลงพิกเซลเป็นมิลลิเมตร รวมถึงแบบฝึกหัดเรื่องความละเอียดหน้าจอในวิชาคอมพิวเตอร์กราฟิก
• นักออกแบบเว็บและ UI: การกำหนดขนาดไอคอน ระยะห่าง และคอมโพเนนต์จากค่าวัดทางกายภาพ (มม.) ของม็อกอัปให้เป็นพิกเซล CSS ที่ค่า DPI อ้างอิงที่ถูกต้อง
• นักออกแบบสิ่งพิมพ์: การแปลงค่าส่งออกเป็นพิกเซลจาก Photoshop หรือ Figma ให้เป็นมิลลิเมตรและนิ้ว ที่ 300 DPI ก่อนส่งให้โรงพิมพ์
• ช่างภาพ: การคำนวณขนาดงานพิมพ์ทางกายภาพจากเอาต์พุตของกล้อง (เช่น 4000 × 3000 px ที่ 300 DPI พิมพ์ได้ 13.3 × 10 นิ้ว)
• นักพัฒนา: การตรวจสอบค่าพิกเซล CSS เทียบกับขนาดทางกายภาพที่ระบุไว้ในข้อกำหนดของผลิตภัณฑ์หรือการเข้าถึง

ทำไมต้องใช้ตัวแปลงนี้

• ทั้งสี่หน่วย (พิกเซล มิลลิเมตร เซนติเมตร นิ้ว) อัปเดตแบบเรียลไทม์ขณะที่คุณพิมพ์
• พรีเซ็ต DPI ในตัวห้ารายการครอบคลุมกรณีทั่วไป — 96 DPI สำหรับเว็บ, 72 DPI สำหรับ Mac รุ่นเก่า, 150/300/600 DPI สำหรับงานพิมพ์
• อินพุต DPI กำหนดเองสำหรับจอแสดงผลที่ไม่ได้มาตรฐาน (Retina, จอ DPI สูง) และเวิร์กโฟลว์งานพิมพ์เฉพาะทาง
• URL แชร์ได้ — ค่า หน่วยต้นทาง และ DPI ของคุณจะคงอยู่เป็นพารามิเตอร์ใน URL
• ใช้งานในเบราว์เซอร์ 100%: ไม่ต้องสมัครสมาชิก ไม่มีโฆษณาในแผงผลลัพธ์ และสูตรคำนวณเป็นโอเพนซอร์ส

ตัวแปลงนี้แม่นยำแค่ไหน?

ตัวแปลงใช้อัตราส่วนมาตรฐาน 25.4 มิลลิเมตรต่อนิ้ว และค่า DPI ที่คุณกำหนด คำนวณด้วยความแม่นยำสองเท่าตามมาตรฐาน IEEE 754 ผลลัพธ์แม่นยำภายในขอบเขตการปัดเศษทศนิยม (ความคลาดเคลื่อนสัมพัทธ์ ≤1×10⁻⁶) แหล่งความคลาดเคลื่อนเดียวในโลกจริงคือค่า DPI เอง — หากจอของคุณไม่ได้ทำงานที่ DPI ที่สมมติไว้ โปรดปรับเทียบก่อนด้วยเครื่องมือ Screen Ruler

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

พิกเซลคืออะไร?

พิกเซลคือหน่วยที่เล็กที่สุดของจอแสดงผลดิจิทัลหรือภาพดิจิทัล ขนาดทางกายภาพของพิกเซลไม่ได้คงที่ — ขึ้นอยู่กับความหนาแน่นของพิกเซล (DPI) ของหน้าจอ บนจอเว็บที่ 96 DPI หนึ่งพิกเซลเท่ากับ 1/96 นิ้วพอดี (ประมาณ 0.265 มม.); บนงานพิมพ์ที่ 300 DPI หนึ่งพิกเซลเท่ากับ 1/300 นิ้ว (ประมาณ 0.085 มม.)

DPI คืออะไรและทำไมถึงสำคัญ?

DPI (จุดต่อนิ้ว) คือตัวคูณการแปลงระหว่างพิกเซลกับความยาวทางกายภาพ ค่า 100 px เดียวกันจะเท่ากับ 26.46 มม. ที่ 96 DPI แต่เพียง 8.47 มม. ที่ 300 DPI คุณต้องใช้ DPI ของสื่อปลายทาง — หน้าจอ งานพิมพ์ หรือไฟล์ส่งออก — เพื่อให้การแปลงมีความหมายทางกายภาพ

จะแปลงพิกเซลเป็นมิลลิเมตรอย่างไร?

หารจำนวนพิกเซลด้วย DPI เพื่อให้ได้ค่าเป็นนิ้ว แล้วคูณด้วย 25.4 เพื่อให้ได้มิลลิเมตร: มม. = (px / DPI) × 25.4 สำหรับ 100 px ที่ 96 DPI: 100/96 × 25.4 ≈ 26.46 มม. ตัวแปลงทำสิ่งนี้ให้คุณแบบเรียลไทม์

ควรใช้ 72 หรือ 96 DPI สำหรับเว็บ?

ใช้ 96 DPI CSS เบราว์เซอร์ และระบบปฏิบัติการได้กำหนดมาตรฐานที่ 96 พิกเซลอ้างอิงต่อนิ้วตั้งแต่ทศวรรษ 1990 ค่า 72 DPI เป็นมรดกจากการพิมพ์ของ Apple ยุคแรก (หนึ่งพิกเซล = หนึ่งจุดในการพิมพ์) และยังมีประโยชน์เฉพาะกับงาน Mac ยุคเก่า — งานเว็บสมัยใหม่ใช้ 96

ควรใช้ DPI เท่าไหร่สำหรับงานพิมพ์?

ใช้ 300 DPI สำหรับงานพิมพ์นิตยสารและหนังสือคุณภาพสูง, 150 DPI สำหรับการพิสูจน์อักษรและงานขนาดใหญ่ และ 600 DPI เฉพาะสำหรับงานพิมพ์ภาพถ่าย ลายเส้นละเอียด หรือข้อความที่ดูภายใต้การขยายมาก การใช้ค่าสูงกว่า 300 DPI สำหรับงานทั่วไปจะเพิ่มขนาดไฟล์โดยไม่เห็นความแตกต่างบนกระดาษส่วนใหญ่

Retina/HiDPI ส่งผลต่อการแปลงอย่างไร?

จอ Retina และจอ HiDPI อื่น ๆ แสดงพิกเซลทางกายภาพสองหรือสามพิกเซลต่อหนึ่งพิกเซล CSS ตัวแปลงทำงานในหน่วยพิกเซล CSS ตามค่าเริ่มต้น ดังนั้น 100 CSS px ที่ 96 DPI จึงถูกต้องสำหรับจอ HiDPI ใด ๆ หากต้องการจำนวนพิกเซลทางกายภาพ ให้คูณด้วยอัตราส่วนพิกเซลของอุปกรณ์ (window.devicePixelRatio ในเบราว์เซอร์)

ทำไมงานออกแบบเว็บของฉันดูเล็กลงบนจอ 4K?

ระบบปฏิบัติการส่วนใหญ่ใช้สเกล 150–200% บนจอ 4K ซึ่งทำให้พิกเซล CSS ดูคล้ายกับจอ 1080p ทางสายตา หากปิดสเกลไว้ งานออกแบบจะดูเล็กลงทางกายภาพเพราะจำนวนพิกเซลเดียวกันครอบคลุมพื้นที่จริงน้อยกว่า ปรับการสเกล DPI ในการตั้งค่าของ OS หรือใช้หน่วย rem/percent แทน px แบบคงที่

เจาะลึก DPI — เลือกตัวเลขที่ถูกต้องครั้งเดียว

การแปลงพิกเซลเป็นความยาวทุกครั้งคือสมการเดียว: ความยาว = พิกเซล ÷ DPI ส่วนยากคือเลือก DPI ที่ตรงกับสื่อที่งานออกของคุณจะอยู่ DPI ผิดไม่ทำให้เกิด error — มันสร้างตัวเลขที่ถูกในทางคณิตศาสตร์และผิดทางกายภาพอย่างเงียบ ๆ ค่าตั้งล่วงหน้าด้านล่างครอบคลุม 95% ของงานจริง

งานเว็บ — ใช้ 96 DPI เสมอ

CSS เบราว์เซอร์ และระบบปฏิบัติการกำหนดมาตรฐานที่ 96 พิกเซลอ้างอิงต่อนิ้วในช่วงปลายทศวรรษ 1990 และตัวเลขนี้ไม่เปลี่ยน เบราว์เซอร์ทันสมัยทุกตัวถือว่า 1 พิกเซล CSS เท่ากับ 1/96 นิ้ว ไม่ว่าจอแสดงผลทางกายภาพจะเป็นอะไรก็ตาม จอ Retina และ 4K เรนเดอร์ที่ความหนาแน่นทางกายภาพสูงกว่า แต่ OS ปรับสเกลพิกเซล CSS กลับสู่อ้างอิง 96 DPI ดังนั้นคณิตศาสตร์ของคุณยังคงใช้ได้ ถือว่า 72 DPI เป็นมรดกเก่า — สำคัญเฉพาะตอนดึงสินทรัพย์จาก Mac ก่อน OS X

งานพิมพ์ — 150, 300, หรือ 600 DPI

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

Retina และ HiDPI — ทำงานในพิกเซล CSS

จอ Retina เรนเดอร์พิกเซลทางกายภาพสองหรือสามตัวต่อพิกเซล CSS หนึ่งตัว แต่ OS ซ่อนสิ่งนี้จากโค้ดของคุณ ยึดพิกเซล CSS (96 DPI) สำหรับคณิตศาสตร์เลย์เอาต์ หากต้องการจำนวนพิกเซลทางกายภาพจริง — เช่นเมื่อส่งสินทรัพย์บิตแมปที่ควรคมในทุกอุปกรณ์ — คูณด้วย window.devicePixelRatio ที่รันไทม์และส่งตัวแปร @2x หรือ @3x ตัวแปลงพิกเซลถือว่าอินพุตเป็นพิกเซล CSS ตามค่าเริ่มต้น ติ๊กกล่อง Custom DPI เฉพาะเมื่อคุณวัดความหนาแน่นพิกเซลทางกายภาพของจอที่ทราบจริง ๆ

รูปแบบการแปลงทั่วไป

ค่าพิกเซลบางค่าปรากฏบ่อยมากจนคุ้มที่จะจำ ตารางด้านล่างแสดงว่า 100 px, 1000 px และความกว้าง Full HD ปกติ (1920 px) แปลเป็นอะไรที่ค่า DPI ที่พบบ่อยที่สุดสี่ค่า

เคล็ดลับใช้งานจริงสำหรับนักพัฒนา

ตรวจสอบใน DevTools ก่อน

ก่อนเชื่อการแปลง ยืนยันว่าเบราว์เซอร์รายงาน 96 DPI อ้างอิงโดยพิมพ์ window.matchMedia('(min-resolution: 96dpi)').matches ในคอนโซล บนระบบที่กำหนดค่าถูกต้องจะคืนค่า true หากคืน false การปรับสเกล OS หรือระดับซูมของคุณไม่ใช่ค่าเริ่มต้นและการแปลงต้องปรับ

ส่งออกที่ DPI เป้าหมายเสมอ

Photoshop, Figma และเครื่องมือออกแบบส่วนใหญ่ส่งออกที่ DPI ของแคนวาสตามค่าเริ่มต้น ตั้ง DPI แคนวาสให้ตรงกับสื่อเป้าหมายก่อนส่งออก — การส่งออกแคนวาส 96 DPI ที่ 300 DPI ไม่ได้สุ่มตัวอย่างภาพเพิ่มจริง ๆ แค่ติดป้ายเมตาดาตาใหม่และพิมพ์ที่หนึ่งในสามของขนาดทางกายภาพที่ตั้งใจ

ปรับเทียบหน้าจอเพื่อความจริงพื้นฐาน

หากงานของคุณขึ้นอยู่กับความแม่นยำทางกายภาพ — วัดวัตถุที่ถือเทียบกับหน้าจอ กำหนดขนาดไอคอนตามความกว้างบัตรเครดิตที่ทราบ — เปิดเครื่องมือ Screen Ruler และปรับเทียบกับบัตรเครดิตจริงก่อน DPI จริงของหน้าจอคุณแทบไม่ตรงกับ spec sheet การปรับเทียบยึดการแปลงให้ตรงกับความเป็นจริงทางกายภาพ