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

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

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

## Prompt ที่ใช้

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

![ภาพ capture ของ prompt ขอเพิ่มรูปในการ์ด](/images/step6-card-images-prompt.webp)

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

## ผลลัพธ์

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

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

![ภาพ capture ของสรุปผลงานเพิ่มภาพจริงในการ์ด](/images/step6-card-images-result1.webp)

![ภาพ capture ของหน้าเว็บที่การ์ดมีรูปภาพจริงแล้ว](/images/step6-card-images-result2.webp)

![การ์ดสถานที่บนมือถือ แต่ละใบมีรูปเต็มความกว้าง ป้ายประเภท หมุดจังหวัด และลิงก์ “เครดิตภาพ”](/images/site-mobile-cards.webp)

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

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

| ตรวจอะไร | ทำอย่างไร | สัญญาณว่ามีปัญหา |
| --- | --- | --- |
| ครบ 20 การ์ด | เลื่อนดูทุกการ์ด หรือดูตัวนับผลลัพธ์ | การ์ดใดยังเป็นภาพ placeholder หรือภาพซ้ำกัน |
| เครดิตภาพ | กาง “เครดิตภาพ” ของการ์ดที่พอใจ 2–3 ใบ | ไม่มีลิงก์เครดิต หรือเครดิตว่างเปล่า |
| สัดส่วนสม่ำเสมอ | มองระยะไกลหน้าเว็บ แล้วลองย่อหน้าต่างเท่าจอมือถือ | การ์ดสูงต่ำไม่เท่ากัน ภาพถูกยืดบิดเบี้ยว |
| ความเร็วโหลด | รีเฟรชบนมือถือหรือโหมดช้า (throttle) | ภาพโหลดนานจนหน้ากระตุก |
| ระบบค้นหายังใช้ได้ | ค้น “เกาะ” และกรองจังหวัดตามบท 04 | ผลลัพธ์หาย หรือการ์ดภาพใหม่ไม่ขึ้นตามค้นหา |

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

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

ต่อไป: [บท 06 — สร้าง Cloudflare API token แบบกำหนดสิทธิ์เฉพาะงาน](06-create-cloudflare-token.md)