เมื่อใดควรใช้ไฟล์ภาพบางประเภทเมื่อสร้างเว็บไซต์หรือส่วนต่อประสาน ฯลฯ
จุดแข็งและจุดอ่อนของพวกเขาคืออะไร
ฉันรู้ว่า PNG & GIF นั้นไม่มีความสูญเสียในขณะที่ JPEG กำลังสูญเสีย
แต่ความแตกต่างหลักระหว่าง PNG และ GIF คืออะไร
ทำไมฉันถึงต้องเลือกอันหนึ่งมากกว่าอีกอัน? SVG คืออะไรและฉันควรใช้เมื่อใด
หากคุณไม่สนใจพิกเซลแต่ละพิกเซลคุณควรใช้ JPEG ตลอดเวลาหรือไม่เพราะเป็น "ที่เบาที่สุด"
คำตอบ:
คุณควรตระหนักถึงปัจจัยสำคัญบางประการ ...
แรกมีสองประเภทของการบีบอัด: LosslessและLossy
นอกจากนี้ยังมีความลึกสีที่แตกต่างกัน (จานสี): สีที่จัดทำดัชนีและสีโดยตรง
BMP - Lossless / ดัชนีและโดยตรง
นี่เป็นรูปแบบเก่า มันเป็นแบบไม่สูญเสีย (ไม่มีข้อมูลภาพสูญหายในการบันทึก) แต่ก็มีการบีบอัดข้อมูลน้อยมากถึงไม่มีเลยหมายความว่าการบันทึกเนื่องจาก BMP ส่งผลให้มีขนาดไฟล์ใหญ่มาก มันสามารถมีจานสีทั้งแบบดัชนีและแบบตรง แต่นั่นเป็นคำปลอบใจเล็กน้อย ขนาดไฟล์มีขนาดใหญ่เกินความจำเป็นโดยที่ไม่มีใครใช้รูปแบบนี้จริงๆ
ดีสำหรับ: ไม่มีอะไรจริงๆ ไม่มีอะไรที่ BMP ดีกว่าหรือทำได้ดีกว่าในรูปแบบอื่น
GIF - ไม่สูญเสีย / ทำดัชนีเท่านั้น
GIF ใช้การบีบอัดแบบไม่สูญเสียซึ่งหมายความว่าคุณสามารถบันทึกภาพซ้ำแล้วซ้ำอีกและไม่สูญเสียข้อมูลใด ๆ ขนาดไฟล์เล็กกว่า BMP มากเนื่องจากการบีบอัดที่ดีนั้นใช้จริง แต่สามารถเก็บจานสีแบบดัชนีได้เท่านั้น ซึ่งหมายความว่าสำหรับกรณีการใช้งานส่วนใหญ่จะมีได้สูงสุด 256 สีที่ต่างกันในไฟล์ นั่นฟังดูค่อนข้างน้อยและเป็น
ภาพ GIF สามารถเคลื่อนไหวและมีความโปร่งใส
เหมาะสำหรับ: โลโก้ภาพวาดลายเส้นและรูปภาพที่เรียบง่ายอื่น ๆ ที่จำเป็นต้องมีขนาดเล็ก ใช้สำหรับเว็บไซต์จริงๆเท่านั้น
JPEG - สูญเสีย / โดยตรง
รูปภาพ JPEG ได้รับการออกแบบมาเพื่อสร้างรายละเอียดของภาพถ่ายขนาดเล็กที่สุดเท่าที่จะทำได้โดยการลบข้อมูลที่สายตามนุษย์จะไม่สังเกตเห็น ผลก็คือรูปแบบสูญเสียและการบันทึกไฟล์เดียวกันซ้ำไปซ้ำมาจะส่งผลให้ข้อมูลสูญหายตลอดเวลา มันมีจานสีหลายพันสีและยอดเยี่ยมสำหรับการถ่ายภาพ แต่การบีบอัดแบบสูญเสียหมายความว่าไม่ดีสำหรับโลโก้และการวาดเส้น: ไม่เพียง แต่พวกเขาจะดูคลุมเครือ แต่รูปภาพเหล่านั้นจะมีขนาดไฟล์ที่ใหญ่กว่าเมื่อเทียบกับ GIF!
เหมาะสำหรับ: ภาพถ่าย นอกจากนี้การไล่ระดับสี
PNG-8 - แบบไม่สูญเสีย / ทำดัชนี
PNG เป็นรูปแบบที่ใหม่กว่าและ PNG-8 (รุ่นที่จัดทำดัชนีของ PNG) เป็นตัวทดแทนที่ดีสำหรับ GIF แต่น่าเสียดายที่มันมีข้อเสียเล็กน้อย: ประการแรกมันไม่สามารถรองรับภาพเคลื่อนไหวอย่าง GIF ได้ (ทำได้ดี แต่ Firefox เท่านั้นที่ดูเหมือนจะให้การสนับสนุนซึ่งแตกต่างจากแอนิเมชัน GIF ที่เบราว์เซอร์ทุกตัวรองรับ) ประการที่สองมีปัญหาการสนับสนุนบางอย่างกับเบราว์เซอร์รุ่นเก่าเช่น IE6 ประการที่สามซอฟต์แวร์ที่สำคัญเช่น Photoshop มีรูปแบบการใช้งานที่แย่มาก (Damn you, Adobe!) PNG-8 สามารถเก็บได้ 256 สีเท่านั้นเช่น GIF
เหมาะสำหรับ: สิ่งสำคัญที่ PNG-8 ทำได้ดีกว่า GIF คือการสนับสนุนอัลฟ่าโปร่งใส
PNG-24 - Lossless / Direct
PNG-24 เป็นรูปแบบที่ยอดเยี่ยมที่รวมการเข้ารหัสแบบไม่มีการสูญเสียเข้ากับสีโดยตรง (หลายพันสีเช่นเดียวกับ JPEG) มันเหมือนกับ BMP ในเรื่องนั้นมากยกเว้น PNG ที่บีบอัดรูปภาพจริง ๆ มันจึงส่งผลให้ไฟล์มีขนาดเล็กลงมาก น่าเสียดายที่ไฟล์ PNG-24 จะยังคงมีขนาดใหญ่กว่า JPEG (สำหรับรูปภาพ) และ GIF / PNG-8s (สำหรับโลโก้และกราฟิก) ดังนั้นคุณยังต้องพิจารณาหากคุณต้องการใช้งานจริง
แม้ว่า PNG-24s จะอนุญาตให้มีหลายพันสีในขณะที่มีการบีบอัด แต่ก็ไม่ได้มีวัตถุประสงค์เพื่อแทนที่ภาพ JPEG ภาพถ่ายที่ถูกบันทึกเป็น PNG-24 น่าจะมีขนาดใหญ่กว่าภาพ JPEG ที่เทียบเท่าอย่างน้อย 5 เท่าโดยมีการปรับปรุงคุณภาพการมองเห็นให้น้อยมาก (แน่นอนว่าอาจเป็นผลลัพธ์ที่พึงประสงค์หากคุณไม่กังวลเกี่ยวกับขนาดไฟล์และต้องการได้ภาพที่มีคุณภาพดีที่สุดเท่าที่จะทำได้)
เช่นเดียวกับ PNG-8 PNG-24 รองรับอัลฟ่าโปร่งใสเช่นกัน
SVG - Lossless / Vector
ประเภทไฟล์ที่กำลังได้รับความนิยมมากขึ้นในปัจจุบันคือ SVG ซึ่งแตกต่างจากที่กล่าวมาทั้งหมดข้างต้นซึ่งเป็นรูปแบบไฟล์เวกเตอร์ (ด้านบนเป็นแบบแรสเตอร์ทั้งหมด) ซึ่งหมายความว่ามันประกอบด้วยเส้นและส่วนโค้งแทนที่จะเป็นพิกเซล เมื่อคุณซูมเข้าภาพเวกเตอร์คุณยังคงเห็นเส้นโค้งหรือเส้น เมื่อคุณขยายภาพแรสเตอร์คุณจะเห็นพิกเซล
ตัวอย่างเช่น:
ซึ่งหมายความว่า SVG เหมาะสำหรับโลโก้และไอคอนที่คุณต้องการรักษาความคมชัดบนหน้าจอ Retina หรือขนาดต่าง ๆ นอกจากนี้ยังหมายถึงโลโก้ SVG ขนาดเล็กที่สามารถใช้งานในขนาดที่ใหญ่กว่า (ใหญ่กว่า) โดยไม่ลดคุณภาพของภาพ - สิ่งที่ต้องมีขนาดใหญ่กว่า (ในแง่ของขนาดไฟล์) ด้วยรูปแบบแรสเตอร์
ขนาดไฟล์ SVG นั้นเล็กมากแม้ว่าจะมีขนาดใหญ่มากซึ่งถือว่ายอดเยี่ยม อย่างไรก็ตามควรคำนึงถึงความคุ้มค่าที่ขึ้นอยู่กับความซับซ้อนของรูปร่างที่ใช้ SVG ต้องการพลังการประมวลผลมากกว่าภาพแรสเตอร์เนื่องจากการคำนวณทางคณิตศาสตร์เกี่ยวข้องกับการวาดเส้นโค้งและเส้น หากโลโก้ของคุณซับซ้อนเป็นพิเศษมันอาจทำให้คอมพิวเตอร์ของผู้ใช้ช้าลงและยังมีขนาดไฟล์ที่ใหญ่มาก สิ่งสำคัญคือคุณต้องทำให้รูปร่างเวกเตอร์ของคุณง่ายขึ้นเท่าที่จะทำได้
นอกจากนี้ไฟล์ SVG จะถูกเขียนเป็น XML และสามารถเปิดและแก้ไขใน text editor (!) นี่หมายความว่าคุณค่าของมันสามารถจัดการได้ทันที ตัวอย่างเช่นคุณสามารถใช้ JavaScript เพื่อเปลี่ยนสีของไอคอน SVG บนเว็บไซต์เหมือนกับข้อความที่คุณต้องการ (เช่นไม่ต้องการรูปภาพที่สอง) หรือแม้แต่ทำให้เคลื่อนไหว
โดยรวมแล้วจะดีที่สุดสำหรับรูปร่างที่เรียบง่ายเช่นโลโก้หรือกราฟ
ฉันหวังว่าจะช่วย!
JPEG ไม่เบาสำหรับรูปภาพทุกประเภท (หรือแม้แต่มากที่สุด) มุมและเส้นตรงและ "เติม" (บล็อกของสีทึบ) จะปรากฏพร่ามัวหรือมีสิ่งประดิษฐ์อยู่ในนั้นขึ้นอยู่กับระดับการบีบอัด เป็นรูปแบบที่สูญเสียและเหมาะที่สุดสำหรับภาพถ่ายที่คุณไม่สามารถมองเห็นสิ่งประดิษฐ์ได้ชัดเจน เส้นตรง (เช่นในภาพวาดและการ์ตูนและอื่น ๆ ) บีบอัดได้ดีมากใน PNG และไม่มีการสูญเสีย ควรใช้ GIF เฉพาะเมื่อคุณต้องการความโปร่งใสในการทำงานใน IE6 หรือคุณต้องการภาพเคลื่อนไหว GIF รองรับ palette 256 สีเท่านั้น แต่ยังไม่สูญเสีย
ดังนั้นโดยทั่วไปนี่คือวิธีการตัดสินใจรูปแบบภาพ:
และตามที่แสดงความคิดเห็นหากคุณไม่แน่ใจว่าจะมีคุณสมบัติอย่างไรให้ลองแต่ละรูปแบบด้วยอัตราส่วนการบีบอัดที่แตกต่างกันและชั่งน้ำหนักคุณภาพและขนาดของภาพแล้วเลือกว่าคุณคิดว่าอะไรดีที่สุด ฉันแค่ให้กฎง่ายๆ
ฉันมักจะไปกับ PNG เนื่องจากมีข้อได้เปรียบเหนือ GIF เล็กน้อย เคยมีข้อ จำกัด สิทธิบัตรใน GIF แต่สิ่งเหล่านี้หมดอายุแล้ว
GIF เหมาะสำหรับการวาดเส้นขอบที่คม (เช่นโลโก้) ที่มีจำนวนสี จำกัด วิธีนี้ใช้ประโยชน์จากการบีบอัดแบบไม่สูญเสียรูปแบบซึ่งสนับสนุนพื้นที่ราบของสีสม่ำเสมอด้วยขอบที่กำหนดไว้อย่างดี (ตรงกันข้ามกับ JPEG ซึ่งให้การไล่ระดับสีที่ราบรื่นและภาพที่นุ่มนวล)
GIF สามารถใช้กับภาพเคลื่อนไหวขนาดเล็กและคลิปภาพยนตร์ความละเอียดต่ำ
ในมุมมองของข้อ จำกัด ทั่วไปในจานสี GIF ถึง 256 สีมันมักจะไม่ใช้เป็นรูปแบบสำหรับการถ่ายภาพดิจิตอล ช่างภาพดิจิตอลใช้รูปแบบไฟล์ภาพที่สามารถสร้างสีได้หลากหลายเช่น TIFF, RAW หรือ JPEG ที่สูญเสียซึ่งเหมาะสำหรับการบีบอัดภาพ
รูปแบบ PNG เป็นทางเลือกที่นิยมสำหรับรูปภาพ GIF เนื่องจากใช้เทคนิคการบีบอัดที่ดีกว่าและไม่มีขีด จำกัด 256 สี แต่ PNG ไม่รองรับภาพเคลื่อนไหว รูปแบบ MNG และ APNG ทั้งสองมาจาก PNG สนับสนุนภาพเคลื่อนไหว แต่ไม่ได้ใช้กันอย่างแพร่หลาย
JPEG จะมีคุณภาพไม่ดีบริเวณขอบคมเป็นต้นและด้วยเหตุนี้จึงไม่เหมาะกับเว็บกราฟิกส่วนใหญ่ มันเก่งในรูปถ่าย
เมื่อเทียบกับ GIF นั้น PNG มีการบีบอัดที่ดีกว่าพาเล็ตที่ใหญ่ขึ้นและคุณสมบัติอื่น ๆ รวมถึงความโปร่งใส และมันก็ไม่มีความสูญเสีย
GIF ถูก จำกัด ไว้ที่ 256 สีและไม่สนับสนุนความโปร่งใสที่แท้จริง คุณควรใช้ PNG แทน GIF เพราะมีการบีบอัดและคุณสมบัติที่ดีกว่า PNG นั้นยอดเยี่ยมสำหรับภาพขนาดเล็กและเรียบง่ายเช่นโลโก้ไอคอน ฯลฯ
JPEG มีการบีบอัดที่ดีกว่าพร้อมรูปภาพที่ซับซ้อนเช่นภาพถ่าย
มีแฮ็คที่สามารถทำได้เพื่อใช้ภาพ GIF เพื่อแสดงสีที่แท้จริง หนึ่งสามารถเตรียมภาพเคลื่อนไหว GIF ด้วย 256 เฟรมสีที่มีความล่าช้า 0 เฟรมและตั้งค่าภาพเคลื่อนไหวที่จะแสดงเพียงครั้งเดียว ดังนั้นเฟรมทั้งหมดสามารถแสดงในเวลาเดียวกัน ในตอนท้ายภาพ GIF สีจริงจะถูกแสดงผล
ซอฟต์แวร์จำนวนมากมีความสามารถในการสร้างภาพ GIF ดังกล่าว อย่างไรก็ตามขนาดไฟล์ที่ส่งออกมีขนาดใหญ่กว่าไฟล์ PNG จะต้องใช้ถ้าจำเป็นจริงๆ
png มี pallete สีที่กว้างกว่า gif และ gif ที่เหมาะสมในขณะที่ png ไม่ได้ gif สามารถสร้างภาพเคลื่อนไหวได้สิ่งที่ png ปกติไม่สามารถทำได้ png-transparent รองรับเบราว์เซอร์ล่าสุดโดยประมาณล่าสุดกว่า IE6 แต่มีการแก้ไข Javascript สำหรับปัญหานั้น สนับสนุนอัลฟาโปร่งใสทั้งสอง โดยทั่วไปแล้วฉันจะบอกว่าคุณควรใช้ png สำหรับ webgraphics ส่วนใหญ่ในขณะที่ใช้ jpeg สำหรับรูปถ่าย, ภาพหน้าจอหรือคล้ายกันเนื่องจากการบีบอัด png นั้นทำงานได้ไม่ดีนัก
GIF ขึ้นอยู่กับจานสี 256 สีต่อภาพ (อย่างน้อยก็ในรูปแบบพื้นฐาน) PNG สามารถทำ "TrueColour" ได้เช่น 16.7 ล้านสีนอกกรอบ Lossless PNG บีบอัดได้ดีกว่า lossless GIF GIF สามารถทำความโปร่งใส "ไบนารี" (ความทึบ 0% หรือความทึบ 100%) PNG สามารถจัดการกับแผ่นใสได้
สรุปหากคุณไม่จำเป็นต้องใช้ภาพอัลฟ่าโปร่งใสและรองรับ IE6 PNG อาจเป็นตัวเลือกที่ดีกว่าเมื่อคุณต้องการภาพพิกเซลที่สมบูรณ์แบบสำหรับภาพเวกเตอร์และเช่นนั้น JPG ไม่สามารถถ่ายภาพได้
ตั้งแต่ปีพ. ศ. 2561 เรามีรูปแบบใหม่หลายรูปแบบรองรับรูปแบบก่อนหน้าได้ดีขึ้นและใช้วิดีโอแทนรูปภาพได้อย่างชาญฉลาด
สำหรับภาพถ่าย
jpg - ยังเป็นรูปแบบภาพที่รองรับได้อย่างกว้างขวางที่สุด
webp- รูปแบบใหม่จาก google ศักยภาพที่ดีแม้ว่าการสนับสนุนเบราว์เซอร์จะไม่ดี
สำหรับไอคอนและกราฟิก
svg- เมื่อใดก็ตามที่เป็นไปได้ มันปรับขนาดได้ดีในหน้าจอเรติน่าแก้ไขใน text editor และปรับแต่งได้ด้วย JS / CSS ถ้าโหลดใน DOM
png- ถ้าเกี่ยวข้องกับกราฟิกแรสเตอร์ (เช่นเมื่อสร้างใน Photoshop) รองรับความโปร่งใสซึ่งจำเป็นอย่างยิ่งสำหรับกรณีการใช้งานนี้
สำหรับอนิเมชั่น
svg- บวกภาพเคลื่อนไหว css สำหรับกราฟิกแบบเวกเตอร์ ข้อดีทั้งหมดของ svg + power ของ css animation
gif - ยังเป็นรูปแบบภาพเคลื่อนไหวที่มีการรองรับอย่างกว้างขวางที่สุด
mp4- หากภาพเคลื่อนไหวเป็นวิดีโอคลิปสั้น ๆ Twitter / Whatsapp แปลง gif เป็น mp4
apng- การสนับสนุนเบราว์เซอร์ที่ดี (เช่นไม่มี IE, Edge) แต่การสร้างมันไม่ตรงไปตรงมาเหมือนกับ gif
webp- ใกล้กับการใช้ mp4 การสนับสนุนแย่
นี่เป็นการเปรียบเทียบรูปแบบภาพเคลื่อนไหวต่างๆที่ดี
ในที่สุดรูปแบบใดก็ตามให้แน่ใจว่าได้ปรับให้เหมาะสม - มีเครื่องมือสำหรับแต่ละรูปแบบ (เช่น SVGO, Guetzli, OptiPNG เป็นต้น) และสามารถประหยัดแบนด์วิดท์ได้มาก
ความแตกต่างที่สำคัญคือ GIF ได้รับการจดสิทธิบัตรและได้รับการสนับสนุนอย่างกว้างขวางมากขึ้น PNG เป็นข้อมูลจำเพาะแบบเปิดและไม่รองรับความโปร่งใสของอัลฟาใน IE6 การสนับสนุนได้รับการปรับปรุงใน IE7 แต่ไม่ได้รับการแก้ไขอย่างสมบูรณ์
เท่าที่ขนาดไฟล์จะไป GIF มีพาเลทสีเริ่มต้นที่เล็กกว่าดังนั้นพวกเขาจึงมีแนวโน้มที่จะมีขนาดไฟล์ที่เล็กลงได้อย่างรวดเร็วในครั้งแรก ไฟล์ PNG มีพาเลทเริ่มต้นที่มีขนาดใหญ่กว่าอย่างไรก็ตามคุณสามารถย่อขนาดพาเลทสีเพื่อที่ว่าเมื่อทำเช่นนั้นไฟล์เหล่านั้นจะทำให้ไฟล์มีขนาดเล็กกว่า GIF ปัญหาอีกครั้งคือคุณสมบัตินี้ไม่ได้รับการสนับสนุนใน Internet Explorer
นอกจากนี้เนื่องจาก PNG สามารถรองรับความโปร่งใสของอัลฟาจึงเป็นตัวเลือกเดียวหากคุณต้องการรูปแบบของความโปร่งใสนอกเหนือจากความโปร่งใสแบบไบนารี
หากคุณเลือกใช้ JPEG และคุณกำลังจัดการกับรูปภาพสำหรับเว็บไซต์คุณอาจต้องการพิจารณาเครื่องมือเข้ารหัสแบบรับรู้โดยGoogle Guetzliซึ่งมีให้ใช้งานฟรี จากประสบการณ์ของฉันสำหรับคุณภาพคงที่ Guetzli ผลิตไฟล์ขนาดเล็กกว่าไลบรารีการเข้ารหัส JPEG มาตรฐานในขณะที่ยังคงความเข้ากันได้กับมาตรฐาน JPEG (ภาพของคุณจะมีความเข้ากันได้เหมือนกับภาพ JPEG ทั่วไป)
ข้อเสียเปรียบเพียงว่า Guetzli ใช้เวลามากของเวลาในการเข้ารหัส .. แต่นี้จะทำเพียงครั้งเดียวเมื่อคุณเตรียมภาพสำหรับเว็บไซต์ในขณะที่ผลประโยชน์ยังคงอยู่ตลอดไป! รูปภาพขนาดเล็กจะใช้เวลาในการดาวน์โหลดน้อยลงดังนั้นความเร็วเว็บไซต์ของคุณจะเพิ่มขึ้นในการใช้งานทุกวัน
GIF มีจานสี 8 บิต (256 สี) ซึ่ง PNG เป็นจานสีสูงสุด 24 บิต ดังนั้น PNG สามารถรองรับสีได้มากขึ้นและแน่นอนว่าอัลกอริทึมรองรับการบีบอัด
@aarjithn ชี้ให้เห็นว่าWebPเป็นตัวแปลงสัญญาณสำหรับจัดเก็บภาพถ่าย
นอกจากนี้ยังเป็นตัวแปลงสัญญาณเพื่อจัดเก็บภาพเคลื่อนไหว (ลำดับภาพเคลื่อนไหว) ตั้งแต่ปี 2020 เบราว์เซอร์หลักส่วนใหญ่ได้รับการสนับสนุนนอกกรอบ ( ตารางความเข้ากันได้ ) หมายเหตุสำหรับWIC จะมีปลั๊กอินให้ใช้งาน
มันมีข้อดีเหนือกว่า GIF เพราะมันใช้ตัวแปลงสัญญาณวิดีโอ VP8และมีช่วงสีที่กว้างกว่า GIF โดยที่ GIF จำกัด ให้ 256 สีมันขยายเป็น 2 24 = 16777216 สียังคงประหยัดพื้นที่จำนวนมาก