🔥 รู้หรือไม่ ?! เดี๋ยวนี้ Image Format ที่เขาใช้กันบนเว็บไม่ได้มีแค่ JPEG, PNG และ GIF แล้วนะ
.
แล้วมันมีแบบไหนบ้างล่ะ ? แต่ละแบบเหมาะกับงานแบบใด ? เก็บคำถามเหล่านี้ไว้ แล้วมาหาคำตอบไปพร้อม ๆ กับแอดได้ในโพสต์นี้เลยจ้า !!
.
ก่อนอื่นเรามารู้จักแบบที่เราคุ้นเคยกันก่อน นั่นคือ JPEG, PNG และ GIF
.
📷 JPEG
.
ย่อมาจาก Joint Photographic Experts Group เป็นไฟล์ที่อยู่คู่กับคนทำเว็บมานานมาก ๆ โดยมีไฟล์ขนาด คุณภาพดี แต่หากมีการบีบอัดอาจจะทำให้สูญเสียคุณภาพลงได้ จึงไม่เหมาะกับงานที่ต้องการความละเอียดสูง รองรับการแสดงผลได้ทุกเบราว์เซอร์
.
📷 PNG
.
ย่อมาจาก Portable Network Graphics เป็น Format ที่มีคุณภาพดีกว่า JPEG แต่จะมีขนาดไฟล์ใหญ่กว่า เหมาะกับการแสดงผลโลโก้ ภาพถ่าย หรือข้อความ ที่ต้องการความละเอียดสูง รองรับได้ทุกเบราว์เซอร์
.
📷 GIF
.
ย่อมาจาก Graphic Interchange Format เป็นไฟล์ภาพแบบเคลื่อนไหว แสดงค่าสีได้สูงสุดเพียง 256 มีไฟล์ขนาดเล็ก เหมาะสำหรับการทำภาพเคลื่อนไหว หรือกราฟิกแบบง่าย ๆ บนเว็บ รองรับการแสดงผลได้ทุกเบราว์เซอร์
.
📷 SVG
.
ย่อมาจาก Scalable Vector Graphics เป็น Image Format แบบกราฟิก 2 มิติ สร้างขึ้นด้วยสมการทางคณิตศาสตร์ ทำให้แสดงผลได้คมชัด และมีคุณภาพสูง ย่อ/ขยายได้ไม่แตก มีขนาดไฟล์มากกว่า Format อื่น ๆ ถ้าใช้เยอะ ๆ อาจจะทำให้เว็บโหลดช้าลงได้ เหมาะกับการแสดงผลรูปภาพที่ต้องการความละเอียดสูง ซึ่งเจ้า SVG รองรับการแสดงผลบนเบราว์เซอร์รุ่นใหม่ ๆ ไม่ว่าจะเป็น Chrome, Firefox, Opera และ Microsoft Edge เป็นต้น
.
มาต่อกันที่ Format ใหม่ ๆ ที่เราไม่คุ้นเคยกันบ้าง
.
📷 WebP
.
เป็นมาตรฐานไฟล์ภาพจาก Google ซึ่งเป็นการบีบอัดไฟล์ภาพให้เล็กลงกว่าเดิม (เล็กกว่า JPEG ถึง 25-34%) แต่คุณภาพยังดีเหมือนเดิมนั่นเอง ซึ่งถ้าใช้แสดงผลบนเว็บจะทำให้เว็บสามารถโหลดได้ไวมากขึ้นด้วย รองรับการแสดงผลบนเบราว์เซอร์ ได้แก่ Chrome, Firefox, Opera mini และ Microsoft Edge เป็นทางเลือกใหม่สำหรับคนที่ไม่อยากใช้ JPEG และ PNG
.
📷 AVIF
.
ชื่อเต็ม ๆ ของมันก็คือ AV1 Image File Format พัฒนาโดย Alliance for Open Media (AOMedia) ไฟล์ภาพเล็กลงกว่าเดิมโดยคุณภาพยังเหมือนเดิม ถ้าเทียบกับ JPEG แล้วจะลดลงถึง 50% และเทียบกับ WebP จะลดลง 30% รองรับการแสดงผลบน Google Chrome, Firefox และ Android ซึ่งมันเป็น Image Format รูปแบบใหม่จึงมีเบราว์เซอร์รองรับไม่เยอะ ซึ่งในอนาคตอาจจะใช้แทน JPEG ได้นั่นเอง
.
ก็จบกันไปแล้วกับ Image Format ที่สามารถใช้ทำ Web Application เพื่อน ๆ ก็ไปเลือกใช้ให้เหมาะกับงานของตัวเองได้เลย และหวังว่าโพสต์นี้จะเป็นประโยชน์กับเพื่อน ๆ นะคะ ❤️
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#webdeveloper #imageformat #BorntoDev
vector graphics 在 Understanding Vector Graphics — Using SVG with CSS3 and ... 的推薦與評價
Vector graphics consist of mathematical descriptions of shapes as a combination of these numerical vectors. Because the vector graphics define the path that ... ... <看更多>