JPEG เทียบกับ PNG เทียบกับ BMP เทียบกับ GIF เทียบกับ SVG

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

จากไฟล์ TIFF, GIF, JPG, JPEG, PNG และไฟล์ BMP แตกต่างกันอย่างไร?

BMP - บิตแมป นี่อาจเป็นรูปแบบภาพดิจิตอลประเภทแรกที่ฉันจำได้ ทุกภาพบนคอมพิวเตอร์ดูเหมือนว่าสมัยนั้นจะเป็น BMP ใน Windows XP โปรแกรม Paint จะบันทึกรูปภาพโดยอัตโนมัติใน BMP อย่างไรก็ตามใน Windows Vista และภาพที่ใหม่กว่าจะถูกบันทึกเป็น JPEG BMP เป็นแพลตฟอร์มพื้นฐานสำหรับไฟล์ประเภทอื่น ๆ

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

GIF - (ฟอร์แมตกราฟิก Interchange) รูปแบบ Gif ใช้ดีที่สุดสำหรับข้อความ, การวาดเส้น, ภาพหน้าจอ, การ์ตูนและภาพเคลื่อนไหว Gif จำกัด จำนวน 256 สีหรือน้อยกว่าดังนั้นรูปภาพ Gif จึงค่อนข้างเล็ก โดยทั่วไปจะใช้สำหรับการโหลดหน้าเว็บอย่างรวดเร็ว นอกจากนี้ยังทำให้แบนเนอร์หรือโลโก้ที่ยอดเยี่ยมสำหรับหน้าเว็บของคุณ ภาพเคลื่อนไหวสามารถบันทึกในรูปแบบ GIF ตามลำดับของภาพนิ่ง ตัวอย่างเช่นแบนเนอร์ที่กะพริบจะถูกบันทึกเป็นไฟล์ Gif

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

TIFF - (รูปแบบไฟล์ภาพที่มีแท็ก) รูปแบบไฟล์นี้ไม่ได้รับการอัพเดตตั้งแต่ปี 1992 และปัจจุบันเป็นของ Adobe มันสามารถเก็บภาพและข้อมูล (แท็ก) ในไฟล์เดียว TIFF สามารถบีบอัดได้ แต่มันค่อนข้างความสามารถในการจัดเก็บข้อมูลภาพในรูปแบบ lossless ที่ทำให้ไฟล์ TIFF เป็นไฟล์เก็บรูปภาพที่มีประโยชน์เพราะต่างจากไฟล์ JPEG มาตรฐานไฟล์ TIFF ที่ใช้การบีบอัดแบบ lossless (หรือไม่มี) อาจถูกแก้ไขและ ประหยัดโดยไม่สูญเสียคุณภาพของภาพ ไฟล์นี้มักใช้สำหรับการสแกนแฟกซ์การประมวลผลคำและอื่น ๆ มันไม่ใช่รูปแบบไฟล์ทั่วไปที่จะใช้กับภาพถ่ายดิจิทัลของคุณอีกต่อไปเนื่องจาก jpeg นั้นมีคุณภาพยอดเยี่ยมและใช้พื้นที่น้อยลง

ในรูปแบบ xkcd จาก lbrandy.com :

คุณควรตระหนักถึงปัจจัยสำคัญบางประการ ...

แรกมีสองประเภทของการบีบอัด: LosslessและLossy

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

นอกจากนี้ยังมีความลึกสีที่แตกต่างกัน (จานสี): สีที่จัดทำดัชนีและสีโดยตรง

• การจัดทำดัชนีหมายความว่าภาพสามารถเก็บสีได้ในจำนวน จำกัด เท่านั้น (โดยปกติคือ 256) ซึ่งควบคุมโดยผู้แต่งในบางสิ่งที่เรียกว่า Color Map
• Directหมายความว่าคุณสามารถจัดเก็บหลายพันสีที่ยังไม่ได้เลือกโดยตรงโดยผู้เขียน

BMP - Lossless / ดัชนีและโดยตรง

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

เหมาะสำหรับ: ไม่มีอะไรดีจริงๆ ไม่มีสิ่งใดที่ BMP ดีกว่าหรือทำได้ดีกว่าในรูปแบบอื่น

GIF - ไม่สูญเสีย / ทำดัชนีเท่านั้น

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

ภาพ GIF สามารถเคลื่อนไหวและมีความโปร่งใส

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

JPEG - สูญเสีย / โดยตรง

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

เหมาะสำหรับ: ภาพถ่าย นอกจากนี้การไล่ระดับสี

PNG-8 - แบบไม่สูญเสีย / ทำดัชนี

