เครื่องคำนวณอัตราส่วนภาพ – รักษาสัดส่วน

อัตราส่วนคืออะไร?

อัตราส่วน คือความสัมพันธ์เชิงสัดส่วนระหว่างความกว้างและความสูง แสดงเป็นตัวเลขสองตัวที่แยกด้วยเครื่องหมายอัตราส่วน (W:H) มันกำหนดรูปทรงของสี่เหลี่ยมว่ากว้าง สูง หรือสี่เหลี่ยมจัตุรัส โดยไม่ระบุขนาดจริง ๆ อัตราส่วนเป็นพื้นฐานสำหรับการถ่ายภาพ การถ่ายวิดีโอ การออกแบบกราฟิก การพัฒนาเว็บ และการผลิตจอแสดงผล

เครื่องคิดเลขนี้จะลดความกว้าง × ความสูงใด ๆ ให้เป็นอัตราส่วนที่ง่ายที่สุดโดยใช้อัลกอริธึม Greatest Common Divisor (GCD) นอกจากนี้ยังคำนวณความสูงใหม่ที่ถูกต้องเมื่อคุณต้องการปรับขนาดเป็นความกว้างที่แตกต่างกัน โดยรับประกันว่ารูปภาพและวิดีโอของคุณจะไม่ดูยืดหรือบิดเบี้ยว

ตัวอย่างเช่น ทั้ง 1920 × 1080 และ 3840 × 2160 มีอัตราส่วน 16:9 เหมือนกัน — แตกต่างกันเพียงแค่ความละเอียด การทำความเข้าใจความแตกต่างนี้เป็นสิ่งสำคัญสำหรับผู้ที่ทำงานกับสื่อดิจิทัล เนื่องจากการรักษาอัตราส่วนระหว่างการปรับขนาดจะป้องกันการบิดเบี้ยวทางสายตาที่เรียกว่า "การบีบอัด" หรือ "การยืด"

อัตราส่วนปรากฏอยู่ทั่วไปในชีวิตประจำวัน: หน้าจอสมาร์ทโฟนของคุณ จอแสดงผลแล็ปท็อปของคุณ รูปภาพที่คุณโพสต์บนโซเชียลมีเดีย วิดีโอที่คุณสตรีม และแม้แต่ขนาดกระดาษที่คุณพิมพ์ ตัวอย่างเช่น กระดาษมาตรฐาน A4 ใช้อัตราส่วน √2:1 (ประมาณ 1.414:1) ซึ่งช่วยให้สามารถพับแผ่นกระดาษเป็นสองส่วนได้ในขณะที่ยังคงสัดส่วนเดิมไว้

อัตราส่วนทั่วไปและการใช้งาน

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

อุตสาหกรรมภาพยนตร์ใช้อัตราส่วนพิเศษหลายอย่างที่เกินกว่ารูปแบบทีวีมาตรฐาน อัตราส่วน Academy (1.375:1) ครอบงำภาพยนตร์ในยุคแรก ๆ ในขณะที่ภาพยนตร์บล็อกบัสเตอร์สมัยใหม่มักใช้ 1.85:1 (จอกว้างแบบแบน) หรือ 2.39:1 (แอนาล็อกสโคป) โดย IMAX ใช้ 1.43:1 ซึ่งสูงกว่าจอกว้างมาตรฐานมาก — นี่เป็นเหตุผลที่ฉาก IMAX รู้สึกเหมือนอยู่ในโลกจริง

วิธีปรับขนาดโดยรักษาอัตราส่วน

การปรับขนาดรูปภาพหรือเฟรมวิดีโอในขณะที่รักษาอัตราส่วนต้องกำหนดมิติหนึ่งและคำนวณอีกมิติหนึ่งตามสัดส่วน สูตรนั้นไม่ยาก:

• ความกว้างใหม่ที่ทราบแล้ว แก้หาความสูง: ความสูงใหม่ = (ความสูงเดิม × ความกว้างใหม่) ÷ ความกว้างเดิม
• ความสูงใหม่ที่ทราบแล้ว แก้หาความกว้าง: ความกว้างใหม่ = (ความกว้างเดิม × ความสูงใหม่) ÷ ความสูงเดิม

ตัวอย่างที่ 1: ปรับขนาดรูปภาพ 1920 × 1080 ให้กว้าง 1280 พิกเซล:
ความสูงใหม่ = (1080 × 1280) ÷ 1920 = 720 ผลลัพธ์: 1280 × 720 (ยังคง 16:9)

