ครอปรูปภาพ

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

ลากภายในรูปเพื่อเลื่อนกรอบ หรือลากที่มุมเพื่อปรับขนาด เมื่อโฟกัสอยู่ที่รูป ปุ่มลูกศรจะเลื่อนทีละ 1 พิกเซล และกด Shift ค้างจะเลื่อนทีละ 10 พิกเซล ช่องด้านล่างแสดงค่าครอปจริงเสมอ

ผลลัพธ์

เลือกรูปภาพเพื่อดูผลการครอปที่นี่

ตั้งค่าการครอป

อัตราส่วน

อัตราส่วนไหนใช้กับงานอะไร

อัตราส่วนรูปทรงใช้ที่ไหน
1:1จัตุรัสรูปโปรไฟล์ อวตาร รูปสินค้าบนมาร์เก็ตเพลสส่วนใหญ่
16:9แนวนอนกว้างสไลด์ ภาพปกวิดีโอ หน้าจอและทีวีส่วนใหญ่
9:16แนวตั้งสูงหน้าจอมือถือ สตอรี วิดีโอสั้น
4:3แนวนอนเล็กน้อยภาพจากกล้องคอมแพกต์และจอรุ่นเก่า
3:2แนวนอนภาพจากกล้องใหญ่ส่วนใหญ่ และขนาดอัดภาพมาตรฐาน
2:3 และ 3:4แนวตั้งสองอันข้างบนที่หมุนตั้ง เช่น โปสเตอร์ ภาพบุคคล ภาพอัด

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

ครอปก่อน แล้วค่อยบีบอัด

ถ้ารูปหนึ่งต้องทั้งครอปและย่อขนาด ลำดับมีผล และมีทางเดียวที่ไม่เสียอะไรเลย

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

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

ส่วนที่ไม่ใช่แค่ภาพตัวอย่าง

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

ดังนั้นกรอบที่รายงานว่า 1200 × 800 จะให้ไฟล์ขนาด 1200 × 800 จริง ไม่ว่าภาพตัวอย่างบนจอคุณจะใหญ่หรือเล็กแค่ไหน และพิกเซลข้างในคือพิกเซลต้นฉบับ ไม่ใช่ภาพตัวอย่างที่ถูกขยายกลับขึ้นมา

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

สิ่งที่เครื่องมือนี้ทำและไม่ทำ

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

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

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

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

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

รูปของฉันถูกอัปโหลดไปไหนไหม

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

ครอปตามขนาดพิกเซลที่ต้องการเป๊ะๆ ได้ไหม

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

ครอปแล้วคุณภาพลดลงไหม

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

ทำไมไฟล์กลับใหญ่ขึ้น

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

ข้อมูล EXIF จะเป็นอย่างไร

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