คู่มือขนาดไฟล์ภาพ: วิธีลด KB และ MB อย่างง่ายดาย

อัปเดตล่าสุด: June 28, 2026

ขนาดไฟล์รูปภาพคือจำนวนไบต์ที่รูปภาพใช้บนดิสก์หรือผ่านเครือข่าย โดยแสดงเป็น KB, MB หรือบางครั้งก็เป็น GB ไฟล์จะมีขนาดใหญ่เมื่อมีพิกเซลมากเกินไป ใช้รูปแบบที่ไม่ถูกต้อง เก็บ metadata ที่ไม่จำเป็น หรือถูกส่งออกด้วยการตั้งค่าคุณภาพที่สูงกว่าความต้องการในการใช้งานขั้นสุดท้าย

คู่มือนี้จะให้หลักการปฏิบัติสำหรับการลดขนาดรูปภาพก่อนที่คุณจะอัปโหลดไปยังเว็บไซต์, product feed, อีเมล หรือ CMS

คำตอบสั้นๆ: วิธีลดขนาดไฟล์ภาพโดยไม่สูญเสียคุณภาพได้อย่างไร?

ให้ใช้ไฟล์ต้นฉบับที่สะอาดที่สุด ปรับขนาดเป็นมิติที่ใหญ่ที่สุดที่คุณแสดงผลจริง จากนั้นจึงส่งออกเป็นรูปแบบเว็บสมัยใหม่ เช่น WebP หรือ AVIF สำหรับรูปถ่ายส่วนใหญ่ ให้เริ่มจากคุณภาพ WebP 75-85 สำหรับภาพหน้าจอ โลโก้ และกราฟิกที่มีข้อความเล็กๆ ควรทดสอบ PNG หรือ WebP แบบไม่สูญเสียข้อมูลก่อนใช้การบีบอัดแบบสูญเสีย (lossy compression)

ข้อผิดพลาดที่ใหญ่ที่สุดคือการบีบอัดรูปถ่ายกล้องขนาด 4000 px แล้วยังคงอัปโหลดด้วยขนาด 4000 px สำหรับช่องที่ต้องการเพียง 800 px เพราะนั่นเป็นการเก็บพิกเซลส่วนเกินที่ผู้ใช้ไม่เคยเห็น ปรับขนาดก่อน จากนั้นจึงปรับแต่งรูปแบบและคุณภาพ

หลังจากส่งออกแล้ว ให้ตรวจสอบผลลัพธ์ตามขนาดการแสดงผลสุดท้าย หากภาพยังดูสะอาดตาและไฟล์มีขนาดต่ำกว่างบประมาณหน้าหรือการอัปโหลดของคุณ ก็ให้หยุด หากดูเบลอ เป็นบล็อก หรือเลอะเทอะเกินไป ให้เพิ่มคุณภาพหรือใช้รูปแบบที่เหมาะสมกว่า สำหรับขั้นตอนการวัดค่าเชิงลึกยิ่งขึ้น ให้ใช้ image compression ratio guide

สำหรับการอัปเดตนี้ ผมได้ทำการวัดกราฟิก WebP ขนาด 1400 by 788 จำนวนสี่ภาพที่ใช้ในบทความ: ไฟล์ท้องถิ่นมีขนาดตั้งแต่ 28 KB ถึง 52 KB ซึ่งเป็นเครื่องเตือนใจที่เป็นประโยชน์ว่า กราฟิกคำแนะนำแบบเรียบๆ สามารถมีขนาดเล็กได้แม้จะมีมิติที่กว้างขวาง ในขณะที่รูปถ่ายที่มีรายละเอียดสูงมักจะต้องใช้ไบต์มากกว่า

อะไรมีผลต่อขนาดไฟล์ภาพ?

