JPG, PNG หรือ WebP: ควรใช้รูปแบบไหน

สรุปในบรรทัดเดียว: รูปถ่ายใช้ JPG หรือ WebP ส่วนกราฟิกและรูปที่มีความโปร่งใสใช้ PNG หรือ WebP ก่อนเปลี่ยนไปใช้ WebP โปรดตรวจสอบว่าที่ที่คุณจะอัปโหลดรับไฟล์ WebP

JPG (หรือเขียนว่า JPEG) จัดเก็บรูปถ่ายได้กะทัดรัดด้วยการตัดรายละเอียดเล็ก ๆ ที่สายตาแทบไม่สังเกตออกไป เว็บไซต์ แอป บริการอีเมล และมาร์เก็ตเพลซแทบทุกแห่งรับไฟล์ JPG จึงเป็นตัวเลือกที่ปลอดภัยที่สุดเมื่อคุณไม่แน่ใจ

จุดอ่อนของ JPG คือขอบคมและพื้นที่สีเรียบ ตัวอักษร ภาพลายเส้น และภาพหน้าจอจะมีขอบฟุ้งเบลอ และ JPG ไม่รองรับความโปร่งใส ทุกครั้งที่แก้ไขและบันทึก JPG ซ้ำ คุณภาพจะลดลงอีกเล็กน้อย จึงควรเก็บต้นฉบับไว้และส่งออกจากต้นฉบับ

หากต้องการทำให้ JPG เล็กลงโดยไม่เปลี่ยนรูปแบบ ให้ใช้เครื่องมือบีบอัดรูปภาพ หากต้องการลอง WebP ให้ใช้ JPG เป็น WebP

PNG เป็นแบบไม่สูญเสียข้อมูล ทุกพิกเซลจะถูกเก็บไว้ตรงตามเดิม จึงเหมาะกับโลโก้ ไอคอน ภาพหน้าจอของอินเทอร์เฟซ และทุกอย่างที่มีตัวอักษร อีกทั้งยังรองรับความโปร่งใสเต็มรูปแบบ รวมถึงขอบนุ่มและเงา

สิ่งที่ต้องแลกคือขนาด รูปถ่ายที่บันทึกเป็น PNG มักใหญ่กว่า JPG คุณภาพดีหลายเท่า ใน 2024 Web Almanac ของ HTTP Archive ไฟล์ PNG บนเว็บใช้ค่ามัธยฐาน 3.8 บิตต่อพิกเซล เทียบกับ 2.0 สำหรับ JPG และ 1.3 สำหรับ WebP

หาก PNG เป็นรูปถ่าย ให้แปลงเป็นรูปแบบอื่น หากเป็นกราฟิก ให้บีบอัดเป็น PNG หรือลอง PNG เป็น WebP ซึ่งคงความโปร่งใสไว้

Google ออกแบบ WebP มาเพื่อเว็บโดยเฉพาะ และใช้ได้ทั้งสองแบบ คือแบบสูญเสียข้อมูลเหมือน JPG หรือแบบไม่สูญเสียข้อมูลเหมือน PNG และรองรับความโปร่งใสทั้งสองแบบ Google รายงานว่าไฟล์ WebP แบบไม่สูญเสียข้อมูลเล็กกว่า PNG 26% และไฟล์ WebP แบบสูญเสียข้อมูลเล็กกว่า JPG ที่คุณภาพเทียบเท่ากัน 25–34%

เบราว์เซอร์หลักรุ่นปัจจุบันทุกตัวแสดง WebP ได้ คิดเป็นราว 97% ของเบราว์เซอร์ที่ใช้งานอยู่ รวมถึง Safari ตั้งแต่เวอร์ชัน 14 ข้อจำกัดอยู่นอกเบราว์เซอร์ บางแพลตฟอร์มยังไม่รับการอัปโหลด WebP เช่น Amazon, Etsy และ Mailchimp ระบุ JPG และ PNG ไว้ แต่ไม่มี WebP

การแปลงก็ไม่ได้ให้ผลดีเสมอไป โลโก้เรียบง่ายหรือภาพหน้าจอที่มีสีไม่มากอาจเล็กกว่าเมื่อเป็น PNG ให้แปลง เปรียบเทียบไฟล์ทั้งสอง แล้วเก็บไฟล์ที่เล็กกว่าไว้

1. 01รูปต้องมีความโปร่งใสหรือไม่? ใช้ PNG หรือใช้ WebP ในที่ที่รับไฟล์ WebP
2. 02เป็นรูปถ่ายหรือภาพที่สมจริงหรือไม่? ใช้ JPG หรือใช้ WebP บนเว็บไซต์ของคุณเอง
3. 03เป็นภาพหน้าจอ แผนภูมิ โลโก้ หรือตัวอักษรหรือไม่? ใช้ PNG แล้วลอง WebP และเปรียบเทียบไฟล์
4. 04จะอัปโหลดไปที่ไหน? ตรวจสอบให้แน่ใจว่าแพลตฟอร์มรับรูปแบบนั้น หากไม่รับ ให้ใช้ JPG หรือ PNG ต่อไป
5. 05บีบอัดไฟล์สุดท้าย ไม่ว่าจะเป็นรูปแบบใด

สำหรับขนาดและขีดจำกัดของแต่ละแพลตฟอร์ม โปรดดูข้อกำหนดขนาดรูปภาพสำหรับอีเมลและร้านค้าออนไลน์

AVIF เป็นรูปแบบที่ใหม่กว่าและอาจได้ไฟล์ที่เล็กลงไปอีก แต่สร้างไฟล์ได้ช้ากว่า และมีเครื่องมือกับแพลตฟอร์มที่รับไฟล์นี้น้อยกว่า บนเว็บจึงยังพบได้น้อย ใน 2025 Web Almanac รูป LCP เป็น AVIF เพียง 0.7% เทียบกับ WebP 11%, PNG 26% และ JPG 57% สำหรับเว็บไซต์ส่วนใหญ่ในปัจจุบัน JPG, PNG และ WebP ก็ครอบคลุมทุกความต้องการแล้ว

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

อ่านต่อ: วิธีบีบอัดรูปภาพสำหรับเว็บไซต์ แบบทีละขั้นตอน