วิธีครอบรูปภาพให้เป็นวงกลมสำหรับโปรไฟล์และอวาตาร์

ปรับปรุงล่าสุด: June 28, 2026

การตัดภาพวงกลมจะเปลี่ยนรูปถ่ายสี่เหลี่ยมหรือสี่เหลี่ยมผืนผ้าให้เป็นรูปทรงกลม ซึ่งเป็นรูปร่างมาตรฐานสำหรับอวาตาร์ รูปโปรไฟล์ และโลโก้ มีเป้าหมายที่แตกต่างกันสองอย่าง: คือภาพ PNG วงกลมแบบโปร่งใส (สำหรับการออกแบบ) หรือวงกลมบนพื้นหลังทึบ (สำหรับอวาตาร์ที่เสร็จสมบูรณ์แล้ว) คู่มือนี้จะครอบคลุมทั้งสองอย่าง กฎการจัดวางแบบสี่เหลี่ยมก่อนที่ช่วยให้วัตถุอยู่ตรงกลาง และสถานที่ต่างๆ ที่มีการใช้การตัดภาพวงกลม

คำตอบสั้นๆ: จะครอปรูปภาพให้เป็นวงกลมได้อย่างไร?

กฎสำคัญคือ: ต้องครอปเป็น สี่เหลี่ยมก่อน โดยจัดให้ตัวแบบอยู่กึ่งกลาง จากนั้นจึงค่อยใช้วงกลม — มิฉะนั้น ตัวแบบจะหลุดออกจากศูนย์กลางในวงกลม

กฎการทำสี่เหลี่ยมก่อนเป็นอันดับแรก

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

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

การใช้ภาพตัดขอบวงกลมที่ไหนบ้าง?

การตัดขอบเป็นรูปวงกลมเป็นรูปแบบมาตรฐานสำหรับการใช้งานเฉพาะบางอย่าง:

• อวาตาร์และรูปโปรไฟล์ — แพลตฟอร์มโซเชียลส่วนใหญ่จะตัดภาพสี่เหลี่ยมที่อัปโหลดให้เป็นวงกลม
• โลโก้ — แบรนด์จำนวนมากใช้รูปทรงวงกลมสำหรับไอคอนแอปและ favicon
• รูปภาพทีมและคำรับรอง — รูปถ่ายบุคคลแบบครึ่งตัว (headshots) ทรงกลมในหน้าเกี่ยวกับเราและวิดเจ็ตรีวิว
• องค์ประกอบ UI — ปุ่มและป้ายรางวัลทรงวงกลม

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

คุณจะเลือกวิธีไหนดี?

วิธีที่ 1: ภาพ PNG วงกลมโปร่งใส

วงกลมโปร่งใสจะคงรูปทรงโค้งมนพร้อมมุมที่โปร่งใส ทำให้สามารถวางบนพื้นหลังใดก็ได้ ส่งออกเป็น PNG (เพราะ JPEG ไม่มีค่า alpha)

## Crop to a centered 600x600 square, then apply a circular alpha mask
magick input.jpg -gravity center -crop 600x600+0+0 +repage \
  \( +clone -threshold -1 -negate -fill white -draw "circle 300,300 300,0" \) \
  -alpha copy -compose CopyOpacity -composite output.png

ผลลัพธ์ที่ได้คือ PNG ที่มีมุมโปร่งใส สามารถใช้สำหรับทำ compositing ในเลย์เอาต์ต่างๆ ได้ ดูวิธี how to make transparent images

วิธีที่ 2: วงกลมบนพื้นหลังสีทึบ

สำหรับรูปโปรไฟล์ (avatar) ที่เสร็จสมบูรณ์แล้ว ให้ทำการประกอบวงกลมนั้นลงบนสีพื้นหลังแบบทึบ (เช่น สีขาว, สีแบรนด์, หรือสีดำ) นี่คือสิ่งที่เครื่องมือ "รูปโปรไฟล์ทรงกลม" ส่วนใหญ่จะสร้างออกมา

## Circle on a light-blue background
magick -size 600x600 "xc:#e8f0fe" bg.png
magick bg.png circle.png -gravity center -compose over -composite output.jpg

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

วิธีที่ 3: วงกลมด้วย CSS (ไม่ต้องแก้ไขรูปภาพ)

สำหรับหน้าเว็บ คุณไม่จำเป็นต้องครอปรูปภาพเลย — CSS สามารถเปลี่ยนสี่เหลี่ยมให้เป็นวงกลมได้:

.avatar { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }

border-radius: 50% จะเปลี่ยนองค์ประกอบสี่เหลี่ยมใด ๆ ให้เป็นวงกลม; object-fit: cover จะทำให้รูปภาพเติมเต็มพื้นที่โดยไม่มีการบิดเบือน นี่คือวิธีที่เว็บไซต์ส่วนใหญ่แสดงผลรูปโปรไฟล์จากรูปภาพต้นฉบับที่เป็นสี่เหลี่ยม MDN border-radius reference เป็นเอกสารอธิบายคุณสมบัตินี้