ปัญหาขนาดไฟล์ภาพส่วนใหญ่เกิดจากสี่ปัจจัยหลัก ได้แก่ มิติของพิกเซล เนื้อหาของภาพ รูปแบบไฟล์ และการตั้งค่าตัวเข้ารหัส นอกจากนี้ เมทาดาต้าก็มีความสำคัญเช่นกัน โดยเฉพาะอย่างยิ่งเมื่อมีการเก็บข้อมูล EXIF ของกล้อง, ข้อมูล GPS, ภาพย่อ (thumbnails), และประวัติการแก้ไขไว้ในไฟล์สาธารณะ

มิติพิกเซลกำหนดภาระงานดิบ (raw workload) ภาพขนาด 1600 by 1200 มีจำนวนพิกเซลมากกว่าภาพขนาด 800 by 600 ถึงสี่เท่า การบีบอัดสามารถลดไบต์สุดท้ายได้ แต่ก็ยังต้องบรรยายพื้นที่ผ้าใบที่ใหญ่กว่าอยู่ดี

สำหรับการนำไปใช้บนเว็บ Google แนะนำให้มีองค์ประกอบภาพที่สามารถถูกเก็บข้อมูล (crawlable image elements), alt text ที่สื่อความหมาย, และรองรับรูปแบบไฟล์ เช่น JPEG, PNG, WebP, SVG, และ AVIF ใน แนวทางปฏิบัติที่ดีที่สุดสำหรับรูปภาพของ Google ไฟล์ยังคงต้องมีประโยชน์ต่อผู้อ่าน; ภาพที่เล็กแต่ไม่ชัดเจนไม่ใช่การปรับปรุงให้เหมาะสมที่ดี

ทำไมรูปภาพของฉันถึงมีขนาดเป็น MB มากจัง?

รูปภาพของคุณอาจมีขนาดใหญ่เกินไปเนื่องจากถูกส่งออกสำหรับการบันทึกหรือการแก้ไข ไม่ใช่เพื่อการเผยแพร่ ต้นฉบับจากโทรศัพท์หรือกล้องอาจกว้าง 3000-6000 px ซึ่งเป็นประโยชน์ในฐานะไฟล์หลัก แต่โดยทั่วไปแล้วมันจะสิ้นเปลืองสำหรับรูปภาพเนื้อหาบล็อก, ภาพขนาดย่อสินค้า, แบนเนอร์อีเมล หรือรูปโปรไฟล์

สาเหตุทั่วไป:

• ไฟล์กล้องความละเอียดเต็มถูกอัปโหลดไปยังหน้าเว็บโดยตรง
• ใช้ PNG สำหรับรูปภาพถ่าย
• บันทึก JPEG ที่คุณภาพ 100% โดยที่ไม่ได้ประโยชน์ที่มองเห็นได้มากนัก
• ภาพหน้าจอถูกส่งออกเป็น PNG Retina ขนาดใหญ่และไม่เคยปรับขนาด
• ข้อมูล EXIF และตัวอย่างที่ฝังอยู่ยังคงอยู่ในสำเนาสาธารณะ
• ระบบจัดการเนื้อหา (CMS) สร้างภาพขนาดย่อ แต่ยังคงแสดงต้นฉบับในหน้าเว็บ
• บันทึกรูปภาพโปร่งใสเป็น PNG ทั้งที่ WebP แบบไม่มีการสูญเสียข้อมูลจะมีขนาดเล็กกว่า
• รูปภาพถูกแก้ไขและบันทึกซ้ำหลายครั้ง ทำให้เกิดสิ่งแปลกปลอมโดยที่ไม่ได้แก้ปัญหาเรื่องขนาด

หากปัญหานี้คือข้อจำกัดการอัปโหลดที่เข้มงวด ให้เริ่มจากการปรับขนาดและรูปแบบก่อนที่จะลดคุณภาพอย่างรุนแรง บทความ compress image to 100KB guide มีประโยชน์เมื่อฟอร์มหรือเว็บไซต์รายการสินค้ามีขีดจำกัดไบต์ที่เคร่งครัด

ขนาดไฟล์รูปภาพใดที่เหมาะสมสำหรับหน้าเว็บ?

