การปรับขนาดภาพ: พิกเซล อัตราส่วนภาพ และ DPI
การปรับขนาดภาพดูเหมือนง่าย แต่ตัวเลือกเบื้องหลังเป็นตัวกำหนดว่าภาพจะยังคมชัด คงสัดส่วนเดิม และมีขนาดไฟล์ที่เหมาะสมหรือไม่ คู่มือนี้อธิบายขนาดภาพในหน่วยพิกเซล อัตราส่วนภาพ คุณภาพของการรีแซมเปิล DPI และวิธีเลือกขนาดสำหรับหน้าจอ
พิกเซล ขนาดภาพ และขนาดไฟล์
ภาพดิจิทัลคือตารางของพิกเซล ขนาดภาพ เช่น 4000 × 3000 บอกจำนวนพิกเซลในแนวนอนและแนวตั้ง เมื่อนำมาคูณกันจะได้จำนวนพิกเซลทั้งหมด ซึ่งในที่นี้คือ 12 ล้านพิกเซล (12 เมกะพิกเซล) การปรับขนาดจะแทนที่ตารางนั้นด้วยตารางใหม่ และคำนวณพิกเซลใหม่แต่ละจุดจากพิกเซลเดิม เรียกว่าการรีแซมเปิล (resampling)
จำนวนพิกเซลเพิ่มขึ้นตามกำลังสองของความยาวด้าน การลดความกว้างและความสูงลงครึ่งหนึ่งจะเหลือพิกเซลเพียงหนึ่งในสี่ นี่จึงเป็นเหตุผลที่การลดขนาดภาพมักทำให้ไฟล์เล็กลงได้มากที่สุด แม้ว่ารูปแบบไฟล์ การตั้งค่าคุณภาพ และปริมาณรายละเอียดเล็ก ๆ ในภาพก็มีผลเช่นกัน ในการแสดงหรือแก้ไขภาพ โปรแกรมจะถอดรหัสภาพเป็นพิกเซลที่ไม่บีบอัด ซึ่งโดยทั่วไปใช้พิกเซลละ 4 ไบต์ ภาพถ่าย 12 เมกะพิกเซลจึงต้องใช้หน่วยความจำประมาณ 48 MB ไม่ว่าไฟล์จะเล็กเพียงใด
คงอัตราส่วนภาพไว้ หรือครอปก่อน
อัตราส่วนภาพคือความสัมพันธ์ระหว่างความกว้างกับความสูง เช่น 4000 × 3000 คือ 4:3 และ 1920 × 1080 คือ 16:9 หากคงอัตราส่วนไว้ คุณกำหนดเพียงด้านเดียวแล้วอีกด้านจะปรับตาม ภาพถ่าย 4000 × 3000 ที่ปรับให้กว้าง 1,200 พิกเซลจึงกลายเป็น 1200 × 900 หากกำหนดทั้งสองด้านอย่างอิสระ ภาพที่มีอัตราส่วนต่างออกไปจะถูกยืดหรือบีบ และวงกลมจะกลายเป็นวงรี
หากต้องการขนาดที่แน่นอนในสัดส่วนที่ต่างจากเดิมโดยภาพไม่ผิดรูป ให้ครอปตามอัตราส่วนเป้าหมายก่อน แล้วจึงปรับขนาด เมื่อปรับขนาดภาพแนวตั้งและแนวนอนหลายภาพพร้อมกัน การกำหนดความกว้างคงที่จะทำให้ภาพแนวตั้งออกมาสูง ภาพถ่าย 3000 × 4000 ที่กว้าง 1,200 พิกเซลจะกลายเป็น 1200 × 1600
การย่อและขยายภาพ
เมื่อย่อภาพ พิกเซลใหม่แต่ละจุดควรสรุปมาจากพิกเซลต้นฉบับหลายจุด วิธีที่รวดเร็วซึ่งอ่านค่าจากพิกเซลใกล้เคียงเพียงไม่กี่จุดจะข้ามรายละเอียดไปเมื่อย่อภาพลงมาก ทำให้เห็นขอบหยักและลวดลายที่ดูระยิบระยับ (aliasing หรือ moiré) บนผืนผ้า เส้นบาง ๆ และตัวหนังสือ การรีแซมเปิลที่ดีกว่าจะนำพิกเซลต้นทางมาคำนวณมากขึ้น เครื่องมือปรับขนาดของ LeedyBox ย่อภาพทีละครึ่งเป็นขั้น ๆ โดยแต่ละขั้นจะเฉลี่ยพิกเซลข้างเคียง ซึ่งให้ผลลัพธ์ที่เนียนขึ้นเมื่อใช้การปรับขนาดของเบราว์เซอร์ ภาพที่ย่อลงมากอาจยังดูคมน้อยลงเล็กน้อย และ LeedyBox ไม่ได้เพิ่มความคมให้
การขยายภาพจะประมาณค่าพิกเซลใหม่จากพิกเซลข้างเคียง ขอบจึงดูเบลอหรือแตกเป็นบล็อก และไม่มีรายละเอียดใหม่เกิดขึ้น ซอฟต์แวร์ขยายภาพเฉพาะทางอาจเติมรายละเอียดที่ดูสมจริงได้ แต่รายละเอียดนั้นถูกสร้างขึ้นใหม่ ไม่ได้กู้คืนมา หากต้องการภาพที่ใหญ่ขึ้น ให้กลับไปใช้ต้นฉบับที่ใหญ่กว่าเมื่อทำได้
DPI, PPI และขนาดงานพิมพ์
DPI (dots per inch) หรือที่ถูกต้องกว่าคือ PPI (pixels per inch) เป็นตัวเลขที่เก็บไว้ในไฟล์ภาพบางไฟล์ ใช้บอกซอฟต์แวร์สำหรับพิมพ์และจัดหน้าว่าจะพิมพ์พิกเซลให้ใหญ่เท่าใด โดยไม่ได้เปลี่ยนพิกเซล ขนาดพิมพ์ (นิ้ว) = จำนวนพิกเซล ÷ PPI (คูณด้วย 2.54 เพื่อแปลงเป็นเซนติเมตร)
| ความกว้างของภาพ | พิมพ์ที่ 300 PPI | พิมพ์ที่ 150 PPI |
|---|---|---|
| 1,200 พิกเซล | 4 นิ้ว (10.2 ซม.) | 8 นิ้ว (20.3 ซม.) |
| 2,400 พิกเซล | 8 นิ้ว (20.3 ซม.) | 16 นิ้ว (40.6 ซม.) |
| 3,600 พิกเซล | 12 นิ้ว (30.5 ซม.) | 24 นิ้ว (61 ซม.) |
การเปลี่ยนเฉพาะค่า DPI จะเปลี่ยนขนาดเมื่อพิมพ์ แต่พิกเซลยังคงเดิม ภาพจึงดูเหมือนเดิมทุกประการบนหน้าจอ การพิมพ์ให้คมชัดต้องมีพิกเซลมากพอ ภาพพิมพ์ขนาด 6 × 4 นิ้วที่ 300 PPI ต้องใช้ 1800 × 1200 พิกเซล มักมีการแนะนำค่าประมาณ 300 PPI สำหรับภาพถ่ายที่ดูในระยะใกล้ ส่วนภาพพิมพ์ขนาดใหญ่ที่ดูจากระยะไกลใช้ค่าต่ำกว่านี้ได้ LeedyBox ไม่ได้เก็บค่า DPI ของต้นฉบับไว้ จึงควรกำหนดขนาดพิมพ์ตอนสั่งพิมพ์
การเลือกขนาดสำหรับหน้าเว็บและหน้าจอ
บนหน้าเว็บ สิ่งที่สำคัญคือความกว้างที่ภาพแสดงจริง เลย์เอาต์วัดเป็นพิกเซล CSS และหน้าจอความหนาแน่นสูงใช้พิกเซลของอุปกรณ์ตั้งแต่สองพิกเซลขึ้นไปต่อหนึ่งพิกเซล CSS ในแต่ละทิศทาง ภาพที่แสดงกว้าง 600 พิกเซล CSS จึงต้องมีประมาณ 1,200 พิกเซลจึงจะคมชัดเต็มที่บนจอแบบ "2×" ขณะที่ภาพถ่ายขนาด 4,000 พิกเซลในตำแหน่งเดียวกันจะสิ้นเปลืองแบนด์วิดท์และหน่วยความจำ
วัดความกว้างสูงสุดที่ภาพแสดงในเลย์เอาต์ของคุณ เช่น ด้วยเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ แอตทริบิวต์ srcset และ sizes ช่วยให้คุณเสนอภาพเดียวกันได้หลายความกว้าง เช่น 600, 1200 และ 1800 พิกเซล แล้วเบราว์เซอร์จะดาวน์โหลดภาพที่เหมาะกับหน้าจอ หากแบบฟอร์มอัปโหลด ร้านค้าออนไลน์ หรือโซเชียลเน็ตเวิร์กกำหนดขนาดเฉพาะ ให้ตรวจสอบเอกสารฉบับล่าสุดของบริการนั้น เพราะข้อกำหนดดังกล่าวแตกต่างกันและเปลี่ยนแปลงได้
การเลือกรูปแบบและการปรับขนาดหลายภาพด้วย LeedyBox
หลังปรับขนาด ให้เลือกรูปแบบตามเนื้อหาของภาพ ภาพถ่ายมักมีขนาดเล็กที่สุดเมื่อเป็น JPG หรือ WebP ภาพหน้าจอ โลโก้ และภาพที่มีส่วนโปร่งใสเหมาะกับ PNG หรือ WebP ซึ่งรองรับความโปร่งใสเช่นกัน JPG เก็บความโปร่งใสไม่ได้ ส่วนที่โปร่งใสจึงกลายเป็นสีขาว และภาพถ่ายที่บันทึกเป็น PNG อาจใหญ่กว่าไฟล์ JPG ต้นฉบับ ดูรายละเอียดได้ที่ JPG, PNG, WebP และ AVIF ต่างกันอย่างไร
เครื่องมือปรับขนาดภาพของ LeedyBox ปรับขนาดภาพจำนวนมากได้ในครั้งเดียวภายในเบราว์เซอร์ของคุณ โดยไม่ต้องอัปโหลดภาพ
- เลือก พิกเซล หรือ เปอร์เซ็นต์ (1 ถึง 400%) เมื่อเปิด "คงอัตราส่วนภาพ" ภาพแต่ละภาพจะคงสัดส่วนของตัวเองไว้
- ภาพที่เล็กกว่าขนาดเป้าหมายจะไม่ถูกขยาย เว้นแต่คุณปิดตัวเลือกนั้น
- ตัวเลือก "เหมือนต้นฉบับ" จะคงรูปแบบ JPG, PNG และ WebP ไว้ และบันทึก GIF, BMP และ AVIF เป็น PNG ส่วน JPG และ WebP ใช้คุณภาพ 90 เว้นแต่คุณจะเปลี่ยนค่า
- ระบบจะใช้การวางแนวที่กล้องบันทึกไว้ ไม่คัดลอกเมทาดาทา และผลลัพธ์ตั้งแต่สองไฟล์ขึ้นไปสามารถดาวน์โหลดเป็นไฟล์ ZIP ได้
หากต้องการให้ไฟล์เล็กลงอีก ให้ใช้เครื่องมือบีบอัดภาพ และอ่าน อธิบายการตั้งค่าการบีบอัดภาพ
คำถามที่พบบ่อย
ค่า DPI ที่สูงขึ้นทำให้ภาพคมชัดขึ้นหรือไม่
ไม่ ค่านี้เพียงบอกซอฟต์แวร์ว่าจะพิมพ์ภาพให้ใหญ่เท่าใด ความคมชัดขึ้นอยู่กับจำนวนพิกเซลและขนาดที่แสดงพิกเซลเหล่านั้น
ทำไมไฟล์ที่ปรับขนาดแล้วจึงใหญ่กว่าต้นฉบับ
ส่วนใหญ่เป็นเพราะบันทึกภาพถ่ายเป็น PNG ตั้งคุณภาพสูงกว่าต้นฉบับ หรือภาพถูกขยาย
ภาพถ่ายสำหรับเว็บไซต์ควรกว้างเท่าใด
ใช้ความกว้างสูงสุดที่ภาพแสดง แล้วคูณสองสำหรับหน้าจอความหนาแน่นสูง หากภาพแสดงในขนาดที่เล็กกว่านั้นด้วย ให้เสนอขนาดเพิ่มเติมด้วย srcset