ขนาด featured image WordPress: 1200×630 + วิธีหาขนาดของธีม

คำตอบสั้นๆ: ถ้ายังไม่รู้ขนาดของธีม ให้ใช้ 1200 x 630 พิกเซล (ประมาณ 1.91:1) ซึ่งเป็นขนาดตัวอย่างลิงก์ที่ Facebook แนะนำ และปลั๊กอิน SEO มักใช้ featured image เป็นรูปสำหรับแชร์

ส่วนในตัวโพสต์ ขนาดที่สำคัญคือขนาดที่ธีมของคุณแสดง WordPress เก็บไฟล์ที่อัปโหลดแต่ละไฟล์ไว้หลายขนาด แล้วธีมจะเลือกว่าขนาดไหนแสดง ธีมแบบคลาสสิกกำหนดด้วย set_post_thumbnail_size() หรือ add_image_size() ส่วนธีมแบบบล็อกกำหนดในบล็อก Featured Image ถ้าธีมครอปเป็น 16:9 หรือสี่เหลี่ยมจัตุรัส รูป 1200 x 630 อาจเสียขอบซ้ายและขวาไปบางส่วน ให้หาขนาดของธีมก่อน (มีสี่วิธีด้านล่าง) แล้วอัปโหลดรูปที่ใหญ่อย่างน้อยเท่านั้น หรือกว้างประมาณสองเท่าเพื่อให้คมบนหน้าจอความหนาแน่นสูง

ถ้าอยากเห็นทุกขนาดที่ WordPress จะสร้างจากรูปใดรูปหนึ่ง ลองใส่รูปนั้นลงใน เครื่องมือดูขนาดรูปของ WordPress

ควรใช้ขนาดไหน ตามตำแหน่งที่รูปแสดง

ตำแหน่งที่รูปแสดง	ขนาดที่ควรอัปโหลด	หมายเหตุ
โพสต์ของคุณ ยังไม่รู้ขนาดของธีม	1200 x 630 หรือ 2400 x 1260 ถ้าต้องการให้คมกว่า	ใช้กับตัวอย่างลิงก์ได้ด้วยระหว่างที่คุณหาขนาดของธีม
โพสต์ของคุณ รู้ขนาดของธีมแล้ว	ประมาณสองเท่าของความกว้าง featured image ของธีม ในอัตราส่วนเดียวกัน	WordPress สร้างสำเนาที่เล็กกว่าจากไฟล์ที่อัปโหลด แต่ไม่เคยสร้างที่ใหญ่กว่า
ตัวอย่างลิงก์บน Facebook	อย่างน้อย 1200 x 630 (ประมาณ 1.91:1) ส่วน 1200 x 628 ก็สัดส่วนแทบเหมือนกัน	จาก แนวทางการแชร์ของ Facebook
Google Discover	กว้างอย่างน้อย 1200px อัตราส่วน 16:9 (เช่น 1200 x 675)	จาก แนวทาง Discover ของ Google

ขนาดรูปของ WordPress แบบสรุป

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

ชื่อขนาด	ขนาดเริ่มต้น	เปลี่ยนได้ใน Settings > Media ไหม?	หมายเหตุ
thumbnail	150 x 150 แบบครอป	ได้	มีช่องติ๊ก “crop to exact dimensions”
medium	สูงสุด 300 x 300	ได้	ย่อตามสัดส่วน
medium_large	กว้าง 768 ไม่จำกัดความสูง	ไม่ได้	ใช้หลักๆ ใน srcset
large	สูงสุด 1024 x 1024	ได้	ย่อตามสัดส่วน
1536x1536	สูงสุด 1536 x 1536	ไม่ได้	เพิ่มใน WordPress 5.3 สำหรับหน้าจอความหนาแน่นสูง
2048x2048	สูงสุด 2048 x 2048	ไม่ได้	เพิ่มใน WordPress 5.3 สำหรับหน้าจอความหนาแน่นสูง
post-thumbnail	ธีมเป็นผู้กำหนด	ไม่ได้	มีเฉพาะเมื่อธีมเรียก set_post_thumbnail_size()
full	ไฟล์ต้นฉบับที่คุณอัปโหลด	ไม่ได้	ไฟล์ใหญ่มากจะถูกย่อก่อน (ดูด้านล่าง)