ไม่มีขนาดที่สมบูรณ์แบบที่เป็นสากล แต่มีงบประมาณเริ่มต้นที่มีประโยชน์ รูปภาพฮีโร่ของหน้าแรกอาจมีขนาดใหญ่กว่าภาพขนาดย่อในการ์ดเล็กน้อย ภาพถ่ายรายละเอียดสินค้าต้องการรายละเอียดมากกว่าพื้นผิวพื้นหลัง เป้าหมายคือการส่งจำนวนพิกเซลให้เพียงพอสำหรับงานนั้น ๆ และไม่เกินกว่านั้น

ให้ถือว่าสิ่งเหล่านี้เป็นจุดเริ่มต้น ไม่ใช่กฎเกณฑ์ ภาพถ่ายผลิตภัณฑ์เครื่องประดับที่มีขอบโลหะคมชัดอาจต้องการไบต์มากกว่า อินโฟกราฟิกง่าย ๆ อาจมีขนาดเล็กกว่ามาก กราฟิกแบบแบน (Flat graphics) บีบอัดได้ดีเพราะหลีกเลี่ยงรายละเอียดพื้นผิว เม็ดสี และเงาที่ทำให้ภาพถ่ายจากกล้องมีน้ำหนักมากขึ้น

หากคุณต้องการการตรวจสอบการเผยแพร่แบบเต็มรูปแบบซึ่งรวมถึงมิติ ขนาดที่ตอบสนอง (responsive variants) การโหลดแบบขี้เกียจ (lazy loading) และการตรวจสอบ CDN ให้ใช้ complete image optimization checklist.

รูปแบบใดที่ทำให้ไฟล์รูปภาพมีขนาดเล็กลง?

รูปแบบที่ยอมรับได้และมีขนาดเล็กที่สุดขึ้นอยู่กับว่ารูปภาพนั้นประกอบด้วยอะไร โดยทั่วไปแล้ว ภาพถ่ายมักจะลดขนาดได้ดีด้วย WebP หรือ AVIF ส่วนภาพหน้าจอ (Screenshots) และกราฟิกที่มีข้อความอาจดูแย่หากการบีบอัดแบบ lossy ทำให้ขอบนุ่มลง โลโก้และไอคอนอาจเหมาะกว่าที่จะใช้ SVG หากเป็นงานศิลปะแบบ vector

image file type and format guide ของ MDN อธิบายถึงข้อดีข้อเสียของ JPEG, PNG, WebP, AVIF, GIF และ SVG รวมถึงการรองรับพฤติกรรม lossy, lossless และความโปร่งใส ใช้ข้อมูลนี้เป็นแนวทางเมื่อคุณตัดสินใจว่ารูปภาพควรถูกบีบอัด แปลง หรือเก็บแบบ lossless

หากคุณกำลังเลือกระหว่างสองรูปแบบ web สมัยใหม่นี้ โปรดอ่าน AVIF vs WebP comparison AVIF มักจะบีบอัดภาพถ่ายได้ดีมาก แต่ WebP นั้นรวดเร็ว รองรับอย่างกว้างขวาง และง่ายต่อการเพิ่มเข้าสู่ pipeline ที่มีอยู่

คุณควรลดขนาดไฟล์รูปภาพอย่างไรทีละขั้นตอน?

ควรใช้ลำดับเดิมทุกครั้ง การลากแถบเลื่อนคุณภาพลงแบบสุ่มถึง 40% จะทำให้เกิดภาพที่นุ่มและผลลัพธ์ที่ไม่สม่ำเสมอ

