Files ประเภทไหนเหมาะสำหรับ Icon?
เหล่า UX/UI Designer ทั้งหลาย เคยสับสนและมึนงงกับไฟล์ประเภทต่างๆ ที่เคยผ่านมือผ่านตากันบ้างไหมครับว่า แต่ละประเภทมันแตกต่างกันอย่างไร? แล้วเราควรเอาไฟล์ประเภทไหนมาใช้งานกันถึงจะเหมาะสมที่สุด
ซึ่งจากบทความก่อนหน้านี้ทางผมได้เขียนเกี่ยวกับการออกแบบ System Icon หลังจากผ่านขบวนการขั้นตอนการ Design ที่กล่าวมาข้างต้นจนได้ System Icon ที่พร้อมจะนำมาใช้งานจริงแล้ว อาจจะมีการเกิดข้อสงสัยได้ว่าจะนำ Icon ทั้งหลายเหล่านั้นมาใช้งานอย่างไร ให้ Developer สามารถนำไปใช้งานได้สะดวกและง่ายที่สุด
โดยสิ่งที่ต้องคำนึงหลังจากขั้นตอน Design ก็คือ ประเภทไฟล์ของการ Export Icon นั่นเองครับ
รูปแบบการ Export ไฟล์นั้น ทางผู้เขียนจะแยกออกเป็นประเภทไฟล์ที่พบเห็นและได้ใช้งานกันบ่อยๆ สำหรับ UX/UI Designer ต่างๆ ดังนี้
PNG — Portable Network Graphics
ไฟล์ PNG หรือ Portable Network Graphics ได้ถูกคิดค้นขึ้นมาในปี 1995 เพื่อทำการทดแทนประเภทไฟล์ GIF (เดี๋ยวเราจะพูดถึงไฟล์นี้กันภายหลัง) เป็นประเภทไฟล์ที่ Designer ต่างก็คุ้นเคยกันเป็นอย่างดี (ถ้าไม่คุ้นนี่สิผมจะตกใจมาก) ส่วนมากมักจะใช้สำหรับการ Edit ภาพบนภาพอีกที เป็นไฟล์ที่สามารถแสดงผลของภาพเป็นลักษณะโปร่งใสได้ (Transparency) และไม่เสียคุณภาพของตัวภาพเมื่อมีการบีบอัดของไฟล์ (Lossless Compression) ซึ่งสามารถนำไปใช้งานได้หลากหลาย และยังสามารถ Animated เป็นภาพเคลื่อนไหวได้อีกด้วย
ในเชิงของการใช้งานสำหรับ Icon นั้นสามารถนำมาใช้ได้ค่อนข้างดี แต่อาจจะต้องแลกมาด้วยขนาดไฟล์ภาพที่มีขนาดค่อนข้างใหญ่ถ้ามีการใช้สีที่ค่อนข้างมาก หากไม่แคร์เรื่องขนาด Size ของตัวไฟล์มากนัก และต้องการให้มีรายละเอียดที่ครบถ้วน เช่นสี Gradients หรือเส้นที่คมชัด ก็เป็นอีกหนึ่ง Format ที่สามารถนำมาใช้งานสำหรับ Website และ Software Development ในระบบปฎิบัติการ iOS และ Android ได้ดี
PDF — Portable Document Format
ในปี 1993 Adobe ได้ปล่อยรูปแบบไฟล์ PDF หรือ Portable Document Format ออกมาให้โลกได้รู้จักเป็นครั้งแรก PDF เป็นไฟล์ที่สามารถรองรับ Vector Image, Text, หรือสามารถ Embedded Font ได้ด้วย ซึ่งมีประโยชน์อย่างมากสำหรับวงการสิ่งพิมพ์หรือการออกแบบเอกสารต่างๆ ตั้งแต่นั้นมา
จนเมื่อวันที่ 17 กันยายน ปี 2014 บริษัท Apple ได้ปล่อย Xcode เวอร์ชั่นที่ 6 ซึ่งเป็น Software Development Tool สำหรับระบบปฎิบัติการ macOS หรือ iOS ที่เราเรียกสั้นๆว่า Xcode 6 ให้สามารถนำ Vector ไฟล์ที่สามารถลดหรือขยายขนาดได้โดยไม่เสียคุณภาพ ในรูปแบบ Format ของไฟล์ PDF ให้สามารถนำมาใช้งานได้ สร้างความสะดวกให้กับเหล่า Developer ได้ค่อนข้างมาก
โดยที่ Developer ไม่ต้องกังวลเรื่องการจัดการกับ Icon ต่างๆ ให้เข้ากับความละเอียดของจอ (Pixel Densities)ในขนาดที่ต่างกันอีกต่อไป ตัว Xcode จะทำการสร้างขนาด Icon @1x, @2x และ @3x ให้โดยอัตโนมัติ อีกทั้งสามารถแสดงผลลักษณะโปร่งใส (Transparency) ได้ แสดงความคมชัดของเส้นและสีได้ชัดเจน เหมาะสำหรับการใช้งานของ Icon ในการออกแบบ Interface สำหรับระบบปฎิบัติการ iOS
SVG — Scalable Vector Graphics
SVG หรือ Scalable Vector Graphics เป็นไฟล์ในรูปแบบของ Vector Format ได้ปล่อยออกมาครั้งแรกในวันที่ 4 กันยายน ปี 2001 เนื่องจากเป็นไฟล์ Vector จึงทำให้สามารถลดหรือขยายขนาดได้โดยไม่เสียคุณภาพ เหมือนกับคุณลักษณะของไฟล์ PDF ซึ่งหมายความว่าคุณสามารถใช้ไฟล์ Icon ใน Format ของ SVG แค่ไฟล์เดียวในการแสดงผลบนหน้าจอที่แตกต่างกันได้ เช่นบน Mobile และ Desktop ซึ่งเหมาะมากสำหรับการใช้งานบน Responsive Site ต่างๆ
ตัวไฟล์สามารถ Animate เป็นภาพเคลื่อนไหวได้ และสามารถแสดงผลลักษณะโปร่งใส (Transparency) และคงสี Gradients ได้เป็นอย่างดี ซึ่งเป็นที่นิยมใช้กันหลากหลายโดยเฉพาะการออกแบบ Interfaces สำหรับ Website และบนระบบปฎิบัติการ Android โดยในปัจจุบันเป็นที่ยอมรับว่าการออกแบบ Icon หรือ Logo ต่างๆ ควรจะมี Format ที่เป็นไฟล์ SVG ด้วยเสมอ อีกทั้งไฟล์ SVG ยังมีความยืดยุ่นในการแก้ไข ปรับแต่ง Code ใน CSS หรือ Javascript อีกด้วย
JPEG — Joint Photographic Experts Group
ถามว่าทำไมผู้เขียนถึงกล่าวถึงไฟล์ JPEG ในบทความนี้ ไฟล์ประเภทนี้เหมาะสำหรับ Icon หรือ? ไม่เลยครับ มันไม่เหมาะเลยสักนิด ฮ่าๆๆ แต่ว่าทางผมอยากยกตัวอย่างขึ้นมา เพราะไฟล์ JPEG นั้นก็เป็นองค์ประกอบส่วนหนึ่งที่ใช้งานกันอย่างแพร่หลายใน Websites หรือ Platform ต่างๆทั่วไป ในเรื่องของไฟล์ภาพนั่นเอง
JPEG หรือ Joint Photographic Experts Group เป็นประเภทไฟล์ที่เหล่า Designer สามารถพบเห็นได้บ่อยมากที่สุดในบรรดาไฟล์ทั้งหมด ซึ่งได้ถูกสร้างขึ้นมาเมื่อช่วงปี 1986 โดยส่วนใหญ่เราจะรู้จักไฟล์ประเภทนี้ดีในลักษณะการใช้งานสำหรับ รูปภาพหรือภาพถ่ายบน Websites, Online Photos หรือ Artwork ต่างๆ
หากต้องการไฟล์ภาพที่ไม่จำเป็นต้องมีรายละเอียดที่สูงหรือคมชัดมากนัก และมี Text บนไฟล์ภาพไม่เยอะ ไฟล์ JPEG ก็ค่อนข้างตอบโจทย์ได้ดี โดยจะมีการบีบอัดข้อมูลต่างๆของภาพจึงทำให้ตัวไฟล์มีขนาด Size ที่ค่อนข้างเล็ก JPEG เป็นไฟล์ประเภท Lossy Compression ซึ่งจะสูญเสียข้อมูลความละเอียดทุกครั้งที่มีการเซฟหรือบีบอัดไฟล์ภาพ และตัวไฟล์เองไม่ Support การแสดงผลลักษณะโปร่งใส (Transparency) จึงทำให้ไม่เหมาะ จะนำมาใช้งานสำหรับ Icon นั่นเอง
GIF — Graphics Interchange Format
GIF หรือ Graphics Interchange Format ออกมาให้เห็นกันเมื่อปี 1987 โดยที่สมัยนั้นเป็นไฟล์ที่นิยมกันอย่างแพร่หลาย เนื่องจากไฟล์ GIF เป็นไฟล์ที่มีการ Limited สีของตัวภาพ (ได้สูงสุดไม่เกิน 256 สี) ทำให้ตัวไฟล์มีขนาดเล็กมากๆ และด้วยข้อจำกัดของความเร็วของ Internet ในยุคนั้น จึงทำให้ GIF ไฟล์เป็นที่นิยมแก่การส่งภาพให้กัน และนิยมนำมาใช้สำหรับการทำ Icon ที่ไม่ได้มีรายละเอียดที่มากนัก ปัจจุบันไม่ค่อยเป็นที่นิยมนำมาใช้สำหรับทำ Icon แล้วเนื่องจาก เรามีไฟล์ทางเลือกอื่นที่เหมาะสมกว่า เช่น PNG, SVG หรือ PDF นั่นเอง ไฟล์ GIF เป็นไฟล์ประเภท Lossless Compression แต่การ Limited ของสีทำให้คุณภาพของรายละเอียดของสีไม่สามารถเทียบไฟล์อย่าง PNG หรือ JPEG ได้
ปัจจุบัน GIF ไฟล์เป็นที่นิยมใช้กันอย่างสนุกสนาน บนโลก Internet ในลักษณะของ Loop Animations สั้นๆ ไม่ว่าจะเป็นข้อความหรือภาพเคลื่อนไหวสุดฮาต่างๆ เพราะ GIF ไฟล์นั้นใช้ขนาดเล็กมากเมื่อเทียบกับไฟล์ Video แต่ด้วยความก้าวหน้าของ Technology ปัจจุบัน ไฟล์ SVG และ PNG ก็สามารถ Animate เป็นภาพเคลื่อนไหวได้แล้วเช่นกัน และยังใช้พื้นที่ขนาดของไฟล์น้อยกว่าไฟล์ GIF อีกด้วย ซึ่งอาจจะทำให้ GIF ไฟล์ได้รับความนิยมลดลงไปเรื่อยๆ แต่ก็ยังติดที่ Web Browser เวอรชั่นเก่าๆยังไม่ Support ไฟล์ Animate SVG และ PNG นั่นเอง
จากที่กล่าวมาเบื้องต้น ในประสบการณ์การทำงานของผู้เขียนเอง การใช้รูปแบบไฟล์สำหรับ Icon ต่างๆ นั้นหากใช้สำหรับ Android หรือ Website จะใช้ Icon ใน Format SVG เป็นส่วนใหญ่ และหากเป็นบนระบบของ iOS นั้น จะใช้ Icon ในรูปแบบของ PDF ไฟล์ครับ เนื่องจากไฟล์สองประเภทนี้เป็นประเภท Vector Format ซึ่งหากเรานำไปใช้แสดงผลบนหน้าจอที่แตกต่างกัน ก็จะยังคงแสดงผลได้อย่างดีนั่นเองครับ
Wrap-Up
- PNG Exported ใช้ได้กับ iOS และ Android และ Website ทั่วไป ไฟล์ภาพมีขนาดค่อนข้างใหญ่ถ้าใช้สีที่ค่อนข้างมาก แต่มีความคมชัดค่อนข้างสูง สามารถ Animate เป็นภาพเคลื่อนไหวได้
- PDF Exported เหมาะกับ iOS สามารถลดหรือขยายขนาดได้โดยไม่เสียคุณภาพ
- SVG Exported เหมาะกับ Android และ Website ทั่วไป สามารถลดหรือขยายขนาดได้โดยไม่เสียคุณภาพ สามารถ Animate เป็นภาพเคลื่อนไหวได้
- JPEG เหมาะกับการใช้แสดงภาพทั่วไป ไม่ควรนำมาใช้เป็น Icon
- GIF เหมาะสำหรับภาพเคลื่อนไหว แต่คุณภาพของสีไม่ค่อยดีมากนัก
สิ่งที่เขียนในบทความนี้ เป็นการสรุปมาจากการเรียนรู้เพื่อแบ่งปันให้กับผู้อื่น หากว่ามีจุดที่ขาดตกหรืออยากรู้ตรงไหนเพิ่มเติม ก็สามารถมาพูดคุยกันได้ในช่อง Comment นะครับ
Reference:
https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg
https://medium.com/cheeky-monkey-media/wtf-ile-types-606e85c8bb88
https://medium.com/isovera/jpeg-png-gif-a-quick-guide-to-image-file-types-for-the-web-a53361dba7b5