PNG เป็นรูปแบบที่ใหม่กว่าและ PNG-8 (รุ่นที่จัดทำดัชนีของ PNG) เป็นตัวทดแทนที่ดีสำหรับ GIF แต่น่าเสียดายที่มันมีข้อเสียเล็กน้อย: ประการแรกมันไม่สามารถรองรับภาพเคลื่อนไหวอย่าง GIF ได้ (ทำได้ดี แต่มีเพียง Firefox เท่านั้นที่ดูเหมือนจะรองรับซึ่งแตกต่างจากภาพเคลื่อนไหว GIF ที่เบราว์เซอร์ทุกตัวรองรับ) ประการที่สองมีปัญหาการสนับสนุนบางอย่างกับเบราว์เซอร์รุ่นเก่าเช่น IE6 ประการที่สามซอฟต์แวร์ที่สำคัญเช่น Photoshop มีการใช้รูปแบบที่ไม่ดีมาก (Damn you, Adobe!) PNG-8 สามารถเก็บได้ 256 สีเท่านั้นเช่น GIF

เหมาะสำหรับ: สิ่งสำคัญที่ PNG-8 ทำได้ดีกว่า GIF คือการสนับสนุนอัลฟ่าโปร่งใส

หมายเหตุสำคัญ: Photoshop ไม่รองรับ Alpha Transparency สำหรับไฟล์ PNG-8 (Damn you, Photoshop!) มีวิธีการแปลงไฟล์ Photoshop PNG-24 เป็น PNG-8 ในขณะที่ยังคงความโปร่งใสอยู่ วิธีหนึ่งคือPNGQuantอีกคือการบันทึกไฟล์ของคุณด้วยดอกไม้ไฟ

PNG-24 - Lossless / Direct

PNG-24 เป็นรูปแบบที่ยอดเยี่ยมที่รวมการเข้ารหัสแบบไม่สูญเสียสีเข้ากับสีโดยตรง (หลายพันสีเช่นเดียวกับ JPEG) มันคล้ายกับ BMP มากยกเว้น PNG ที่บีบอัดรูปภาพดังนั้นมันจึงส่งผลให้ไฟล์มีขนาดเล็กลงมาก น่าเสียดายที่ไฟล์ PNG-24 จะยังคงมีขนาดใหญ่กว่า JPEG, GIF และ PNG-8 ดังนั้นคุณยังต้องพิจารณาหากคุณต้องการใช้

แม้ว่า PNG-24s จะอนุญาตให้มีหลายพันสีในขณะที่มีการบีบอัด แต่ก็ไม่ได้มีวัตถุประสงค์เพื่อแทนที่ภาพ JPEG ภาพถ่ายที่ถูกบันทึกเป็น PNG-24 น่าจะมีขนาดใหญ่กว่าภาพ JPEG ที่เทียบเท่าอย่างน้อย 5 เท่าโดยมีการปรับปรุงคุณภาพที่มองเห็นได้น้อยมาก (แน่นอนว่าอาจเป็นผลลัพธ์ที่พึงประสงค์หากคุณไม่กังวลเกี่ยวกับขนาดไฟล์และต้องการได้ภาพที่มีคุณภาพดีที่สุดเท่าที่จะทำได้)

เช่นเดียวกับ PNG-8 PNG-24 รองรับอัลฟ่าโปร่งใสเช่นกัน

SVG - Lossless / Vector

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

ตัวอย่างเช่น:

นี่หมายความว่า SVG เหมาะสำหรับโลโก้และไอคอนที่คุณต้องการรักษาความคมชัดบนหน้าจอ Retina หรือขนาดต่าง ๆ

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

ฉันหวังว่าจะช่วย!

คำตอบที่มีอยู่มีข้อมูลทางเทคนิคน้อยมากดังนั้นฉันจะรวมไว้ที่นี่

• JPEG : สีสูงถึง 24 บิต (อาจมากกว่านั้น) การบีบอัดตัวแปร (โดยปกติสูง) การสูญเสียไม่มีการสนับสนุนอัลฟ่า
• PNG : สูงสุด 48- สี, การบีบอัดปานกลาง, ไม่สูญเสียการสนับสนุน, อัลฟา
• BMP : สูงถึง 24- บิตสีการบีบอัดน้อยมากไม่มีการสูญเสียการสนับสนุนอัลฟา
• GIF : สีสูงสุด 8 บิตการบีบอัดเล็กน้อยการสูญเสียการสนับสนุนความโปร่งใสการสนับสนุนภาพเคลื่อนไหว

ความลึกของสี

• 8-bit color == 256 colours
• 24-bit color == 16,777,216 สี
• สี 48 บิต == 281,474,976,710,656 สี

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

การอัด

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

อัลฟา / โปร่งใส

อัลฟ่าหมายถึงความโปร่งใส แต่ก็หมายความว่ามีความโปร่งใสมากกว่าหนึ่งระดับ GIF มีความสามารถในการกำหนดพิกเซลแบบโปร่งใส แต่อาจเป็นแบบทึบหรือแบบโปร่งใส 100% และ "แบบโปร่งใส" จะถูกใช้เป็นหนึ่งใน 256 สี PNG และ BMP มีความสามารถในการทำเครื่องหมายแต่ละพิกเซลเป็นทึบแสงโปร่งใสหรือโปร่งใสบางส่วนเช่นแก้วสี โดยทั่วไปมีระดับความโปร่งใส 256 ระดับแม้ว่า PNG จะมีระดับสูงสุดได้ถึง 65,536 JPEG ไม่มีการสนับสนุนเพื่อความโปร่งใส