1. เก็บแหล่งที่มาต้นฉบับที่ใหญ่ที่สุดและสะอาดที่สุดเป็นไฟล์หลักของคุณ
2. ครอบตัดสำหรับองค์ประกอบสุดท้ายก่อนสร้างสำเนาสำหรับการส่งมอบ
3. ปรับขนาดให้กว้างที่สุดเท่าที่หน้าเว็บ อีเมล หรือฟีดจะแสดงผลจริง
4. เลือกรูปแบบตามเนื้อหา: ใช้ WebP หรือ AVIF สำหรับรูปภาพ และใช้แบบไม่สูญเสียข้อมูล (lossless) สำหรับกราฟิกที่มีข้อความจำนวนมาก
5. ส่งออกตัวเลือกคุณภาพสองถึงสามแบบ
6. ลบ metadata ที่ไม่จำเป็นสำหรับสำเนาสาธารณะ
7. เปรียบเทียบตัวเลือกที่ขนาดแสดงผลสุดท้ายทั้งบนเดสก์ท็อปและมือถือ
8. ตรวจสอบขนาดไบต์หลังจากการส่งออกทั้งหมด ไม่ใช่ก่อนหน้านั้น
9. เผยแพร่ไปยัง CDN หรือ URL สื่อที่เสถียร
10. ตรวจสอบว่า URL สุดท้ายส่งคืนค่า HTTP 200 และหน้าเว็บแสดงสินทรัพย์ตามที่ตั้งใจไว้

สำหรับโฟลเดอร์ไฟล์ อย่าปรับแต่งรูปภาพทุกรูปด้วยมือก่อน ให้เลือกรูปตัวแทนหนึ่งรูป รูปที่ยากหนึ่งรูป และภาพหน้าจอหนึ่งภาพ ค้นหาการตั้งค่าที่ใช้ได้กับตัวอย่างเหล่านั้น จากนั้นจึงดำเนินการเป็นชุด (batch) สำหรับส่วนที่เหลือ คู่มือ batch resize guide ครอบคลุมรูปแบบคำสั่งแบบบรรทัด (command-line pattern) สำหรับปรับขนาดไฟล์จำนวนมากจากโฟลเดอร์ต้นฉบับเดียว

คุณควรใช้การตั้งค่าคุณภาพแบบใด?

ให้เริ่มต้นจากตรงกลางและปรับเปลี่ยนเมื่อภาพแจ้งให้ทราบเท่านั้น สำหรับรูปภาพ WebP, q75-q85 เป็นช่วงทดสอบที่เหมาะสม สำหรับ JPEG, 80-85 มักจะใช้งานได้ดีสำหรับรูปภาพเว็บทั่วไป สำหรับ AVIF, ตัวเลขคุณภาพจะไม่เทียบเท่ากับ WebP หรือ JPEG ดังนั้นควรเปรียบเทียบผลลัพธ์ด้วยสายตาแทนการจับคู่ค่าสไลเดอร์

ใช้ตารางนี้สำหรับการทดสอบครั้งแรก:

คู่มือ web.dev เกี่ยวกับการ เพิ่มประสิทธิภาพ Largest Contentful Paint เป็นเครื่องเตือนใจที่มีประโยชน์ว่าไบต์ของรูปภาพเป็นเพียงส่วนหนึ่งของประสิทธิภาพเท่านั้น ภาพฮีโร่ยังจำเป็นต้องสามารถค้นพบได้ตั้งแต่เนิ่นๆ ถูกจัดลำดับความสำคัญอย่างถูกต้อง และมีขนาดที่เหมาะสมสำหรับ viewport

คุณจะตรวจสอบขนาดไฟล์รูปภาพก่อนเผยแพร่ได้อย่างไร?

คุณควรตรวจสอบทั้งมิติและจำนวนไบต์ ใน macOS, Finder's Get Info จะแสดงขนาดไฟล์ และ Preview หรือโปรแกรมแก้ไขรูปภาพสามารถแสดงมิติได้ สำหรับ Windows, Properties จะแสดงขนาดไฟล์ และ Details จะแสดงมิติ ในเวิร์กโฟลว์แบบ command-line, การใช้ identify image.webp จาก ImageMagick จะรายงานความกว้าง ความสูง และข้อมูลไฟล์

สำหรับการทำงานบนเว็บไซต์ คุณควรตรวจสอบสิ่งที่เบราว์เซอร์ดาวน์โหลดด้วย เปิดหน้าเว็บ ตรวจสอบ Network panel กรองเฉพาะรูปภาพ และดูที่ไบต์ที่ถ่ายโอน สิ่งนี้จะช่วยจับข้อผิดพลาดทั่วไปที่ไฟล์ในเครื่องมีขนาดเล็ก แต่หน้าเว็บยังคงร้องขอ URL เก่าและหนักกว่า

