ลิงค์เพื่อนบ้าน | ติดต่อโฆษณา | ติดต่อเรา
Dec 26

รู้ให้ลึก รู้ให้จริง JPG / GIF / PNG แตกต่างกันอย่างไร?

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

JPG/JPEG

jpg หรือ jpeg นั้นย่อมาจาก Joint Photographic Experts Group ซึ่งเป็นหนึ่งในนามสกุลไฟล์ภาพที่นิยมมากที่สุดที่เว็บบราวเซอร์สามารถแสดงผลได้ครับ โดยที่ JPG นั้นเป็นภาพแบบ Lossy Compression หรือให้เข้าใจกันง่ายๆก็คือ มีการบีบอัดข้อมูลต่างๆของภาพอย่างเช่น สี ความคมชัดของภาพครับ

  • ข้อดีของ JPEG : สามารถแสดงผลได้ถึง 16 ล้านสี จึงเหมาะกับภาพที่เป็นภาพถ่ายที่มีการเก็บข้อมูลสีหลายสี หรือภาพกราฟฟิกที่มีความซับซ้อนครับ
  • ข้อเสียของ JPEG : ขนาดไฟล์ภาพค่อนข้างใหญ่ ซึ่งถ้าคุณต้องการขนาดไฟล์ภาพที่เล็กลงนั้นต้องแลกด้วยการเสียความละเอียดของภาพไปครับผม JPEG จึงไม่เหมาะกับภาพประเภทที่มีตัวหนังสือ หรือภาพกราฟฟิกธรรมดาๆ ไม่มีความละเอียดของสีมาก
รู้ไหมว่า? ขนาดภาพที่ JPEG รองรับได้สูงสุดคือ 65535 x 65535 px และทุกครั้งของการเซฟรูป JPEG จะมีการสูญเสียข้อมูลภาพทุกครั้ง!

GIF

GIF (อ่านว่า จิฟ) ย่อมาจาก Graphic Interchange Format เป็นไฟล์ภาพที่เว็บสามารถแสดงผลได้เช่นเดียวกับ JPEG แต่ที่แตกต่างคือ GIF เป็นไฟล์ภาพแบบ Lossless Compression หรือ ไม่มีการสูญเสียข้อมูลเมื่อเกิดการเซฟหรือบีบอัดไฟล์ภาพ

  • ข้อดีของ GIF : ไม่มีการสูญเสียข้อมูลเวลาเซพ, สามารถทำอนิเมชั่นได้ และยังสามารถทำให้รูป Transparent หรือทะลุเห็นพื้นหลังได้อีกด้วย
  • ข้อเสียของ GIF : แสดงสีสูงสุดได้แค่ 256 สี

รู้ไหมว่า? วิธีการบีบอัดไฟล์ของ GIF นั้นเรียกว่า Lempel-Ziv-Welch (LZW) ซึ่งเป็นลิขสิทธิ์ของบริษัท Unisys และ ComputerServe ซึ่งคนที่เขียนโปรแกรมที่สามารถเซฟไฟล์ออกมาเป็น GIF ได้นั้นต้องจ่ายค่าลิขสิทธิ์ให้กับ Unisys ด้วย แต่ปัจจุบันสิทธิบัตรการคิดค้นของ GIF ได้หมดอายุลงไปเป็นที่เรียบร้อยแล้วครับ

PNG

PNG (อ่านว่า ปิง) ย่อมาจาก Portable Network Graphics เป็นรูปแบบไฟล์ภาพที่ถูกคิดค้นเพื่อมาแทนที่ GIF ที่มีปัญหาเรื่องลิขสิทธิ์ ซึ่งคุณสมบัตรของ PNG นั้นจะคล้ายกับ GIF เลยครับ

ความแตกต่างระหว่าง PNG และ GIF

  1. PNG ไม่สามารถทำ Animation แต่ GIF ทำได้
  2. PNG มีการบีบอัดไฟล์ที่ดีและเล็กมากขึ้น 5%-25% เมื่อเทียบกับ GIF ในภาพเดียวกัน
  3. PNG สามารถเลือกเซฟภาพเป็น 8 Bit (256 สี) หรือ 24 Bit (16 ล้านสี) ได้ ในขณะที่ GIF เซฟได้สูงสุด 256 สี
  4. PNG ทำพื้นหลังให้เป็น Transparent ได้ดีกว่า GIF (เยอะ)
รู้ไหมว่า? คุณสมบัติ Transparent ของ PNG ใช้ไม่ได้กับ Internet Explorer 6 หรือต่ำกว่า

ตัวอย่างการเปรียบเทียบความแตกต่าง (โลโก้)

(รูปข้างล่างนี้ขอยืมมาจากเว็บ Sitepoint เพื่อเป็นตัวอย่างนะครับ)

ไฟล์ GIF (Transparent) ขนาด 10.17 k

ไฟล์ JPG ขนาด 63.5 k

ไฟล์ PNG-8 ขนาด 9.16 k

ไฟล์ PNG-24 ขนาด 17.74 k

จะเห็นได้ว่า การทำรูปโลโก้ที่ได้คุณภาพที่ดีที่สุดนั้นคือ PNG-24 ส่วน PNG-8 และ GIF ยังแค่พอใช้ เพราะมีปัญหา Transparent ไม่แนบเนียนครับ

สรุปแล้วรูปไหนควรใช้ไฟล์ภาพรูปแบบใด ?

  • ภาพถ่าย : JPEG ดีที่สุด
  • โลโก้, พื้นหลังเว็บ (ไม่มี Gradient), รูปส่วนต่างๆของเว็บ (ปุ่ม, ไอคอน) : GIF และ PNG-8 ดีที่สุด
  • รูปที่เอฟเฟ็คอย่าง Drop Shadow, Glow หรือรูปที่มี Transparent : PNG-24 ดีที่สุด

About the author

KOTZHUL คนก่อตั้งเว็บ kotzhul.com กำลังศึกษาอยู่ที่ วิทยาลัยนานาชาติ มหาวิทยาลัยกรุงเทพ สาขาคอมพิวเตอร์กราฟฟิกและมัลติมีเดีย มีความสนใจทางด้านคอมพิวเตอร์กราฟฟิก และเว็บดีไซน์ ปัจจุบันเป็นฟรีแลนซ์รับออกแบบเว็บไซต์ และงานกราฟฟิกต่างๆ :-)

  • http://twitter.com/Chokprakan Choky Choky

    แบบนี้นี่เอง

  • Eclair wong

    เข้าใจง่ายดีอ่ะ น่าสน  :)

  • Thanatthanan

    ได้ความรู้มากเลยครับ