การปรับแต่งรูปภาพเพื่อความเร็วเว็บไซต์: คู่มือฉบับสมบูรณ์

รูปภาพ = ประมาณ 50% ของน้ำหนักหน้าเว็บ การปรับแต่งรูปภาพคือการเพิ่มประสิทธิภาพที่ใหญ่ที่สุดที่คุณทำได้

---

ทำไมต้องปรับแต่งรูปภาพ?

• 53% ของผู้ใช้ mobile ออกจากเว็บไซต์ถ้าโหลดนานกว่า 3 วินาที
• ความล่าช้า 1 วินาที = Conversion ลดลง 7%
• Core Web Vitals (LCP, CLS) ส่งผลโดยตรงต่ออันดับ Google

---

ขั้นตอนที่ 1: เลือกรูปแบบไฟล์ที่ถูกต้อง

• WebP — ดีที่สุดสำหรับรูปภาพเว็บทุกประเภท (เล็กกว่า JPEG 25–35%)
• PNG — พื้นหลังโปร่งใส โลโก้ ภาพหน้าจอ
• JPEG — รูปถ่ายเมื่อไม่มี WebP
• SVG — ไอคอนและโลโก้
• AVIF — รุ่นถัดไป ใช้ร่วมกับ fallback WebP

---

ขั้นตอนที่ 2: บีบอัด

ใช้ TinyImg — ฟรี เป็นส่วนตัว รวดเร็ว

---

ขั้นตอนที่ 3: รูปภาพ Responsive

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

---

ขั้นตอนที่ 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

อย่า lazy-load รูปภาพที่อยู่ด้านบนหน้าจอ ตั้งค่า width/height เสมอ

---

ขั้นตอนที่ 5: ขนาดรูปภาพ

<img src="photo.webp" alt="Photo" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

ขั้นตอนที่ 6: ใช้ CDN

Cloudflare (แพ็กเกจฟรี), Cloudinary, imgix, Vercel

---

ขั้นตอนที่ 7: วัดประสิทธิภาพ

• เป้าหมาย LCP: ต่ำกว่า 2.5 วินาที
• เป้าหมาย CLS: ต่ำกว่า 0.1
• รูปภาพรวมทั้งหมด: ต่ำกว่า 500KB

เครื่องมือ: PageSpeed Insights, Lighthouse, WebPageTest

---

เช็กลิสต์การปรับแต่ง

• รูปแบบ WebP
• บีบอัดด้วย TinyImg
• srcset + sizes
• Lazy load เฉพาะรูปภาพด้านล่างหน้าจอ
• width + height ทุกรูปภาพ
• เปิดใช้ CDN
• ตรวจสอบ PageSpeed Insights

TinyImg — เริ่มที่นี่ ฟรีทั้งหมด