ก่อนเผยแพร่ ให้ยืนยันสิ่งต่อไปนี้:

• รูปภาพมีความกว้างไม่เกินความต้องการของช่องแสดงผลที่ใหญ่ที่สุด
• ไฟล์ที่ส่งออกเป็น WebP, AVIF, JPEG, PNG, หรือ SVG ด้วยเหตุผลที่ชัดเจน
• ขนาดไบต์เหมาะสมกับการใช้งานนั้น ๆ
• รูปภาพยังคงดูสะอาดตาในขนาดการแสดงผล
• Alt text อธิบายรูปภาพที่มองเห็นได้
• CDN URL ส่งคืนค่า HTTP 200
• หน้าเว็บไม่ได้โหลดไฟล์ต้นฉบับความละเอียดสูงแบบซ่อนไว้

หากคุณไม่แน่ใจว่ารูปภาพมีขนาดใหญ่เกินไปเนื่องจากมิติหรือการบีบอัด ให้ใช้ check image size and dimensions ก่อนเปลี่ยนรูปแบบ

ข้อผิดพลาดเรื่องขนาดไฟล์ที่ควรหลีกเลี่ยง

ปัญหาเกี่ยวกับขนาดไฟล์ส่วนใหญ่เป็นปัญหาจากขั้นตอนการทำงาน (workflow) ทั่วไป ซึ่งเกิดขึ้นเมื่อมีการจัดการกับการแก้ไข การอัปโหลด และการเผยแพร่เสมือนว่าเป็นขั้นตอนเดียวกัน

ข้อผิดพลาดเหล่านี้ที่คุณควรหลีกเลี่ยง:

• อัปโหลดไฟล์กล้องต้นฉบับเป็นภาพสำหรับเว็บสาธารณะ
• ใช้ PNG สำหรับทุกรูปภาพเพราะรู้สึกว่าปลอดภัยกว่า
• การ export ไฟล์ JPEG ที่ 100% และคิดว่ามันดูดีกว่าทางสายตา
• การบีบอัดก่อนการปรับขนาด
• การบีบอัดไฟล์ JPEG เดิมซ้ำทุกครั้งที่มีการอัปเดตหน้าเว็บ
• การเก็บข้อมูลเมตา GPS ไว้ในไฟล์สาธารณะ
• การตัดสินคุณภาพที่ซูม 400% โดยไม่ได้ตรวจสอบขนาดการแสดงผลสุดท้าย
• การส่งภาพเดสก์ท็อปขนาดใหญ่เพียงภาพเดียวให้กับผู้ใช้มือถือ
• การแทนที่ภาพที่ชัดเจนด้วยภาพที่เล็กกว่าแต่ทำให้เข้าใจผิดได้
• การลืมอัปเดต Open Graph และรูปภาพปกบทความหลังจากเปลี่ยน assets

สำหรับหน้าเว็บที่เน้นการใช้งานบนมือถือ ควรจับคู่การตัดสินใจเรื่องขนาดไฟล์กับการส่งมอบแบบ responsive (responsive delivery) คู่มือ mobile image optimization guide อธิบายว่า source sets, viewport width และ loading priority ส่งผลต่อภาพจริงที่ผู้ใช้ได้รับอย่างไร

รายการตรวจสอบขนาดไฟล์ภาพ

ใช้การตรวจสอบขั้นสุดท้ายนี้ก่อนอัปโหลดภาพไปยังหน้าเว็บ ร้านค้า อีเมล หรือระบบจัดการเนื้อหา (CMS)

กฎปฏิบัติง่าย ๆ คือ: ปรับขนาดก่อน เลือกรูปแบบเป็นอันดับสอง ปรับคุณภาพเป็นอันดับสาม และตรวจสอบ URL สุดท้าย ขนาดไฟล์จะประสบความสำเร็จก็ต่อเมื่อภาพยังคงมีความชัดเจนเพียงพอสำหรับวัตถุประสงค์ของมัน