“สูงสุด” หมายความว่า WordPress จะย่อรูปให้อยู่ในกรอบนั้นโดยคงสัดส่วนเดิมไว้ รูป 2000 x 1000 จะกลายเป็น 1024 x 512 ในขนาด large ไม่ใช่ 1024 x 1024

ธีมและปลั๊กอินมักเพิ่มขนาดอื่นๆ ด้วย add_image_size() เช่น WooCommerce เพิ่มขนาดรูปสินค้าของตัวเอง ซึ่งอธิบายไว้ใน คู่มือขนาดรูปสินค้า WooCommerce

มีอีกกฎหนึ่งที่มีผลกับไฟล์ใหญ่ ตั้งแต่ WordPress 5.3 ถ้ารูปกว้างหรือสูงเกิน 2560 พิกเซล WordPress จะย่อรูปลงและใช้สำเนาที่ย่อแล้วเป็นขนาดใหญ่ที่สุดที่มี ค่าขีดนี้มาจากฟิลเตอร์ big_image_size_threshold ซึ่งมีค่าเริ่มต้นเป็น 2560 ถ้าคุณเห็น -scaled ในชื่อไฟล์และอยากรู้ว่าควรปิดไหม อ่าน วิธีปิดรูป scaled ใน WordPress

ขนาด featured image มาจากไหนจริงๆ

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

ธีมแบบคลาสสิก

ธีมแบบคลาสสิกจะเปิดใช้ featured image และลงทะเบียนขนาดไว้ในไฟล์ functions.php ของธีม:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() ลงทะเบียนขนาดชื่อ post-thumbnail อาร์กิวเมนต์ที่สามควบคุมการครอป ถ้าเป็น false (ค่าเริ่มต้น) WordPress จะย่อรูปให้พอดีในกรอบ 1200 x 675 ถ้าเป็น true จะตัดรูปให้เป็น 1200 x 675 พอดีโดยยึดจากตรงกลาง ส่วนที่อยู่นอกกรอบ 16:9 จะหายไป คุณยังส่งอาร์เรย์อย่าง array( 'center', 'top' ) เพื่อเลือกว่าจะเก็บส่วนไหนไว้ก็ได้

หลายธีมลงทะเบียนขนาดเพิ่มเติมแบบมีชื่อสำหรับเทมเพลตต่างๆ:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

จากนั้นเทมเพลตจะเลือกใช้ตามชื่อ:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

ถ้าเรียก the_post_thumbnail() โดยไม่ใส่ชื่อ จะใช้ post-thumbnail ดังนั้นขนาด featured image จริงในธีมคลาสสิกคือขนาดที่ระบุในเทมเพลต และหน้ารวมบทความของบล็อกอาจใช้ขนาดต่างจากหน้าโพสต์เดี่ยว

ธีมแบบบล็อก

ธีมแบบบล็อก รวมถึง ธีมฟรีบนเว็บนี้ แสดง featured image ด้วยบล็อก Featured Image เอกสารอ้างอิงบล็อกของ core ระบุการตั้งค่าของบล็อกนี้ไว้ รวมถึง sizeSlug (จะโหลดขนาดที่ลงทะเบียนไว้ขนาดไหน) aspectRatio width height และ scale

