บทเรียน 05 — เติมรูปจริงในการ์ด พร้อมเครดิตภาพและสัดส่วนมือถือ

เวอร์ชันแรกของการ์ดสถานที่เป็นภาพบรรยากาศจาก GPT Image บทนี้เปลี่ยนเป็น ภาพจริงของสถานที่ ทั้ง 20 การ์ด — พร้อมสิ่งที่หลายคนลืม: เครดิตภาพ และสัดส่วนภาพที่สม่ำเสมอจนหน้าไม่เบี้ยว

เป้าหมายของบทนี้: อัปเกรดหน้าเว็บจาก “สวย” เป็น “น่าเชื่อ” ด้วยภาพจริง โดยไม่ทำลายระบบค้นหาเดิม

Prompt ที่ใช้

ปรับปรุง card ใน section ที่เที่ยวใกล้ภูเก็ต ที่อยากชวนไป อยากให้เพิ่มรูปใน card ด้วย.

สังเกตว่าไม่ได้สั่ง “ใช้รูปจริง + ใส่เครดิต + คุมสัดส่วน” เลย — สามอย่างนี้คือมาตรฐานที่ agent เลือกทำเอง ซึ่งเป็นเรื่องดี แต่เราต้องตรวจว่ามันทำจริง (ดูวิธีตรวจท้ายบท)

ผลลัพธ์

agent ทำงาน 13 นาที 28 วินาที แก้ไฟล์ 12 ไฟล์ (+427 บรรทัด) แล้วสรุปว่า:

• เพิ่มภาพจริงครบทั้ง 20 การ์ด
• ใส่เครดิตภาพให้ผู้ถ่าย/แหล่งภาพ
• คุมสัดส่วนภาพให้สม่ำเสมอ หน้าเว็บเรียงสวย
• เพิ่มภาพขนาดเหมาะกับมือถือ (ไฟล์เล็กลงเพื่อโหลดเร็ว)
• คงระบบค้นหาเดิมไว้ทั้งหมด

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

วิธีตรวจงานภาพแบบมืออาชีพ

ข้อควรระวังและบทเรียน

• สิทธิ์การใช้ภาพเป็นความรับผิดชอบของเจ้าของเว็บ — agent ใส่เครดิตให้ แต่เราควรยืนยันว่าภาพอนุญาตให้ใช้จริง (สัญญาอนุญาตของแหล่งภาพ) ก่อนเว็บไปเป็นสาธารณะ
• สั่งน้อยได้มาก แต่ต้องตรวจมากขึ้นตาม — เราสั่งแค่ “เพิ่มรูปใน card” แต่ได้เครดิตและ responsive image มาแนบ พฤติกรรมแบบนี้ดี แต่ต้องเปิดผลจริงทุกครั้ง ไม่สมมติว่า “น่าจะทำ”
• การกล่าวว่า “คงระบบเดิมไว้” ต้องพิสูจน์ — คำกล่าวของ agent ไม่ใช่หลักฐาน เราทดสอบค้นหาซ้ำตามบท 04 เพื่อยืนยันเอง

ต่อไป: บท 06 — deploy ขึ้น Cloudflare ด้วย API token