featured image ใน WordPress ควรมีขนาดเท่าไหร่?

ตัวเลขที่คนส่วนใหญ่อยากได้คือ 1200 x 630 พิกเซล นั่นคืออัตราส่วนที่ Facebook, LinkedIn และ X ใช้แสดงตัวอย่างลิงก์ (1.91:1) และเป็นขนาดที่ภาพ Open Graph ควรจะเป็น ถ้าคุณตั้ง featured image เพื่อให้ลิงก์ที่แชร์ออกไปแสดงผลถูกต้องเป็นหลัก ก็ใช้ 1200 x 630 แล้วจบแค่นั้นได้เลย

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

ทำไมธีมถึงเขียนทับตัวเลขนั้น

เวลาคุณอัพโหลดรูป WordPress ไม่ได้เก็บไฟล์เดียว มันจะรัน wp_generate_attachment_metadata() และสร้างไฟล์แยกสำหรับทุกขนาดรูปที่ลงทะเบียนไว้ ได้แก่ ค่าเริ่มต้นสามขนาด (thumbnail, medium, large), ขนาด medium_large ของ block editor (กว้าง 768px) รวมถึงทุกขนาดที่ธีมหรือปลั๊กอิน wordpress ลงทะเบียนไว้ด้วย add_image_size()

ธีมที่ต้องการ hero แบบกว้างอัตราส่วน 16:9 มักจะเขียนแบบนี้ใน functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

อาร์กิวเมนต์ตัวที่สี่ true หมายถึง hard crop WordPress จะครอปรูปของคุณให้ได้ขนาด 1200 x 675 พอดี โดยตัดส่วนที่ไม่พอดีกับกรอบ 16:9 ทิ้งไป ถ้าตัวแบบอยู่ใกล้ขอบบนหรือขอบล่างของเฟรม มันจะถูกตัดออก ถ้าตั้งเป็น false (หรือละไว้) มันจะย่อตามสัดส่วน และขนาดสุดท้ายอาจต่างจากที่คุณกำหนดไว้

จากนั้นเทมเพลตจะเป็นตัวตัดสินว่าจะดึงขนาดไหนมาใช้:

the_post_thumbnail( 'hero-featured' );

ชื่อที่ส่งเข้าไปใน the_post_thumbnail() คือขนาดครอปที่จะแสดงผล ดังนั้นขนาด featured image จริงบนเว็บของคุณจึงถูกกำหนดไว้สองที่ที่คุณไม่ได้เขียนเอง คือการเรียก add_image_size() และการเรียก the_post_thumbnail() ในธีม การอัพโหลดไฟล์ที่ใหญ่ขึ้นไม่ได้ไปเปลี่ยนอะไรทั้งสองอย่างนี้

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

วิธีแก้ ทำตามลำดับ

1. หาให้เจอว่าธีมของคุณเรียกขนาดไหนจริง ๆ ก่อนจะเดา ให้ดูทุกขนาดที่ WordPress สร้างจากรูปของคุณ และดูว่าตัวไหนคือ hero ที่ถูกครอป ลองวางรูปของคุณลงใน เครื่องมือดูขนาดรูป WordPress — มันจะแสดงทุกไฟล์ที่ WP จะสร้างขึ้น พร้อมขนาดพิกเซลที่แน่นอน คุณจะได้จับคู่ต้นฉบับกับเป้าหมายจริง แทนที่จะยึดกับ 1200x630 ที่เป็นแค่ตำนาน

2. อัพโหลดให้ใหญ่พอที่จะครอบคลุมขนาดครอปที่ใหญ่ที่สุด ถ้า hero ของธีมคือ 1200 x 675 ให้อัพโหลดอย่างน้อยเท่านั้น และถ้าเป็นไปได้ให้ 2 เท่าเผื่อจอ retina (2400 x 1350) WordPress ย่อภาพได้เนียน แต่มันไม่เคยขยายภาพให้ใหญ่ขึ้น ต้นฉบับที่เล็กเกินไปคือสาเหตุที่พบบ่อยที่สุดของ featured image ที่เบลอ

