อธิบายฟอร์แมตรูปภาพ: JPG, PNG, WebP, AVIF, GIF, BMP และ ICO
ควรใช้ฟอร์แมตไหนกับภาพถ่าย โลโก้ ภาพหน้าจอ หน้าเว็บ งานพิมพ์ และโซเชียลมีเดีย พร้อมเหตุผล
ฟอร์แมตรูปภาพทุกแบบคือการชั่งน้ำหนักระหว่างขนาดไฟล์ คุณภาพ ความโปร่งใส ภาพเคลื่อนไหว และความเข้ากันได้ ถ้าเลือกผิด ผลที่ได้คือไฟล์ที่ใหญ่เกินจำเป็น หรือโลโก้ที่เบลอ คู่มือนี้อธิบายว่าแต่ละฟอร์แมตเหมาะกับงานอะไร พร้อมตัวเลขที่ต้องใช้ในการตัดสินใจ
การบีบอัดสองแบบ
การบีบอัดแบบ lossless (ไม่สูญเสียข้อมูล) เก็บทุกพิกเซลไว้ครบถ้วน เพียงแต่หาวิธีเขียนข้อมูลชุดเดิมให้กระชับขึ้น คล้ายกับที่ ZIP ทำ เปิดและบันทึกรูปแบบ lossless ซ้ำเป็นพันครั้งก็ไม่มีอะไรเปลี่ยน PNG, BMP, GIF และ WebP แบบ lossless ทำงานแบบนี้
การบีบอัดแบบ lossy (สูญเสียข้อมูล) จะตัดข้อมูลบางส่วนทิ้ง โดยเล็งไปที่รายละเอียดที่ตามนุษย์สังเกตได้ยากที่สุด เช่น พื้นผิวละเอียด ความต่างของสีเพียงเล็กน้อย และสัญญาณรบกวนความถี่สูง ผลลัพธ์อาจเล็กเหลือเพียงหนึ่งในสิบของไฟล์ lossless โดยมองไม่เห็นความแตกต่าง แต่ทุกครั้งที่บันทึกซ้ำจะสูญเสียเพิ่มอีกเล็กน้อย JPG, WebP แบบ lossy และ AVIF ทำงานแบบนี้
กฎข้อแรกจึงตามมาโดยตรง: ใช้ฟอร์แมต lossy กับภาพถ่าย ซึ่งเต็มไปด้วยสัญญาณรบกวนและพื้นผิวที่ไม่มีใครสังเกตว่าหายไป และใช้ฟอร์แมต lossless กับกราฟิกที่มีขอบคม สีเรียบ และตัวอักษร ซึ่งทุกพิกเซลมีความสำคัญ
ทีละฟอร์แมต
JPG (JPEG)
ฟอร์แมตมาตรฐานของภาพถ่ายมาตั้งแต่ปี 1992 เป็นแบบ lossy สี 8 บิต ไม่รองรับความโปร่งใส ไม่รองรับภาพเคลื่อนไหว แต่ใช้ได้กับทุกอุปกรณ์และทุกโปรแกรมที่เคยมีมา ค่าคุณภาพตั้งแต่ 0 ถึง 100 ใช้ควบคุมความสมดุล โดย 80 ถึง 85 คือจุดที่ลงตัวสำหรับการใช้งานทั่วไป จุดอ่อนคือเกิด "บล็อก" ให้เห็นเมื่อคุณภาพต่ำ มีคลื่นรบกวนรอบขอบคม และไม่มีความโปร่งใส ใช้กับภาพถ่ายที่จะนำไปใช้นอกเบราว์เซอร์ เช่น อีเมล งานพิมพ์ มาร์เก็ตเพลส และซอฟต์แวร์รุ่นเก่า
PNG
เป็นแบบ lossless สีสูงสุด 16 บิต รองรับความโปร่งใสแบบ alpha เต็มรูปแบบ ไม่รองรับภาพเคลื่อนไหว (มี APNG อยู่แต่พบได้น้อย) เป็นตัวเลือกที่ถูกต้องสำหรับโลโก้ ไอคอน ภาพหน้าจอ แผนภาพ กราฟ และรูปภาพใดก็ตามที่ต้องการพื้นหลังโปร่งใส จุดอ่อนคือขนาด ภาพถ่ายที่บันทึกเป็น PNG อาจใหญ่กว่า JPG ถึงสิบเท่า อย่าใช้ PNG กับภาพถ่ายบนเว็บไซต์
WebP
ฟอร์แมตสำหรับเว็บของ Google ซึ่งตอนนี้เบราว์เซอร์รุ่นปัจจุบันทุกตัวรองรับแล้ว มีทั้งโหมด lossy และ lossless รองรับความโปร่งใสในทั้งสองโหมด และรองรับภาพเคลื่อนไหว WebP แบบ lossy เล็กกว่า JPG ประมาณ 25 ถึง 35% ที่คุณภาพเท่ากัน ส่วน WebP แบบ lossless เล็กกว่า PNG ประมาณ 25% จึงเป็นฟอร์แมตอเนกประสงค์ที่ดีที่สุดสำหรับทุกอย่างที่แสดงในเบราว์เซอร์ จุดอ่อนคือความเข้ากันได้นอกเบราว์เซอร์ ซอฟต์แวร์เดสก์ท็อปรุ่นเก่า โปรแกรมอีเมลบางตัว และแบบฟอร์มอัปโหลดจำนวนมากยังไม่รับไฟล์นี้
AVIF
ใหม่กว่านั้นอีก พัฒนาจากโคเดกวิดีโอ AV1 โดยทั่วไปเล็กกว่า JPG ประมาณ 50% และเล็กกว่า WebP ประมาณ 20% ที่คุณภาพเท่ากัน รองรับความโปร่งใส ภาพเคลื่อนไหว และขอบเขตสีกว้าง เบราว์เซอร์รุ่นปัจจุบันทุกตัวรองรับมาตั้งแต่ปี 2024 การเข้ารหัสทำได้ช้า โดยเฉพาะในเบราว์เซอร์ และการรองรับในซอฟต์แวร์ที่ไม่ใช่เบราว์เซอร์ยังไม่ทั่วถึง ใช้เมื่อขนาดไฟล์สำคัญมากและคุณควบคุมสภาพแวดล้อมที่ใช้แสดงผลได้ พร้อมเตรียม WebP หรือ JPG ไว้เป็นไฟล์สำรอง
GIF
มีมาตั้งแต่ปี 1987 จำกัดที่ 256 สีต่อเฟรม ความโปร่งใสได้เพียงสีเดียว และรองรับภาพเคลื่อนไหว ซึ่งเป็นเหตุผลเดียวที่ยังพบเห็นได้ทุกที่ แย่มากสำหรับภาพถ่าย ใช้ได้กับกราฟิกเรียบง่าย และไม่มีใครเทียบได้เรื่องความเข้ากันได้ สำหรับภาพนิ่ง PNG ทำได้ทุกอย่างที่ GIF ทำและทำได้ดีกว่า ส่วนภาพเคลื่อนไหว MP4 หรือ WebP แบบเคลื่อนไหวมีขนาดเล็กกว่ามาก
BMP
บิตแมปของ Windows ที่ไม่ผ่านการบีบอัด ไฟล์ใหญ่มาก ในการใช้งานทั่วไปไม่มีความโปร่งใส และไม่มีการบีบอัด ที่ยังอยู่รอดได้เพราะอ่านง่ายมาก ซึ่งสำคัญกับอุปกรณ์ฝังตัวและซอฟต์แวร์รุ่นเก่า อย่าใช้กับเว็บหรือใช้เก็บไฟล์
ICO
ฟอร์แมตไอคอนของ Windows และ favicon ของเบราว์เซอร์ ภายในไฟล์เดียวมีรูปเดียวกันหลายขนาด เพื่อให้เลือกขนาดที่เหมาะกับแท็บ บุ๊กมาร์ก หรือช็อตคัตบนเดสก์ท็อปได้ สร้างจาก PNG ได้ด้วย เครื่องมือแปลง PNG เป็น ICO
ตารางเปรียบเทียบ
| ฟอร์แมต | การบีบอัด | ความโปร่งใส | ภาพเคลื่อนไหว | ขนาดภาพถ่ายเทียบกับ JPG | ความเข้ากันได้ |
|---|---|---|---|---|---|
| JPG | Lossy | ไม่มี | ไม่มี | 1× | ใช้ได้ทุกที่ |
| PNG | Lossless | มี, alpha เต็มรูปแบบ | ไม่มี | 5 ถึง 10× | ใช้ได้ทุกที่ |
| WebP | ทั้งสองแบบ | มี, alpha เต็มรูปแบบ | มี | 0.65 ถึง 0.75× | ทุกเบราว์เซอร์ และแอปสมัยใหม่ส่วนใหญ่ |
| AVIF | ทั้งสองแบบ | มี, alpha เต็มรูปแบบ | มี | 0.5× | เบราว์เซอร์รุ่นปัจจุบันทุกตัว แอปไม่กี่ตัว |
| GIF | Lossless, 256 สี | มี, แบบเปิด/ปิด | มี | 2 ถึง 4× (และคุณภาพแย่กว่า) | ใช้ได้ทุกที่ |
| BMP | ไม่มี | ไม่มี | ไม่มี | 20 ถึง 30× | ใช้ได้ทุกที่ แต่แทบไม่มีใครใช้ |
งานแบบไหนใช้ฟอร์แมตอะไร
- ภาพถ่ายบนเว็บไซต์: WebP ที่คุณภาพ 75 ถึง 85 พร้อม JPG สำรองถ้าต้องรองรับเบราว์เซอร์รุ่นเก่ามาก หรือ AVIF ถ้าต้องการหน้าเว็บที่เล็กที่สุด
- โลโก้และไอคอนบนเว็บไซต์: SVG ถ้ามี ถ้าไม่มีให้ใช้ PNG หรือ WebP แบบ lossless
- ภาพหน้าจอ: PNG เพราะการบีบอัดแบบ lossy ทำให้ตัวอักษรเบลอ
- ไฟล์แนบอีเมล: JPG สำหรับภาพถ่าย PNG สำหรับกราฟิก อย่าส่ง WebP เพราะโปรแกรมอีเมลจำนวนมากแสดงผลไม่ถูกต้อง
- งานพิมพ์: JPG ที่คุณภาพ 95 หรือ PNG/TIFF ที่ความละเอียด 300 พิกเซลต่อนิ้วของขนาดที่พิมพ์
- โซเชียลมีเดีย: JPG หรือ PNG เพราะทุกแพลตฟอร์มจะบีบอัดซ้ำตอนอัปโหลดอยู่แล้ว จึงควรอัปโหลดด้วยคุณภาพสูงและขนาดที่ถูกต้อง
- ภาพสินค้าไดคัทพื้นหลังโปร่งใส: PNG เพื่อความเข้ากันได้สูงสุด และ WebP สำหรับเว็บ
- Favicon: ICO พร้อม PNG สำหรับหน้าจอโฮมบนมือถือ
การแปลงระหว่างฟอร์แมต
การแปลงไฟล์ทุกอย่างบนเว็บไซต์นี้ทำงานในเบราว์เซอร์ของคุณ เส้นทางที่ใช้บ่อยที่สุดคือ PNG เป็น WebP และ JPG เป็น WebP สำหรับเว็บ WebP เป็น JPG และ WebP เป็น PNG เพื่อความเข้ากันได้ และ PNG เป็น JPG สำหรับลดขนาดภาพถ่ายที่ส่งออกมาผิดฟอร์แมต ส่วน เครื่องมือบีบอัดรูปภาพ จัดการได้ทุกฟอร์แมตและทำทีละหลายไฟล์ได้