นิเมชั่น

รูปแบบเหล่านี้มีผลเฉพาะ GIF เท่านั้นที่รองรับการเคลื่อนไหว มีข้อกำหนดสำหรับภาพเคลื่อนไหวที่มี PNG (MNG, APNG) และ JPEG (MJPEG) แต่ไม่รองรับอย่างกว้างขวาง (APNG ทำงานได้กับ Firefox และ Opera เวอร์ชันล่าสุด) ในทางปฏิบัติภาพเคลื่อนไหวส่วนใหญ่ที่คุณเห็นบนหน้าเว็บจะถูกนำไปใช้ใน Flash

• ใช้ GIF หากภาพมีสีไม่กี่สี (เช่นไอคอน) สามารถใช้สำหรับภาพเคลื่อนไหว (เช่นแบนเนอร์โฆษณา)
• ใช้ JPG หากภาพมีหลายสี (เช่นภาพถ่าย) JPEG เป็นสิ่งเดียวกัน
• ใช้ BMP ถ้าคุณต้องการบันทึกภาพโดยไม่บีบอัด ขนาดไฟล์ใหญ่ขึ้นมาก!
• ใช้ PNG หากคุณต้องการเผยแพร่ภาพบนเว็บและทันสมัยกับมาตรฐานที่ทันสมัย จุดเด่น: เหมาะสำหรับการทดแทนที่ทันสมัยสำหรับทั้ง GIF และ JPG และเป็นมาตรฐานแบบเปิดและให้ความโปร่งใส ข้อด้อย: ซอฟต์แวร์เก่าไม่รองรับและขนาดไฟล์อาจใหญ่กว่า GIF หรือ JPG ที่เทียบเคียงได้

BMP:

• รูปแบบเก่า ไม่มีการสูญเสียข้อมูล
• ไม่บีบอัด - เก็บค่าของแต่ละพิกเซล ดังนั้นรูปภาพที่มีขนาดเดียวกันจึงมีขนาดไฟล์เท่ากัน (กิโลไบต์ / เมกะไบต์) เช่นภาพ 800 × 600 BMP มักจะเป็น 1.37 MiB เช่นวอลล์เปเปอร์ "Bliss" ยอดนิยมของ WinXP
• ไม่รองรับความโปร่งใส / การแปล
• ไม่แนะนำสำหรับอะไร

JPG:

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

PNG:

• การบีบอัดแบบไม่สูญเสีย (ใช่ดีที่สุดทั้งคำ / โลก)
• รองรับความโปร่งใสและความโปร่งแสงซึ่งต่างกัน
• แนะนำสำหรับกราฟิก / ไอคอนคงที่ไม่ใช่สำหรับภาพถ่าย

GIF:

• รองรับความโปร่งใส แต่ไม่โปร่งใส
• แนะนำให้ใช้กับกราฟิก / ไอคอนเท่านั้น
• บางทีรูปถ่ายเคลื่อนไหวในเฟรมใน Harry Potter เป็น GIF: D

BMP ใช้อย่างใดอย่างหนึ่งบิตดิบที่มีส่วนหัวขนาดเล็กหรือการเข้ารหัสวิ่งยาว JPEG ใช้โคไซน์ไม่ต่อเนื่อง Transform ดูบล็อกที่ส่วนท้ายของบทความ Wikipedia สำหรับอัลกอริทึมการบีบอัด / เข้ารหัสอื่น ๆ

guid ง่าย ๆ :

• สำหรับภาพถ่ายให้ใช้:
  • รูปแบบดิบเฉพาะกล้องถ้าคุณมีอุปกรณ์ระดับมืออาชีพและต้องการประมวลผลจำนวนมาก
  • JPEG มิฉะนั้น (สำหรับการเผยแพร่รูปภาพบนเว็บคุณจะต้องแปลงรูปแบบไฟล์ดิบเป็น JPEG ด้วย)
• สำหรับทุกสิ่งที่มีขอบที่คมชัดเส้นละเอียดและสีน้อย (เช่นภาพหน้าจอหรือโลโก้) ใช้:
  • GIF ถ้าคุณทำเว็บเพจที่ต้องรองรับเบราว์เซอร์ที่เก่ามาก (IE 6 เป็นหลัก) หรือหากคุณต้องการทำแอนิเมชั่นแบบง่าย
  • PNG เป็นอย่างอื่น
• ไม่มีเหตุผลที่ดีที่จะใช้ BMP ยกเว้นในกรณีที่โปรแกรมเฉพาะไม่ยอมรับรูปแบบอื่น