[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"blog-th-image-resize-crop-aspect-ratio-composition-guide":3},{"slug":4,"locale":5,"title":6,"description":7,"date":8,"author":9,"tags":10,"keywords":15,"h1":16,"readingTime":17,"html":18,"recommendedTools":19,"faqs":26},"image-resize-crop-aspect-ratio-composition-guide","th","ขนาดภาพกับองค์ประกอบ: อัตราส่วน การครอป และพื้นที่ว่าง","แยกขนาดพิกเซลออกจากอัตราส่วนภาพ เปรียบเทียบการครอป เติมพื้นที่ว่าง และยืดภาพ พร้อมวิธีตรวจองค์ประกอบก่อนส่งออก","2026-09-15","DocCrunch Team",[11,12,13,14],"ปรับขนาดภาพ","ครอปภาพ","อัตราส่วนภาพ","องค์ประกอบภาพ",[11,12,13,14],"ขนาดภาพถูกต้องแล้ว ทำไมองค์ประกอบยังดูไม่ลงตัว?",5,"\u003Cp>เมื่อเปลี่ยนภาพแนวนอนให้เป็น 800×800 พิกเซล คนในภาพอาจดูแคบลง ขอบซ้ายขวาอาจถูกตัด หรืออาจมีพื้นที่ว่างด้านบนและด้านล่าง\u003C\u002Fp>\n\u003Cp>ผลลัพธ์มีขนาดเท่ากัน แต่เก็บเนื้อหาไว้ต่างกัน การกำหนดขนาดปลายทางไม่ได้บอกว่าจะวางภาพต้นฉบับลงในกรอบอย่างไร จึงควรเลือกอัตราส่วนและบริเวณที่ต้องการเก็บก่อนกรอกความกว้างและความสูง\u003C\u002Fp>\n\u003Ch2>ขนาดพิกเซลกับอัตราส่วนภาพเป็นคนละเรื่อง\u003C\u002Fh2>\n\u003Cp>ขนาดพิกเซลบอกความกว้างและความสูง ส่วนอัตราส่วนบอกความสัมพันธ์ของทั้งสองค่า ภาพ 1200×800 และ 600×400 ต่างมีอัตราส่วน 3:2 การย่อโดยรักษาสัดส่วนจึงเก็บขอบเขตภาพเดิมได้\u003C\u002Fp>\n\u003Cp>800×800 มีอัตราส่วน 1:1 หากเปลี่ยนภาพ 3:2 เป็นสี่เหลี่ยมจัตุรัส จะไม่สามารถทำทั้งสามข้อนี้พร้อมกันได้:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>เก็บภาพไว้ทั้งหมด\u003C\u002Fli>\n\u003Cli>รักษารูปร่างเดิมของวัตถุ\u003C\u002Fli>\n\u003Cli>เติมเต็มกรอบสี่เหลี่ยมโดยไม่มีพื้นที่ว่าง\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>การครอป การเติมพื้นที่ว่าง และการยืดภาพ จึงมีข้อแลกเปลี่ยนต่างกัน\u003C\u002Fp>\n\u003Ch2>การครอป เติมพื้นที่ว่าง และยืดภาพเปลี่ยนอะไรบ้าง\u003C\u002Fh2>\n\u003Cp>สมมติว่าต้องเปลี่ยนภาพ 1200×800 ให้เป็น 800×800:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>วิธี\u003C\u002Fth>\n\u003Cth>วิธีสร้างภาพสี่เหลี่ยมจัตุรัส\u003C\u002Fth>\n\u003Cth>ผลกระทบหลัก\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>ปรับขนาดตามสัดส่วนแล้วครอป\u003C\u002Ftd>\n\u003Ctd>เติมเต็มกรอบและตัดส่วนที่เกิน\u003C\u002Ftd>\n\u003Ctd>รูปร่างคงเดิม แต่เนื้อหาบางส่วนหายไป\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>ปรับขนาดตามสัดส่วนแล้วเติมพื้นที่ว่าง\u003C\u002Ftd>\n\u003Ctd>ใส่ภาพทั้งหมดในผืนภาพและเติมพื้นหลัง\u003C\u002Ftd>\n\u003Ctd>เก็บเนื้อหาครบ แต่มีพื้นที่ว่าง\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>ยืดภาพโดยตรง\u003C\u002Ftd>\n\u003Ctd>ปรับความกว้างและความสูงแยกกัน\u003C\u002Ftd>\n\u003Ctd>เก็บขอบเขตภาพครบ แต่วัตถุอาจผิดรูป\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>การครอปจากตรงกลางสามารถเก็บพื้นที่ 800×800 และตัดด้านซ้ายกับขวาด้านละ 200 พิกเซล หากต้องการเก็บภาพทั้งหมด เมื่อย่อความกว้างเป็น 800 ความสูงจะอยู่ที่ประมาณ 533 พิกเซล และต้องเติมพื้นหลังในพื้นที่ที่เหลือ\u003C\u002Fp>\n\u003Cp>หากลดความกว้างแต่คงความสูงไว้ วงกลมอาจกลายเป็นวงรี แม้ขนาดปลายทางจะถูกต้อง แต่สัดส่วนของเนื้อหาเปลี่ยนไปแล้ว\u003C\u002Fp>\n\u003Ch2>กึ่งกลางภาพไม่จำเป็นต้องเป็นกึ่งกลางของตัวแบบ\u003C\u002Fh2>\n\u003Cp>การครอปจากกึ่งกลางมีกฎชัดเจนและสะดวกสำหรับหลายไฟล์ แต่ไม่ได้ระบุว่าเนื้อหาส่วนใดสำคัญ ตัวแบบใกล้ขอบ ข้อความตรงมุม หรือคนที่อยู่สองด้านอาจถูกตัด แม้ตัวแบบยังอยู่ครบ ความสัมพันธ์กับพื้นที่รอบข้างก็อาจเปลี่ยน\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fth\u002Fimage-resize\u002F\">เครื่องมือปรับขนาดภาพ DocCrunch\u003C\u002Fa> มีตัวเลือกครอปและยืดภาพในโหมดกำหนดความกว้างและความสูงตายตัว การครอปจะรักษาสัดส่วนให้เต็มกรอบแล้วเก็บบริเวณกึ่งกลาง ไม่ได้ตรวจจับตำแหน่งตัวแบบอัตโนมัติ\u003C\u002Fp>\n\u003Cp>หากต้องการควบคุมส่วนที่เก็บ ให้ใช้\u003Ca href=\"\u002Fth\u002Fimage-crop\u002F\">เครื่องมือครอปภาพ\u003C\u002Fa> เลือกอัตราส่วนและปรับพื้นที่ด้วยตนเองก่อน แล้วจึงกำหนดขนาดส่งออก\u003C\u002Fp>\n\u003Cp>การครอปเป็น 1:1 หมายถึงภาพเป็นสี่เหลี่ยมจัตุรัส ไม่ได้หมายความว่าภาพมีขนาด 800×800 พิกเซลแล้ว\u003C\u002Fp>\n\u003Ch2>หากจำกัดเพียงด้านเดียว ไม่ต้องกำหนดทั้งสองด้าน\u003C\u002Fh2>\n\u003Cp>บางข้อกำหนดระบุเพียงความกว้าง 1200 พิกเซล หรือความยาวสูงสุดของด้านยาว อีกด้านจึงคำนวณตามสัดส่วนได้ เพื่อหลีกเลี่ยงการตัดหรือบิดรูปโดยไม่จำเป็น\u003C\u002Fp>\n\u003Cp>เมื่อกำหนดด้านยาวเป็น 1200 พิกเซล:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>ภาพแนวนอน 3:2 จะเป็น 1200×800\u003C\u002Fli>\n\u003Cli>ภาพแนวตั้ง 2:3 จะเป็น 800×1200\u003C\u002Fli>\n\u003Cli>ภาพสี่เหลี่ยมจัตุรัสจะเป็น 1200×1200\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ขนาดต่างกันแต่เป็นไปตามกฎเดียวกัน \u003Ca href=\"\u002Fth\u002Fimage-resize\u002F\">เครื่องมือปรับขนาด\u003C\u002Fa> รองรับความกว้าง ความสูง ด้านยาว ด้านสั้น และเปอร์เซ็นต์ ควรเลือกตามข้อกำหนดจริงของผู้รับ\u003C\u002Fp>\n\u003Ch2>ตรวจขอบของทุกภาพหลังประมวลผลเป็นชุด\u003C\u002Fh2>\n\u003Cp>ภาพในชุดเดียวกันอาจมีทั้งแนวนอน แนวตั้ง และสี่เหลี่ยมจัตุรัส โดยตัวแบบอยู่คนละตำแหน่ง ขนาดส่งออกที่เหมือนกันไม่ได้ทำให้ทุกภาพครอปได้เหมาะสม ควรตรวจว่า:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>ศีรษะด้านบน มือ และเท้าถูกตัดหรือไม่\u003C\u002Fli>\n\u003Cli>ขอบสินค้า หูจับ และส่วนที่ยื่นออกมายังอยู่ครบหรือไม่\u003C\u002Fli>\n\u003Cli>ข้อความ โลโก้ และหมายเลขตรงมุมยังมองเห็นหรือไม่\u003C\u002Fli>\n\u003Cli>มีพื้นที่ด้านหน้าตัวแบบหรือตามทิศทางสายตาเหลืออยู่หรือไม่\u003C\u002Fli>\n\u003Cli>ขนาดตัวแบบระหว่างภาพต่างกันมากเกินไปหรือไม่\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>หากเนื้อหาที่จำเป็นไม่พอดีกับอัตราส่วนเป้าหมาย ต้องจัดองค์ประกอบใหม่ เลือกต้นฉบับอื่น หรือเติมพื้นที่ว่างด้วยโปรแกรมที่ขยายผืนภาพได้ การย่อภาพทั้งหมดอย่างเดียวไม่สามารถทำให้เต็มกรอบและเก็บทุกส่วนไว้พร้อมกัน\u003C\u002Fp>\n\u003Ch2>ตรวจขนาดไฟล์หลังจากยืนยันขนาดภาพ\u003C\u002Fh2>\n\u003Cp>800×800 บอกจำนวนพิกเซล ไม่ได้รับประกันว่าจะผ่านข้อจำกัด KB หรือ MB รูปแบบไฟล์ เนื้อหา และคุณภาพการเข้ารหัสทำให้ไฟล์ที่มีขนาดภาพเท่ากันมีความจุต่างกันมากได้\u003C\u002Fp>\n\u003Cp>ลำดับที่ใช้งานได้คือ:\u003C\u002Fp>\n\u003Col>\n\u003Cli>ตรวจว่ากำหนดทั้งความกว้างและความสูง หรือจำกัดเพียงด้านเดียว\u003C\u002Fli>\n\u003Cli>เปรียบเทียบอัตราส่วนต้นฉบับกับเป้าหมาย\u003C\u002Fli>\n\u003Cli>เลือกครอป เติมพื้นที่ว่าง หรือยอมให้รูปทรงเปลี่ยนตามที่อนุญาต\u003C\u002Fli>\n\u003Cli>ตรวจตัวแบบและขอบภาพ แล้วสร้างขนาดสุดท้าย\u003C\u002Fli>\n\u003Cli>ตรวจรูปแบบและขนาดไฟล์ พร้อมบีบอัดเมื่อจำเป็น\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>หากขนาดพิกเซลเหมาะสมแล้วแต่ไฟล์ยังใหญ่ ใช้\u003Ca href=\"\u002Fth\u002Fimage-compress\u002F\">การบีบอัดภาพ\u003C\u002Fa> เพื่อลดขนาดไฟล์ได้โดยไม่ต้องย่อภาพต่อ\u003C\u002Fp>\n\u003Cp>ผลลัพธ์ที่เหมาะสมควรรักษารูปร่างวัตถุ เก็บเนื้อหาที่จำเป็น และดูครบถ้วนเมื่อแสดงจริง ควรตัดสินใจก่อนว่าภาพจะอยู่ในกรอบอย่างไร แล้วจึงกำหนดจำนวนพิกเซลปลายทาง\u003C\u002Fp>\n",[20,22,24],{"slug":21},"image-resize",{"slug":23},"image-crop",{"slug":25},"image-compress",[],1789443237595]