วิธีที่ 4: เครื่องมือในเบราว์เซอร์

สำหรับรูปภาพเดียว ให้ใช้ Image Resizer หรือเครื่องมือตัดวงกลม (circle-crop tool): อัปโหลด วางตำแหน่งวัตถุให้อยู่ในกรอบสี่เหลี่ยม ใช้ฟังก์ชันวงกลม และดาวน์โหลด วิธีนี้ช่วยจัดการกฎที่ต้องเน้นรูปทรงสี่เหลี่ยมก่อนได้ด้วยภาพ

ต้องทำวงกลมเอง หรือปล่อยให้แพลตฟอร์มจัดการดี?

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

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

ข้อผิดพลาดทั่วไป

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

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

ฉันจะทำรูปโปรไฟล์ให้เป็นวงกลมได้อย่างไร?

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

ฉันควรครอบเป็นวงกลมสำหรับโซเชียลมีเดียหรือไม่?

โดยปกติแล้วไม่ควร — ให้คุณอัปโหลดรูปสี่เหลี่ยมจัตุรัสที่จัดกึ่งกลาง แล้วให้แพลตฟอร์มทำมาสก์เป็นวงกลม การพยายามทำวงกลมก่อนอาจทำให้ถูกครอบใหม่ได้

รูปแบบไฟล์สำหรับวงกลมโปร่งใสคืออะไร?

PNG เนื่องจาก JPEG ไม่มี alpha channel จึงไม่สามารถเก็บมุมที่เป็นส่วนโปร่งใสได้ ดูที่ ภาพโปร่งใส

ฉันจะนำรูปทรงวงกลมไปวางบนพื้นหลังได้อย่างไร?

สร้าง PNG วงกลมแบบโปร่งใส จากนั้นนำไปประกอบกับสีทึบ หรือใช้ CSS border-radius: 50% บนหน้าเว็บ

ฉันจะครอบภาพให้เป็นวงกลมได้อย่างไร?

ขั้นแรก ให้ครอบเป็นสี่เหลี่ยมจัตุรัสก่อน (เพราะวงกลมจะพอดีในพื้นที่สี่เหลี่ยมจัตุรัสเท่านั้น) จากนั้นจึงใช้มาสก์แบบวงกลม ส่งออกเป็น PNG เพื่อคงความโปร่งใสของมุม หรือวางวงกลมบนพื้นหลังสีทึบแล้วส่งออกเป็น JPG กฎที่ต้องทำสี่เหลี่ยมจัตุรัสก่อนถือว่าห้ามละเลยเด็ดขาด — เพราะวงกลมในพื้นที่ที่ไม่ใช่สี่เหลี่ยมจัตุรัสจะทำให้เกิดมุมที่ดูแปลกตา

ทำไมฉันถึงต้องครอบเป็นสี่เหลี่ยมจัตุรัสก่อน?

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

รูปโปรไฟล์ควรมีขนาดเท่าไหร่?

ประมาณ 400×400 ถึง 800×800 pixels — ขนาดใหญ่พอที่จะคมชัด แต่เล็กพอที่จะโหลดเร็ว ครอบเป็นสี่เหลี่ยมจัตุรัสก่อน แล้วจึงใช้วงกลม แพลตฟอร์มส่วนใหญ่มักจะลดขนาดภาพที่อัปโหลด ดังนั้น 800px จึงเป็นขีดจำกัดสูงสุดที่ปลอดภัย ดูที่ เครื่องมือครอบรูปภาพ

ฉันสามารถครอบภาพที่ไม่ใช่สี่เหลี่ยมจัตุรัสให้เป็นวงกลมได้หรือไม่?

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

ฉันจะทำให้ภาพครอบทรงกลมคมชัดได้อย่างไร?

ส่งออกที่ขนาด 2x ของขนาดแสดงผล (เช่น 800px สำหรับหน้าจอแสดงผล 400px) เพื่อให้วงกลมยังคงความคมชัดบนหน้าจอ retina และใช้ PNG เพื่อรักษาความโปร่งใสของมุมโดยไม่มีการสูญเสียข้อมูล ภาพวงกลมแบบ 1x บนหน้าจอ DPI สูงจะดูนุ่มนวล ขอบที่โปร่งใสนั้นได้รับประโยชน์อย่างยิ่งจาก PNG มากกว่า JPEG เนื่องจาก JPEG ไม่มี alpha channel

วงกลมถูกนำไปใช้ที่ไหนบ้าง?

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

เครดิตรูปภาพ

• เดโมการครอปเป็นวงกลม, กฎสี่เหลี่ยมก่อนวงกลม, และแผนภาพกรณีใช้งานการครอปเป็นวงกลม — สร้างโดยผู้เขียนจากภาพถ่ายสไตล์อีคอมเมิร์ซ (Pexels #16675632, photo by Mikael Blomkvist) เพื่อแสดงผลลัพธ์การครอปเป็นวงกลมจริงและกฎสี่เหลี่ยมก่อน