นั่นทำให้จุดที่ต้องดูเปลี่ยนไป เปิด Appearance > Editor แก้ไขเทมเพลต Single Posts แล้วเลือกบล็อก Featured Image แถบด้านข้างจะบอกว่าบล็อกโหลดรูปขนาดไหนและตั้งอัตราส่วนไว้หรือไม่ อัตราส่วนนี้ใช้ในเบราว์เซอร์ด้วย CSS ไฟล์จึงยังเป็นไฟล์เดิม แต่กรอบที่มองเห็นเปลี่ยนไป ถ้าบล็อกกำหนดกรอบ 16:9 แต่รูปของคุณเป็นสี่เหลี่ยมจัตุรัส บางส่วนของรูปจะถูกซ่อน เทมเพลตหน้ารวมบทความและหน้าแรกอาจตั้งค่าต่างจากเทมเพลตโพสต์เดี่ยว ให้ตรวจทุกเทมเพลต

วิธีหาขนาด featured image ของธีมคุณ

ลองตามลำดับนี้ วิธีแรกที่ได้คำตอบก็พอแล้ว

1. ดูเอกสารของธีม ธีมที่ดีจะบอกขนาด featured image ที่แนะนำ ถ้ามีระบุไว้ ให้ใช้ขนาดนั้น

2. แสดงรายการขนาดที่ลงทะเบียนด้วย WP-CLI ถ้าคุณเข้า command line ได้ wp media image-size จะแสดงทุกขนาดที่ลงทะเบียนไว้ พร้อมความกว้าง ความสูง การตั้งค่าครอป และอัตราส่วน:

   wp media image-size

3. ค้นหาในไฟล์ธีม ในธีมคลาสสิก ให้ค้นใน functions.php (และไฟล์ที่มัน include) หา set_post_thumbnail_size และ add_image_size จากนั้นดูใน single.php หรือ template parts ว่าชื่อไหนถูกส่งให้ the_post_thumbnail() ในธีมแบบบล็อก ให้ตรวจบล็อก Featured Image ใน Site Editor ตามที่อธิบายไว้ข้างบน

4. ตรวจโพสต์ที่เผยแพร่แล้ว คลิกขวาที่ featured image เลือก Inspect แล้วอ่านชื่อไฟล์ใน src WordPress จะเติมขนาดไว้ในชื่อสำเนาที่ปรับขนาด ดังนั้น my-photo-1200x675.jpg แปลว่าธีมโหลดสำเนาขนาด 1200 x 675 ดู srcset ด้วย เพราะบนหน้าจอแคบเบราว์เซอร์อาจเลือกสำเนาที่เล็กกว่า ถ้าไม่มีขนาดในชื่อไฟล์ แปลว่าใช้ไฟล์ขนาดเต็ม

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

การเลือกขนาดไฟล์ที่จะอัปโหลด

เมื่อรู้ขนาดของธีมแล้ว มีสี่เรื่องที่ตัดสินว่าผลลัพธ์จะออกมาดีหรือไม่

• ความกว้าง อัปโหลดให้กว้างอย่างน้อยเท่าที่ธีมแสดง ถ้าต้องการความคมบนหน้าจอมือถือและแล็ปท็อปความหนาแน่นสูง ให้ตั้งเป้าประมาณสองเท่าของความกว้างนั้น ช่องกว้าง 1200px ก็คือ 2400px WordPress สร้างสำเนาที่เล็กกว่าจากไฟล์ของคุณและไม่เคยสร้างที่ใหญ่กว่า ต้นฉบับที่เล็กเกินไปจึงเป็นสาเหตุที่พบบ่อยที่สุดของ รูปเบลอหลังอัปโหลด
• อัตราส่วน ให้ตรงกับอัตราส่วนที่ธีมครอป ถ้าธีมครอปเป็น 16:9 ก็ให้รูป 16:9 และวางจุดสำคัญไว้ใกล้กลางภาพ เพื่อไม่ให้การครอปตายตัวตัดหัวคนหรือข้อความออก
• ขนาดไฟล์ รูปกว้าง 2400px ที่บันทึกเป็น JPEG คุณภาพพอเหมาะมักมีขนาดไม่กี่ร้อยกิโลไบต์ การอัปโหลดไฟล์จากกล้องกว้าง 6000px มีแต่เพิ่มงาน เพราะ WordPress จะย่อทุกอย่างที่เกิน 2560px อยู่แล้ว และพิกเซลส่วนเกินไม่เคยไปถึงผู้เข้าชม
• รูปแบบไฟล์ WordPress รองรับการอัปโหลด WebP ตั้งแต่เวอร์ชัน 5.8 และ AVIF ตั้งแต่ 6.5 ตราบใดที่ไลบรารีจัดการรูปบนเซิร์ฟเวอร์ของคุณรองรับ ทั้งสองแบบมักได้ไฟล์เล็กกว่า JPEG ที่คุณภาพใกล้เคียงกัน