3. จับอัตราส่วนภาพของคุณให้ตรงกับครอปของธีม ถ้าธีม hard-crop เป็น 16:9 ก็ป้อนภาพ 16:9 ให้มัน จัดองค์ประกอบให้ตัวแบบอยู่ตรงกลาง เพื่อไม่ให้ hard crop ตัดหัวใครขาด

4. ถ้าขนาดที่ลงทะเบียนไว้ผิด ให้แก้แล้ว regenerate แก้ค่าใน add_image_size() ที่ child theme แล้วสร้าง thumbnail เดิมขึ้นใหม่ — ขนาดใหม่จะมีผลกับรูปที่อัพโหลดในอนาคตเท่านั้น จนกว่าคุณจะรัน:

wp media regenerate --yes

ไม่มี WP-CLI? ปลั๊กอิน wordpress อย่าง Regenerate Thumbnails ทำหน้าที่เดียวกันได้จากหน้าแดชบอร์ด

สิ่งที่ไม่ควรทำ

อย่าเพียงแค่อัพโหลดรูป 1200x630 แล้วคิดว่าจัดการเรียบร้อยแล้ว ถ้าขนาดที่ธีมลงทะเบียนไว้คือ 16:9 WordPress จะ hard-crop ภาพ 1.91:1 ของคุณ แล้วคุณก็จะเสียส่วนบนและส่วนล่างไป ตัวเลขของ Open Graph กับตัวเลขที่แสดงผลเป็นคนละหน้าที่กัน

อย่าปิดการทำงานของขนาดรูป WordPress เพื่อ “เก็บต้นฉบับไว้” หลายคนไปเจอคำแนะนำให้ตั้งขนาดกลาง ๆ เป็น 0 หรือถอด the_post_thumbnail ออก แล้วธีมก็จะย้อนไปส่งไฟล์ขนาดเต็มมาย่อในเบราว์เซอร์แทน — JPEG 4000px ที่ถูกส่งไปยังมือถือ นั่นทำให้เวลาโหลดและ Core Web Vitals ของคุณพังยับ ไฟล์แยกพวกนั้นมีอยู่ด้วยเหตุผลของมัน

อย่าเชื่อ “ขนาดที่แนะนำ” ของปลั๊กอินมากกว่าขนาดที่ธีมลงทะเบียนไว้จริง ปลั๊กอิน SEO แนะนำ 1200x630 สำหรับ OG tag ซึ่งถูกต้องสำหรับ tag นั้น แต่มันไม่ได้บอกอะไรเลยเกี่ยวกับสิ่งที่เทมเพลตหน้าโพสต์เดี่ยวของคุณครอป

อย่าข้าม wp media regenerate หลังจากเปลี่ยนขนาด การแก้ add_image_size() ไม่มีผลอะไรกับรูปที่อัพโหลดไปแล้ว นี่คือขั้นตอนที่คนมักลืม แล้วก็สรุปเอาว่าโค้ดไม่ทำงาน

ยังติดอยู่?

ถ้ารูปยังผิดอยู่หลังจากจับขนาดให้ตรงและ regenerate แล้ว ปัญหามักอยู่ที่โหมดการครอป (true เทียบกับ false) หรือ srcset ที่ส่งไฟล์เล็กกว่าที่คุณคาดไว้ ลองวางไฟล์ลงใน เครื่องมือดูขนาดรูป เพื่อดูว่าการตั้งค่าของคุณสร้างครอปแบบไหนออกมาบ้าง แล้วเทียบกับสิ่งที่เบราว์เซอร์กำลังโหลดใน DevTools จับสองอย่างนี้ให้ตรงกัน แล้วการเดาสุ่มก็จะจบลง