ตัวอย่างที่ 2: ปรับขนาดรูปภาพ 4000 × 3000 (4:3) ให้พอดีกับคอลัมน์กว้าง 1200 พิกเซล:
ความสูงใหม่ = (3000 × 1200) ÷ 4000 = 900 ผลลัพธ์: 1200 × 900 (ยังคง 4:3)

ตัวอย่างที่ 3: คุณต้องการแบนเนอร์สูง 600 พิกเซลจากแหล่งข้อมูล 2560 × 1440:
ความกว้างใหม่ = (2560 × 600) ÷ 1440 = 1067 ผลลัพธ์: 1067 × 600 (ยังคง 16:9)

ซอฟต์แวร์แก้ไขรูปภาพส่วนใหญ่ (Photoshop, GIMP, Figma, Canva) มีตัวเลือก "ล็อคอัตราส่วน" หรือ "จำกัดสัดส่วน" เมื่อเปิดใช้งาน การเปลี่ยนแปลงมิติหนึ่งจะปรับอีกมิติหนึ่งโดยอัตโนมัติ อย่างไรก็ตาม หากคุณต้องการคำนวณมิติก่อนเปิดโปรแกรมแก้ไข — หรือคุณกำลังทำงานกับ CSS, รูปภาพที่ตอบสนอง หรือการตั้งค่าการเข้ารหัสวิดีโอ — เครื่องคิดเลขนี้จะให้ค่าที่แม่นยำทันที

อัตราส่วนในการออกแบบเว็บและ CSS

การพัฒนาเว็บสมัยใหม่พึ่งพาอัตราส่วนอย่างมากสำหรับเค้าโครงที่ตอบสนอง คุณสมบัติ CSS aspect-ratio (รองรับในเบราว์เซอร์ทั้งหมดตั้งแต่ปี 2021) ช่วยให้คุณกำหนดสัดส่วนของกล่องได้โดยตรง:

.video-container { aspect-ratio: 16 / 9; width: 100%; }

สร้างคอนเทนเนอร์ที่ตอบสนองซึ่งรักษาอัตราส่วน 16:9 ไว้เสมอโดยไม่คำนึงถึงความกว้างของ viewport — ไม่มีการแฮ็ก padding-bottom อีกต่อไป กรณีการใช้งานทั่วไป ได้แก่:

• วิดีโอฝัง: การฝัง YouTube และ Vimeo ต้องการคอนเทนเนอร์ 16:9 เพื่อหลีกเลี่ยงการแสดงตัวอักษรบนส่วนขอบหรือการตัดต่อ
• ตัวแทนรูปภาพ: การตั้งค่าอัตราส่วนก่อนที่รูปภาพจะโหลดช่วยป้องกัน Cumulative Layout Shift (CLS) ซึ่งเป็นตัวชี้วัด Core Web Vitals ที่สำคัญ
• เค้าโครงการ์ด: การ์ดสินค้าและรูปขนาดย่อมีลักษณะสม่ำเสมอเมื่อมีอัตราส่วนเดียวกันในกริด
• ส่วนแนะนำ: แบนเนอร์แบบเต็มความกว้างมักใช้อัตราส่วนเช่น 3:1 หรือ 4:1 เพื่อรักษาความสมดุลทางสายตาบนขนาดหน้าจอที่แตกต่างกัน

องค์ประกอบ HTML <img> ยังรองรับแอตทริบิวต์ width และ height ที่ให้เบราว์เซอร์ทราบเกี่ยวกับอัตราส่วนของรูปภาพก่อนที่จะโหลด ลดการเปลี่ยนแปลงเค้าโครงเพิ่มเติม ตั้งค่าแอตทริบิวต์เหล่านี้เสมอ — เบราว์เซอร์ใช้พวกมันเพื่อจองพื้นที่ที่ถูกต้องแม้กระทั่งก่อนที่ไฟล์รูปภาพจะมาถึง

อัตราส่วนภาพสำหรับโซเชียลมีเดีย

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

เพื่อให้ได้การมีส่วนร่วมสูงสุด ให้สร้างเนื้อหาตามอัตราส่วนและความละเอียดที่แนะนำของแพลตฟอร์มเสมอ การอัปโหลดไฟล์ที่มีความละเอียดสูงกว่า (เช่น 4K สำหรับ YouTube) ช่วยให้แพลตฟอร์มสามารถให้บริการคุณภาพที่ดีที่สุดแก่ผู้ชมบนหน้าจอขนาดใหญ่ ในขณะที่ปรับลดขนาดอัตโนมัติสำหรับผู้ใช้มือถือ

คณิตศาสตร์เบื้องหลังการคำนวณอัตราส่วนภาพ