รูปสำหรับแชร์บนโซเชียลเป็นอีกเรื่องหนึ่ง

เมื่อมีคนแชร์โพสต์ของคุณบน Facebook, LinkedIn หรือโซเชียลอื่นๆ ตัวอย่างลิงก์จะมาจากแท็ก og:image ซึ่งปลั๊กอิน SEO มักดึงมาจาก featured image เอกสารการแชร์ของ Facebook แนะนำรูปขนาดอย่างน้อย 1200 x 630 พิกเซล ให้ใกล้อัตราส่วน 1.91:1 มากที่สุด

คุณอาจเห็นคำแนะนำให้ใช้ 1200 x 628 ด้วย ขนาดนี้ได้ 1.91:1 เกือบพอดี ส่วน 1200 x 630 คิดออกมาได้ประมาณ 1.90:1 ทั้งสองขนาดต่างกันแค่ 2 พิกเซลในความสูง จะใช้แบบไหนก็ได้

ถ้าขนาดที่ธีมแสดงก็ใกล้ 1.91:1 เช่นกัน การอัปโหลดรูป 1200 x 630 (หรือ 2400 x 1260) รูปเดียวใช้ได้ทั้งสองแบบ ถ้าธีมครอปเป็น 16:9 หรือสี่เหลี่ยมจัตุรัส ให้วางเนื้อหาสำคัญห่างจากขอบซ้ายและขวา หรือตั้งรูปสำหรับโซเชียลแยกไว้ในปลั๊กอิน SEO

Google Discover มีคำแนะนำเรื่องรูปของตัวเอง แนวทาง Discover ของ Google แนะนำรูปที่กว้างอย่างน้อย 1200px มีพิกเซลรวมมากกว่า 300,000 พิกเซล และเป็นอัตราส่วน 16:9 เช่น 1200 x 675 รูปขนาดใหญ่ยังต้องมีการตั้งค่า robots max-image-preview:large ด้วย ซึ่ง WordPress ใส่ให้เป็นค่าเริ่มต้นตั้งแต่เวอร์ชัน 5.7 เว้นแต่เว็บจะเปิดตัวเลือก Discourage search engines from indexing this site ไว้

วิธีเปลี่ยนขนาด featured image

จะเปลี่ยนที่ไหนขึ้นอยู่กับว่าเป็นขนาดไหน และคุณใช้ธีมแบบใด

ขนาดของ core (thumbnail, medium, large) ไปที่ Settings > Media แล้วเปลี่ยนความกว้างและความสูง เอกสารหน้า Settings Media อธิบายแต่ละช่องไว้ รวมถึงช่องติ๊กครอปสำหรับ thumbnail

ขนาดของธีมในธีมคลาสสิก อย่าแก้ธีมหลัก (parent theme) เพราะการอัปเดตธีมจะเขียนทับสิ่งที่คุณแก้ ให้ใส่ค่าใหม่ใน functions.php ของ child theme การลงทะเบียนขนาดชื่อเดิมซ้ำจะแทนที่ขนาดเดิม และการตั้งค่าของ child theme ควรทำงานหลังของธีมหลัก:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

