คู่มือขนาดไฟล์รูปและฟอร์แมตสำหรับเว็บ ฉบับสมบูรณ์
รูปทุกรูปบนเว็บไซต์ของคุณมีงบประมาณขนาดไฟล์ เกินไปหน้าจะโหลดช้า อยู่ในเกณฑ์ทุกอย่างจะรู้สึกเร็วทันที คู่มือนี้ให้ตัวเลขเป้าหมายเป็น KB สำหรับทุกกรณีการใช้งาน ขนาดพิกเซลที่เหมาะสม และฟอร์แมตที่ช่วยให้ถึงเป้าหมาย
ตารางอ้างอิง: ขนาดไฟล์ที่เหมาะสมแยกตามการใช้งาน
เป้าหมายเหล่านี้อ้างอิงจากการใช้ WebP หรือ AVIF ถ้าใช้ JPEG ให้เพิ่มขึ้นอีกประมาณ 25-30%
| การใช้งาน | ความกว้างพิกเซล | ขนาดไฟล์เป้าหมาย | ฟอร์แมตที่แนะนำ |
|---|---|---|---|
| แบนเนอร์ Hero เต็มหน้าจอ | 1600-1920px | 100-200 KB | WebP หรือ AVIF |
| รูปเนื้อหาบล็อก | 800-1200px | 60-150 KB | WebP |
| รูปสินค้า (หลัก) | 800-1000px | 80-150 KB | WebP |
| Thumbnail สินค้า | 300-400px | 20-50 KB | WebP |
| รูปการ์ด/Preview | 400-600px | 30-80 KB | WebP |
| Avatar/รูปโปรไฟล์ | 64-128px | 5-15 KB | WebP หรือ JPEG |
| โลโก้ | ขึ้นอยู่กับงาน | 5-30 KB | SVG (แนะนำ) หรือ PNG |
| ไอคอน | 24-48px | 1-5 KB | SVG |
| ลวดลายพื้นหลัง | 200-400px (ต่อเรียง) | 10-30 KB | WebP หรือ PNG |
| รูปแชร์โซเชียล (OG Image) | 1200 x 630px | 80-150 KB | JPEG หรือ WebP |
ตัวเลขเหล่านี้มาจากไหน
ตามข้อมูลจาก HTTP Archive ปี 2025 หน้าเว็บมัธยฐานบนมือถือมีน้ำหนักประมาณ 2.5 MB โดยรูปภาพคิดเป็นประมาณ 1 MB หรือ 40% ของน้ำหนักทั้งหมด Google กำหนดว่าค่า Largest Contentful Paint (LCP) ที่ "ดี" คือ 2.5 วินาทีหรือน้อยกว่า บนเครือข่าย 4G ที่ Throughput จริงประมาณ 1.5 MB/s รูป Hero ต้องโหลดภายในไม่ถึงวินาที ซึ่งหมายความว่าต้องอยู่ต่ำกว่า 200 KB
เป้าหมายในตารางไม่ได้ตั้งขึ้นมาลอยๆ แต่คำนวณย้อนกลับจาก Performance Budget จริง: งบรูปทั้งหน้าอยู่ที่ 400-600 KB แบ่งสัดส่วนระหว่าง Hero เนื้อหา และ Thumbnail
ฟอร์แมตสร้างความแตกต่างมากที่สุด
รูปเดียวกันที่คุณภาพเท่ากัน อาจมีขนาดไฟล์ต่างกันมหาศาลขึ้นอยู่กับฟอร์แมต:
| ฟอร์แมต | ตัวอย่าง: รูปถ่าย 1200px | ขนาดเทียบกัน |
|---|---|---|
| PNG ไม่บีบอัด | ~3.5 MB | ฐาน |
| JPEG (Quality 80) | ~180 KB | ~5% |
| WebP (Quality 80) | ~130 KB | ~3.7% |
| AVIF (Quality 65) | ~90 KB | ~2.5% |
เปลี่ยนจาก JPEG เป็น WebP ประหยัดได้ 25-35% เปลี่ยนเป็น AVIF ประหยัดได้ประมาณ 50% เมื่อเทียบกับ JPEG ทั้งสองรองรับ Transparency อ่านเพิ่มเติมได้ที่คู่มือ WebP เทียบกับ AVIF ของเรา
คุณสามารถแปลงรูปได้ทันที: JPG เป็น WebP, แปลงเป็น AVIF หรือใช้ แปลงเป็นชุด สำหรับหลายไฟล์พร้อมกัน
ขนาดพิกเซล: ตัวคูณที่ถูกมองข้าม
ขนาดไฟล์ขึ้นอยู่กับ 2 สิ่ง: จำนวนพิกเซลและการบีบอัด คนส่วนใหญ่สนใจแค่การบีบอัดแล้วละเลยจำนวนพิกเซล แต่การลดขนาดมิติมีผลมากกว่ามาก
ตัวอย่างเร็วๆ: รูปถ่าย 4000 x 3000 มี 12 ล้านพิกเซล ย่อเหลือ 1200 x 900 เหลือ 1.08 ล้านพิกเซล ลดลง 91% ก่อนจะบีบอัดด้วยซ้ำ คุณก็ตัดน้ำหนักส่วนใหญ่ออกไปแล้ว
กฎง่ายๆ: ไม่ต้องส่งรูปที่กว้างกว่าขนาดที่แสดงจริง ถ้าคอลัมน์เนื้อหาของบล็อกกว้าง 720px รูป 1440px (สำหรับจอ Retina 2x) คือสูงสุดที่ควรส่ง อะไรที่เกินกว่านี้คือแบนด์วิดท์ที่สูญเปล่า
ใช้เครื่องมือปรับขนาดรูปของ Vizua เพื่อย่อรูปให้ได้ขนาดที่ต้องการพอดี จากนั้นบีบอัดด้วยเครื่องมือบีบอัด JPEG หรือ PNG เพื่อประหยัดขั้นสุดท้าย
Quality บีบอัด: หาจุดสมดุลที่เหมาะสม
เมื่อรูปมีขนาดและฟอร์แมตที่ถูกต้องแล้ว ค่า Quality คือปุ่มหมุนสุดท้าย สมมติคุณมีรูปถ่ายจากกล้อง 4000 x 3000 เซฟเป็น PNG ขนาดประมาณ 14 MB:
- ย่อขนาดเหลือ 1200 x 900 (ความกว้างเนื้อหาบล็อก, 2x Retina): ~3.5 MB เป็น PNG
- แปลงเป็น WebP ที่ Quality 80: ~130 KB
- แปลงเป็น AVIF ที่ Quality 65 (ถ้า Stack รองรับ): ~90 KB
นั่นคือลดลง 99.3% จาก PNG ต้นฉบับ ผลลัพธ์ดูไม่ต่างจากต้นฉบับเลยที่ขนาดแสดงปกติ
สำหรับคำแนะนำค่า Quality ละเอียดแยกตามฟอร์แมต อ่านคู่มือ: วิธีบีบอัดรูปไม่เสียคุณภาพ
กรณีพิเศษ
หน้าสินค้าอีคอมเมิร์ซ
รูปสินค้าต้องคมชัดเมื่อซูม ส่งรูปหลักที่ 800-1000px (1600-2000px สำหรับ Retina) ในฟอร์แมต WebP รูปสินค้าส่วนใหญ่บีบอัดได้ดีที่ 80-150 KB ส่วน Thumbnail ในตารางสินค้าควรกว้าง 300-400px ได้ขนาดประมาณ 20-50 KB ต่อรูป
พอร์ตโฟลิโอช่างภาพ
คุณภาพสำคัญมาก แต่ความเร็วในการโหลดก็สำคัญเช่นกัน ส่งรูป Preview ที่ 1200-1600px ใน WebP (Quality 85) เป้าหมาย 150-250 KB แยกลิงก์ "ดูขนาดเต็ม" สำหรับเวอร์ชันความละเอียดสูง
รูปแชร์โซเชียล (Open Graph)
รูป OG ควรมีขนาด 1200 x 630px Facebook และ Twitter รับ JPEG และ PNG บางแพลตฟอร์มรองรับ WebP แล้ว รักษาไว้ไม่เกิน 150 KB เนื่องจากรูปเหล่านี้ถูกโหลดโดย Crawler ไม่ได้ Lazy-load โดยเบราว์เซอร์ ทุก Kilobyte จึงมีค่า
งบประมาณรูปทั้งหน้า
กรอบที่ใช้ได้จริง: ตั้งเป้าให้น้ำหนักรูปรวมทั้งหน้าไม่เกิน 500 KB ซึ่งปกติหมายถึง:
- รูป Hero 1 รูป: ~150 KB
- รูปเนื้อหา 3-4 รูป: ~100 KB ต่อรูป รวม ~300-400 KB
- Thumbnail, Avatar, ไอคอน: ~50 KB รวมกัน
ที่งบประมาณนี้ หน้าของคุณโหลดเร็วบน 4G และไม่กินเน็ตมือถือ ถ้าต้องการรูปมากกว่านี้ (Gallery, ตารางสินค้า) Lazy Loading ช่วยรักษางบการโหลดครั้งแรก เพราะเฉพาะรูปที่อยู่เหนือ Fold เท่านั้นที่นับเป็นน้ำหนักการโหลดแรก
คำถามที่พบบ่อย
ขนาดไฟล์รูปที่เหมาะสมสำหรับเว็บไซต์คือเท่าไหร่?
ขึ้นอยู่กับหน้าที่ของรูป รูป Hero ควรไม่เกิน 200 KB รูปเนื้อหาไม่เกิน 150 KB และ Thumbnail ไม่เกิน 80 KB ตัวเลขเหล่านี้อ้างอิงจากฟอร์แมต WebP หรือ AVIF ถ้าใช้ JPEG อาจต้องเพิ่มอีก 20-30% เพื่อให้ได้คุณภาพเท่ากัน
ลดขนาดไฟล์รูปโดยไม่เสียคุณภาพได้อย่างไร?
ทำ 3 ขั้นตอน: 1) ย่อขนาดพิกเซลให้ตรงกับขนาดที่แสดงจริง (ไม่ต้องส่งรูป 4000px ในช่องที่แสดง 800px) 2) แปลงเป็น WebP หรือ AVIF เพื่อการบีบอัดที่ดีกว่า 3) บีบอัดที่ Quality 75-85 ที่การตั้งค่านี้ ตามนุษย์แยกความต่างไม่ออก
Google แนะนำขนาดไฟล์รูปสูงสุดเท่าไหร่?
Google ไม่ได้กำหนดค่า KB ที่ชัดเจน แต่ PageSpeed Insights จะเตือนเมื่อรูปมีขนาดใหญ่กว่าที่ควรจะเป็นอย่างมีนัยสำคัญ ในทางปฏิบัติ การรักษาแต่ละรูปไว้ไม่เกิน 200 KB และน้ำหนักรูปรวมทั้งหน้าไม่เกิน 500 KB ให้ค่า LCP ที่ดีอย่างสม่ำเสมอ
ขนาดไฟล์รูปส่งผลต่อ SEO ไหม?
ส่งผลอย่างแน่นอน รูปมีผลโดยตรงต่อ Largest Contentful Paint (LCP) ซึ่งเป็นหนึ่งใน Core Web Vitals ทั้ง 3 ของ Google ค่า LCP ที่ช้ากว่า 2.5 วินาทีส่งผลเสียต่อการจัดอันดับ เนื่องจากรูปเป็นองค์ประกอบ LCP ในหน้าส่วนใหญ่ ขนาดไฟล์จึงเป็นปัจจัยสำคัญที่สุดอย่างหนึ่งของ SEO
ขนาดพิกเซลที่เหมาะสมสำหรับรูปสินค้าคือเท่าไหร่?
สำหรับอีคอมเมิร์ซ ส่งรูปสินค้าหลักที่ 800-1000px กว้าง และ Thumbnail ที่ 300-400px บนหน้าจอ Retina ให้คูณสองจากค่านี้ รูปสินค้าส่วนใหญ่บีบอัดได้ดีใน WebP ที่ Quality 80 ได้ขนาดประมาณ 80-150 KB ต่อรูป
ลดขนาดไฟล์รูปให้ได้ตามเป้า
ฟรี ปลอดภัย ไม่ต้องสมัคร ทุกอย่างทำงานในเบราว์เซอร์