นามสกุลไฟล์ภาพสำหรับ SaaS: คู่มือฉบับเต็มปี 2025

การเลือกฟอร์แมตภาพที่ผิดทำให้เว็บช้า ใช้แบนด์วิธสูง และแก้ไขยาก คู่มือนี้แบ่ง use case พร้อมแนะนำว่าควรใช้ JPEG, PNG, WebP หรือ SVG เมื่อไร พร้อมตัวอย่างโค้ดให้ทั้ง React และ Next.js

เหตุผลที่ต้องใส่ใจฟอร์แมต

• Performance: ไฟล์เล็กโหลดเร็ว Core Web Vitals ดีขึ้น
• ค่าใช้จ่าย: ลด data transfer/CDN
• ประสบการณ์ผู้ใช้: ภาพชัด คม ดูมืออาชีพ

ฟอร์แมตหลัก 4 แบบ

JPEG

• ใช้กับรูปถ่าย/gradient
• นามสกุล .jpg/.jpeg นำไปบีบอัดแบบ lossy
• ไม่มี transparency/animation
• ตั้งคุณภาพ 75-85% สำหรับเว็บ

React avatar ตัวอย่าง

function UserAvatar({ userId, size = 'medium' }) {
  const map = { small: '32', medium: '64', large: '128' };
  return (
    <img
      src={`/api/users/${userId}/avatar.jpg?size=${map[size]}`}
      alt="avatar"
      width={map[size]}
      height={map[size]}
      loading="lazy"
    />
  );
}

PNG

• เหมาะกับโลโก้ UI หรือภาพที่ต้องโปร่งใส
• PNG-8 ใช้ได้ถึง 256 สี / PNG-24 รองรับสีเต็ม
• ไม่สูญเสียข้อมูล (lossless)

ตัวอย่าง Next.js

import Image from 'next/image';

function CompanyLogo({ variant = 'light' }) {
  return (
    <Image
      src={`/images/logo-${variant}.png`}
      alt="logo"
      width={180}
      height={60}
      priority
    />
  );
}

WebP

• ทั้ง lossy/lossless + transparency/animation ได้ในไฟล์เดียว
• ไฟล์เล็กกว่า JPEG 25-35%
• เบราว์เซอร์ใหม่รองรับเกือบทั้งหมด

กลยุทธ์: ใช้ <picture> มี WebP + fallback JPEG

SVG

• Vector สเกลได้ไม่จำกัด เหมาะกับ icon/logo
• สามารถสไตล์ด้วย CSS/JS

ฟอร์แมตขั้นสูง

AVIF

• บีบอัดดีกว่า WebP แต่ encode ช้ากว่า และ Safari ยังไม่รองรับเต็ม
• ใช้ <picture> เพื่อใส่ fallback

GIF

• เหมาะกับ animation ง่ายๆ แต่ไฟล์ใหญ่ แนะนำ WebP หรือ MP4 แทน

ข้อแนะนำตามแพลตฟอร์ม

React

• จัดระเบียบ /public/images
• ใช้ IntersectionObserver ทำ lazy load

Next.js

• ปรับ next.config.js ให้รองรับ WebP/AVIF
• ใช้ <Image> พร้อม placeholder="blur" และ sizes

เป้าหมายขนาดไฟล์ (ตัวอย่าง)

| Use case | ขนาดไฟล์ที่ควรตั้งเป้า | | --- | --- | | Hero desktop | 150-300 KB (JPEG 80-85%) | | Hero mobile | 50-150 KB (WebP) | | Thumbnail | 10-30 KB | | Icon SVG | 1-5 KB |

Workflow การบีบอัด

• CLI: convert, cwebp, svgo
• npm script: imagemin + mozjpeg/pngquant/webp
• webpack loader เช่น image-webpack-loader

Monitoring

• ตรวจ LCP ต้องต่ำกว่า 2.5 วินาที, FID ต่ำกว่า 100 มิลลิวินาที, CLS ไม่เกิน 0.1
• Log เวลาโหลดของภาพแต่ละไฟล์

ความผิดพลาดทั่วไป

1. ใช้ PNG กับภาพถ่าย → ไฟล์ใหญ่อย่างไม่จำเป็น
2. ไม่มี fallback → เบราว์เซอร์เก่าโหลดไม่ได้
3. ส่งภาพ desktop ขนาดใหญ่ให้ mobile
4. ไม่เตรียมภาพ 2× สำหรับหน้าจอ retina

สรุป

เลือกฟอร์แมตโดยคิดถึง performance และการใช้งาน เริ่มจาก combo พื้นฐาน JPEG + PNG แล้วค่อยเพิ่ม WebP/AVIF เมื่อพร้อม ตรวจสอบน้ำหนักไฟล์เสมอ และปรับ workflow ให้รองรับการแบ่งภาพหรือแปลงไฟล์อย่างรวดเร็ว