วิธีตั้งค่ารูปภาพ WordPress อย่างถูกต้อง

ที่เมนู Media Settings จะให้เราตั้งค่า Image sizes ได้ ปัญหาคือ จะตั้งแบบไหนดี เพราะมีทั้ง 4:3, 16:9, 21:9 ฯลฯ เยอะไปหมด

ใช้ในเว็บไม่เท่าไหร่ ต้องคิดเผื่อ x, facebook, ig, tiktok, youtube อีกหลายเจ้า เพราะบางทีแม่มดึงไปทำเป็นภาพปก crop ซะภาพเพี้ยนไปเลย คิดไปคิดมาลองแบบนี้ดีกว่า

ภาพใหญ่ Original

ภาพ Original ในที่นี้ผมหมายถึงรูปภาพที่เราจะทำการ upload ขึ้นไปใช้งาน ผมใช้ Aspect Ratio 16:9 คือ 1920px * 1080px ไปเลยไม่ต้องไปปวดหัว

ถ้าใช้ 16:9 จะมีปัญหามั๊ย เวลาที่เรา share link ไปที่ facebook ?

facebook จะแนะนำที่ขนาด 1200 x 628 px หรือ scale ในอัตราส่วน 1.91:1

เมื่อในเว็บเราใช้ 16:9 พอ facebook จะเอาไปใช้งาน facebook จะทำการ “crop ด้านบนและด้านล่าง” (แนวตั้ง) ออกเอง เพื่อแปลงจาก 16:9 (1.78:1) เป็น 1.91:1

เราแค่ออกแบบรูปให้เผื่อถูก crop ออกไว้ด้วยก็ได้ ทั้งด้านบนล่าง และด้านข้าง ด้านละนิดหน่อยก็พอ

ถ้าใช้แนวทางที่ผมว่ามา ใน Media Settings ตั้งค่าตามนี้ได้เลย

Thumbnail size

เว็บผมช่องเล็กสุดจะใช้ขนาด 210px ไม่ติ๊ก Crop เพราะอยากให้มัน resize ย่อขนาดเฉยๆ ส่วนนี้ต้องดูแนวทางการออกแบบ Theme ด้วยว่าส่วนของการแสดงผล Thumbnail แสดงผลกันขนาดเท่าไหร่

Crop Thumbnail size

แต่ถ้าใครอยากจะให้ program ตัดภาพตามสัดส่วน ก็กำหนดขนาดที่ต้องการ

เช่น Width 210px Height 180px และติ๊กช่อง Crop เมื่อเรา upload รูปภาพเข้าไป รูปจะถูกย่อและตัดตามขนาดที่เราตั้งไว้เป๊ะๆ

Medium size

ตั้งค่าไว้ 480px เอาไว้ใช้กับหน้าจอมือถือทั่วๆ ไป ซึ่ง iPhone 15 Pro Max น่าจะกว้างที่สุดของค่ายนี้ก็แค่ 430px (ถ้าวัดแบบ CSS width) ส่วนความสูง Max Height 932 ก็เอาไว้ดัก iPhone แบบพอดีเหมือนกัน

Large size

ให้ 1024px เอาไว้ใช้กับหน้าจอใหญ่ๆ อย่าง จอคอม หรือพวก Tablet

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

วิธีตั้งค่ารูปภาพใหม่ที่ถูกต้อง

สำหรับใครที่มีความจำเป็นต้องปรับขนาดรูปภาพ เช่น เปลี่ยน Theme ฯลฯ ปัญหา คือ รูปภาพที่เก่าๆ มันไม่ปรับขนาดตามเพราะมันถูก generate ไว้ตามการตั้งค่าชุดเก่า เราต้องทำการ generate รูปภาพใหม่ทั้งเว็บ ด้วย Plugin: Regenerate Thumbnails พอเราทำการ regenerate thumbnail เสร็จ รูปภาพเก่าๆ ก็จะได้สัดส่วนตามที่เราตั้งค่าใหม่ไว้ครับ