การคำนวณอัตราส่วนภาพที่ลดรูปจะต้องหา Greatest Common Divisor (GCD) ของความกว้างและความสูง จากนั้นหารค่าทั้งสองด้วย GCD นั้น GCD คำนวณโดยใช้ขั้นตอนวิธี Euclidean — ซึ่งเป็นขั้นตอนวิธีที่เก่าแก่ที่สุดในคณิตศาสตร์ ย้อนกลับไปถึง 300 ปีก่อนคริสตกาล

ตัวอย่างทีละขั้นตอนสำหรับ 1920 × 1080:

• GCD(1920, 1080): 1920 mod 1080 = 840
• GCD(1080, 840): 1080 mod 840 = 240
• GCD(840, 240): 840 mod 240 = 120
• GCD(240, 120): 240 mod 120 = 0 → GCD = 120

หาร: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 → อัตราส่วน = 16:9

สำหรับขนาดที่ไม่ได้มาตรฐาน เช่น 1366 × 768 (ความละเอียดแล็ปท็อปที่พบได้บ่อยมาก) GCD คือ 2 ซึ่งให้ 683:384 — ซึ่งไม่สามารถลดรูปให้เป็นอัตราส่วนที่สวยงามได้ ในทางปฏิบัติ ความละเอียดนี้ใกล้เคียงกับ 16:9 (16:9 ที่แม่นยำที่ความกว้างนั้นคือ 1366 × 768.375) ผู้ผลิตปัดเป็นพิกเซลจำนวนเต็ม ซึ่งเป็นเหตุผลว่าทำไมหน้าจอ "16:9" บางจอจึงมีอัตราส่วนที่ไม่สมบูรณ์เล็กน้อย

อัตราส่วนทศนิยม (ความกว้าง ÷ ความสูง) เป็นวิธีที่มีประโยชน์อีกวิธีในการแสดงอัตราส่วนภาพ ทำให้การเปรียบเทียบง่ายขึ้น: 16:9 = 1.778, 4:3 = 1.333, 21:9 = 2.333 ค่าทศนิยมที่สูงขึ้นหมายถึงสี่เหลี่ยมผืนผ้าที่กว้างขึ้น

อัตราส่วนภาพในการถ่ายภาพและการพิมพ์

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

เมื่อพิมพ์ภาพถ่าย การไม่ตรงกันของอัตราส่วนภาพจะทำให้มีการตัดต่อ ภาพถ่าย 3:2 ที่พิมพ์ที่ 8×10" (ซึ่งเป็น 5:4) จะสูญเสียส่วนของภาพ ช่างภาพมืออาชีพวางแผนองค์ประกอบของพวกเขาโดยคำนึงถึงอัตราส่วนเอาต์พุตสุดท้าย หรือพวกเขาจะถ่ายภาพกว้างขึ้นแล้วตัดในระหว่างการโพสต์โปรดักชั่นเพื่อให้เข้ากับรูปแบบปลายทาง

มาตรฐานกระดาษสากล (ISO 216) ใช้อัตราส่วน √2:1 ที่ไม่เหมือนใคร (ประมาณ 1.414:1) ซึ่งหมายความว่าการพับแผ่นกระดาษ A4 เป็นสองส่วนจะได้แผ่น A5 ที่มีสัดส่วนเหมือนกัน — คุณสมบัติที่สวยงามทางคณิตศาสตร์ที่ไม่มีอัตราส่วนอื่นใดมี เมื่อออกแบบสำหรับการพิมพ์ ตรวจสอบเสมอว่าแคนวาสดิจิทัลของคุณตรงกับอัตราส่วนของกระดาษเป้าหมายก่อนเริ่ม — การเปลี่ยนแปลงในภายหลังหมายถึงการจัดองค์ประกอบเรียงลำดับทั้งหมดใหม่

ช่างภาพมืออาชีพที่ถ่ายภาพกิจกรรมหรือภาพบุคคลมักใช้ 3:2 ในกล้อง แต่ส่งมอบภาพสุดท้ายในอัตราส่วนต่าง ๆ เพื่อให้เหมาะกับเอาต์พุตที่แตกต่างกัน: 3:2 สำหรับการพิมพ์ 4×6, 5:4 สำหรับการพิมพ์ 8×10, 16:9 สำหรับสไลด์โชว์ และ 1:1 สำหรับรูปโปรไฟล์โซเชียลมีเดีย การวางแผนสำหรับผลผลิตหลายอย่างตั้งแต่เริ่มต้น — โดยทิ้งพื้นที่เพิ่มเติมไว้รอบ ๆ วัตถุ — เรียกว่า "การถ่ายภาพแบบลูส" และเป็นวิธีปฏิบัติที่ดีที่สุดในการถ่ายภาพเชิงพาณิชย์