priority 11 ทำให้โค้ดนี้ทำงานหลังธีมหลักที่ hook ไว้ที่ priority เริ่มต้น 10 ตรวจโค้ดของธีมหลักและปรับค่า ถ้าธีมหลักใช้ priority ที่ช้ากว่านั้น

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

รูปเดียว ไม่ต้องใช้โค้ด ถ้าต้องการเลือกว่าการครอปจะเก็บส่วนไหนของรูปใดรูปหนึ่งไว้ ให้เปิดรูปจาก Media > Library แล้วคลิก Edit Image ครอปให้ตรงกับอัตราส่วนของธีม (เครื่องมือครอปรับอัตราส่วนอย่าง 16:9 ได้) หรือย่อขนาดรูป แล้วบันทึก WordPress จะใช้การเปลี่ยนแปลงนี้กับทุกขนาดของรูปนั้นและเก็บไฟล์ต้นฉบับไว้ คุณจึงกด Restore original image เพื่อย้อนกลับได้ภายหลัง

Regenerate thumbnails ที่มีอยู่

ขนาดที่เปลี่ยนจะมีผลกับไฟล์ที่อัปโหลดใหม่เท่านั้น รูปที่อยู่ใน media library แล้วยังใช้สำเนาเก่าจนกว่าคุณจะสร้างใหม่ คำสั่ง wp media regenerate ทำหน้าที่นี้:

wp media regenerate --yes

ตัวเลือกที่มีประโยชน์จากเอกสาร WP-CLI:

• --image_size=hero-wide สร้างใหม่เฉพาะขนาดนั้น ใส่แฟล็กซ้ำได้ถ้าต้องการหลายขนาด
• --only-missing สร้างเฉพาะขนาดที่ยังไม่มีและไม่แตะไฟล์ที่มีอยู่ ซึ่งเร็วกว่าหลังเพิ่มขนาดใหม่
• --skip-delete เก็บไฟล์ thumbnail เก่าไว้ ใช้เมื่อมีเว็บอื่น จดหมายข่าว หรือฟีดลิงก์ตรงมาที่ไฟล์เหล่านั้น

ถ้าไม่มีสิทธิ์เข้า command line ปลั๊กอิน Regenerate Thumbnails จากคลังปลั๊กอินของ WordPress.org ทำแบบเดียวกันได้จากแดชบอร์ด ถ้า media library ใหญ่ ให้สำรองข้อมูลก่อน เพราะการ regenerate จะเขียนไฟล์ใหม่จำนวนมาก

ข้อผิดพลาดที่พบบ่อย

• หยุดอยู่ที่ 1200 x 630 ขนาดนี้เป็นจุดเริ่มต้นที่ดีและเหมาะกับตัวอย่างลิงก์ แต่ถ้าธีมของคุณครอปเป็น 16:9 หรือสี่เหลี่ยมจัตุรัส รูปบางส่วนจะถูกตัด ตรวจขนาดของธีมก่อนอัปโหลดทีละหลายรูป
• ปิดการสร้างขนาดต่างๆ เพื่อ “เก็บต้นฉบับไว้” ถ้าธีมไม่มีสำเนาที่เล็กกว่า ก็อาจโหลดไฟล์เต็มบนทุกหน้าจอ ทำให้หน้าเว็บช้าบนมือถือ สำเนาที่ปรับขนาดมีไว้เพื่อป้องกันเรื่องนี้
• แก้โค้ดขนาดรูปแต่ไม่ regenerate โค้ดใช้งานได้ แต่เฉพาะไฟล์ที่อัปโหลดใหม่ นี่คือเหตุผลที่หลายคนสรุปว่าการเปลี่ยนขนาด “ไม่มีผลอะไร”
• เปลี่ยนขนาดในธีมหลัก การอัปเดตธีมครั้งถัดไปจะลบสิ่งที่แก้ ให้ใช้ child theme หรือ Site Editor

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