รูปแบบใดจะดีกว่าสำหรับการบันทึกรูปภาพสำหรับเว็บไซต์ PNG หรือ SVG?

เมื่อส่งออก / บันทึกภาพที่มีพื้นหลังโปร่งใสที่มีไว้สำหรับเว็บไซต์ฉันควรบันทึกเป็น PNG หรือ SVG หรือไม่ ทำไม?

ฉันจะบอกว่า PNG เพียงเพราะดูเหมือนว่าจะเป็นรูปแบบที่ยอมรับได้มากกว่า SVG

คำตอบง่ายๆที่นี่ใช้ทั้งคู่

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

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

การใช้เพียงวิธีเดียวหรืออย่างอื่นคุณจะต้องเสียสละความเข้ากันได้แบบย้อนกลับหรือการปรับปรุงแบบก้าวหน้า

การชั่งน้ำหนักซึ่งกันและกัน PNG จะได้รับการสนับสนุนอย่างแน่นอนจากเบราว์เซอร์มากกว่า SVG ณ เวลาปัจจุบันแต่ความละเอียดของอุปกรณ์ที่เพิ่งเปิดตัวเพิ่มขึ้นเรื่อย ๆ หมายความว่า PNG จะต้องได้รับการแสดงบนพื้นฐานของความละเอียดที่หลากหลาย^{(ผ่าน Media Queries, JavaScript หรือ User Agent Sniffing)}หรือปรับขนาดโดยเบราว์เซอร์ซึ่งอาจให้ผลลัพธ์ที่ไม่สมบูรณ์

ดูสิ่งที่เรารู้ในอนาคต ความละเอียดที่สูงขึ้นตลอดไปการสนับสนุนที่กว้างขึ้นและการใช้ SVG ที่กว้างขึ้นผ่านอินเทอร์เน็ต มันสมเหตุสมผลที่จะสร้างสิ่งที่กำลังจะมาถึง

โดยทั่วไปเว็บไซต์ควรถูกสร้างให้มีอายุการใช้งานยาวนานหลายปี ในอีก 5 ปีข้างหน้าเว็บไซต์ที่ใช้งานร่วมกันได้ของคุณอาจดูน่าทึ่งสำหรับผู้ใช้อินเทอร์เน็ต 2% ที่ยังใช้เบราว์เซอร์รุ่นเก่าอยู่ แต่เบราว์เซอร์รุ่นล่าสุดที่มีความละเอียดต่ำมากก็ค่อนข้างแย่ การประนีประนอม

ทางเลือกของคุณในเดือนพฤศจิกายน 2014

1. PNG เท่านั้น

   • เพื่อคุณภาพคุณจะต้องให้บริการอย่างน้อยห้ารุ่นที่แตกต่างกันขึ้นอยู่กับขนาดหน้าจอและความละเอียด - และนั่นคือการคาดเดาที่อนุรักษ์นิยมมากคุณสามารถจบด้วยภาพเดียวกันได้ 10 - 15 เวอร์ชันหากคุณต้องการให้ละเอียดมาก . นอกจากนี้ยังใช้เวลาในการดำเนินการ

   • หากคุณเลือกที่จะให้บริการกราฟิกเดียวและมีการปรับขนาดเบราว์เซอร์ผลลัพธ์อาจจะน้อยกว่าที่สมบูรณ์แบบและอาจน่าเกลียดขึ้นอยู่กับปริมาณของการปรับขนาด

   • คำสั่งสื่อจำนวนมากสามารถขยาย CSS และส่งผลเสียต่อความเร็วในการโหลดหน้าเว็บโดยไม่จำเป็น

   • จะดูดีสำหรับเบราว์เซอร์และอุปกรณ์รุ่นเก่า แต่จะไม่ดีสำหรับเบราว์เซอร์รุ่นใหม่

2. SVGs พร้อมทางเลือก PNG / JPEG / GIF เดี่ยว

   • คุณสามารถใช้ SVG ได้ทุกที่แล้วนำกลับไปใช้รูปแบบอื่นสำหรับเบราว์เซอร์ที่ไม่รองรับ SVG ข้อได้เปรียบหลักคือคุณต้องการเพียงหนึ่งไฟล์สำหรับการแก้ไขที่แตกต่างกันทั้งหมด

   • หากคุณประนีประนอมและยอมรับว่าผู้ใช้บนเบราว์เซอร์ที่ล้าสมัยสามารถใช้งานได้กับกราฟิกที่มีขนาดไม่สมบูรณ์คุณจะต้องใช้ไฟล์แต่ละไฟล์ในรูปแบบ PNG, JPEG หรือ GIF

   • การดำเนินการนี้จะใช้เวลาในการดำเนินการคล้ายกันเนื่องจาก PNG เป็นเพียงการสืบค้นสื่อ - อาจน้อยกว่าซึ่งหมายความว่าอาจมีราคาใกล้เคียงกัน

   • จะดูดีในอุปกรณ์ใหม่ทั้งหมดพร้อมกับการเสียสละที่ทำกับเทคโนโลยีเก่า

3. SVG ที่มีตัวเลือก PNG / JPEG / GIF หลายทางเลือกขึ้นอยู่กับความละเอียดและขนาดหน้าจอ

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

   • มันอาจจะใช้เวลานานเท่าที่ 1 & 2 รวมกันรวมทั้งเพิ่มเล็กน้อยสำหรับการออกกำลังกาย kinks

   • จะดูน่าทึ่งใน^{เกือบ}ทุกอุปกรณ์

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

SVG สามารถปรับขนาดได้หากคุณมีกราฟิกแบบเวกเตอร์ที่เป็นข้อได้เปรียบที่ชัดเจน สำหรับพิกเซลกราฟิกส์ PNG นั้นดีกว่า ข้อเสียคือว่า Internet Explorer รองรับ SVG เฉพาะกับรุ่นที่กำลังจะมา 9 (ก่อนที่มีปลั๊กอิน) เบราว์เซอร์มือถืออาจมีการรองรับ SVG จำกัด

แก้ไข : ตามที่ ClemDesm ชี้ให้เห็น IE เวอร์ชันเก่ากว่านั้นไม่รองรับ PNG แบบโปร่งใสทั้งหมดเนื่องจาก IE8 ที่รองรับ PNG ที่ไม่โปร่งใสทำงานได้ดี คำตอบของ Computerish มีทางออกที่ดีสำหรับการจัดการภาพเวกเตอร์ในตอนนี้: คงไว้เป็น SVG แต่ส่งออกเป็นเว็บเป็น PNG ฉันเห็นด้วยกับวิธีนี้อย่างเต็มที่

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

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

ฉันหวังว่าจะตอบคำถามของคุณ :)

แม้ว่า SVG จะไม่ได้รับการยอมรับทั่วโลกและบางคนมี PNGs ที่น่าผิดหวัง แต่ฉันก็พบว่าการสร้างไอคอนภายใน Adobe Illustrator นั้นทำได้ดีที่สุดในการปรับขนาดขึ้นหรือลงในระดับ "สมเหตุสมผล"