ปัญหาของการใช้ Icon PNG 

การใช้ไอคอนแบบ PNG บนเว็บไซต์ไม่ใช่เรื่องผิดนะครับ ผมเองเมื่อก่อนก็ใช้อยู่บ่อย ๆ หรือตอนนี้ก็ใช้บ้างตามโอกาส อย่างไรก็ตาม ไอคอนแบบ PNG เป็นไฟล์ภาพ ซึ่งไฟล์ภาพเกิดจากจุดสีวางเรียงกันทีละ 1 Pixel เวลาเราย่อ-ขยายรูป จุดสีพวกนี้ก็จะถูกบีบ หรือถูกขยาย ทำให้เกิดปัญหารูปเล็กไปจะดูไม่ออกว่าเป็นอะไร หรือรูปใหญ่ไปจะดูแตก ๆ

ปัญหารูปแตกใน Icon แบบ PNG ปัญหารูปแตกใน Icon แบบ PNG ปัญหาอีกอย่าง คือ ถ้าเราใช้รูปไอคอน 1 รูปต่อ 1 ไฟล์ ก็จะมีปัญหาว่าถ้าเรามี 100 ไอคอน ก็ต้องใช้ 100 ไฟล์ การเรียกไฟล์ทีละไฟล์จะทำให้เว็บช้าลง ถ้าใครได้อ่านเกี่ยวกับ Performance ในการโหลดเว็บ จะเจอคนพูดถึงอยู่เสมอว่าการเรียกไฟล์ (หรือ HTTP Request) หลายไฟล์จะยิ่งทำให้เว็บไซต์โหลดช้า

อย่างไรก็ตาม ปัญหานี้แก้ไขได้โดยใช้สิ่งที่เรียกว่า CSS Sprite ซึ่งเป็นการเอารูปที่ใช้ทั้งหมดมาเรียงในรูปเดียวครับ แล้วเลือกแสดงผลโดยใส่รูปเป็น background จากนั้นตั้ง width, height, background-position ใน CSS ช่วย วิธีนี้ช่วยลดจำนวนครั้งการโหลดรูปให้เหลือแค่ 1 ครั้ง และยังทำให้ขนาดรูปโดยรวมลดลงด้วย (ปกติ 10 รูป แยก 1 รูปต่อ 1 ไฟล์ ขนาดรวมกัน 20kb ถ้าใช้ CSS Sprite เหลือรูปเดียว ขนาดแค่ 13kb

Icon Font คืออะไร มีประโยชน์ยังไง

ปัจจุบันได้มีการพัฒนารูปแบบการใช้งานไอคอนส์ในรูปแบบใหม่ ซึ่งคือ ไอคอนส์ ฟอนต์ (Icons font) ซึ่งเป็นการนำไอคอนส์แต่ละแบบที่จะในมาใช้งาน บรรจุรวมเอาไว้ในฟอนต์เพียงฟอนต์เดียว  เพราะว่าฟอนต์มีคุณสมบัติคือ ในฟอนต์ ฟอนต์นึงจะมีสัญญลักษณ์หรืออักษรรวมอยู่ได้หลายตัว เรียกว่า กลิฟส์ (Glyphs) ซึ่งจะต้องทำการเขียน css เพื่อเรียกฟอนต์ออกมาใช้ และทำการแยกแยะ กลิฟส์ แต่ละตัวออกมา เพื่อระบุว่า คลาสนั้นคือ กลิฟส์ตัวไหนในฟอนต์นั้นๆ

ไอคอนส์ฟอนต์มีข้อดีตรงที่ ฟอนต์เป็น เวคเตอร์ ( Vector ) นั่นคือใช้การคำนวนเส้นและสีต่างๆจากโค๊ตทางคณิตศาษตร์ ซึ่งนั่นทำให้ย่อขยายได้อย่างไร้ขีดจำกัด เหมือนฟอนต์ ที่เวลาขยาย ปรับขนาดเท่าใด มันก็จะไม่แตกนั่นเอง ในส่วนต่อมาคือการที่มันเป็นเหมือนตัวอักษรตัวนึง เวลานำไปใช้งานจึงเพียงพิมพ์โค๊ตแค่นิดเดียวเท่านั้น และสามารถใส่ขอบ หรือเปลี่ยนสีได้ทันที หลากหลาย ตามใจชอบเลยทีเดียว

รู้จักกับ Font Awesome 

ฟ้อนต์ไอคอนฟรี ความสามารถระดับเทพ ใครเคยใช้ Twitter Bootstrap น่าจะเคยได้ยินมาบ้างครับ เพราะฟ้อนต์ไอคอนชุดนี้อยู่คู่ Bootstrap มาตั้งแต่เวอร์ชั่น 2.x แล้วครับ อย่างไรก็ตาม เราไม่จำเป็นต้องใช้ Bootstrap ก็สามารถใช้ Font Icon ชุดนี้ได้อย่างไม่มีปัญหาครับผม

 

Font Icon ชุดนี้มีทั้งหมด 300+ ไอคอนให้เลือกใช้ และยังเพิ่มขึ้นเรื่อย ๆ ในอนาคตอีกด้วย ใช้ไอคอนชุดเดียวตอบโจทย์ได้เกือบหมดแน่นอนครับ ส่วนถ้าใครกลัวว่าจะมีปัญหากับ Internet Explorer หรือเปล่า ตัวนี้ซัพพอร์ทตั้งแต่ IE7 ขึ้นไป ใช้ได้สบายใจหายห่วงครับ (ท่านใดมีปัญหาสู้รบปรบมือกับการทำเว็บไซต์บน Internet Explorer เวอร์ชั่นเก่าบ่อย ๆ ลองอ่านบทความ เทคนิคการสู้รบกับ IE6/IE7 เลยครับ