Chapter 9
การออกแบบกราฟิกสำหรับเว็บไซต์
กราฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งสร้างความสวยงามให้กับเว็บไซต์
ปัญหาที่เกิดขึ้นกับการสร้างกราฟิกคือ การเลือกใช้รูปแบบกราฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปและกราฟิกส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟิกสำหรับเว็บ
รูปแบบกราฟิกสำหรับเว็บแบ่งออกเป็น 3 รูปแบบหลักๆคือ
1.GIF ย่อมาจาก Graphic Interchange Format
-มีระบบสีแบบ Index ซึ่งมีข้อมูลขนาด 8 บิต ทำให้มีสีมากสุดอยู่ที่ 256 สี
-มีการบีบอัดข้อมูลแบบไม่สูญเสีย ( lossless ) หมายความว่าจะไม่มีการสูญเสียข้อมูลจากการบีบอัด
GIFใช้การบีบอัดที่เรียกว่า LZW ( Lempel-Ziv-Welch ) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยนำประโยชน์จากการซ้ำซ้อนกันของข้อมูลมาใช้
*ไฟล์ในแนวนอนจะมีขนดเล็กกว่า เนื่องจากการนับความซ้ำซ้อนกันในแนวนอนของข้อมูล
-ไม่ขึ้นกับระบบปฏิบัติการใดๆ
-ใช้กับเบรวเซอร์ได้ทุกชนิด
-มีคุณสมบัติในการเคลื่อนไหว
-มีคุณสมบัติ Interlacing คือการบันทึกไฟล์เป็น 4 ระดับคือที่คุณภาพ 12.5, 25, 50 และ 100% ตามลำดับ
*ซึ่งคุณสมบัตินี้จะช่วยให้ผู้ใช้เห็นภาพที่กำลังดาวน์โหลดชัดเจนขึ้นเรื่อยๆ
*ข้อเสียคือขนาดของไฟล์จะเพิ่มขึ้นเล็กน้อย
-คุณสมบัติในการเคลื่อนไหว
-รูปที่ประกอบด้วยหลายๆเฟมต่อเนื่องกันในรูปเดียว เมื่อมีการแสดงผลจะเห็นรูปที่มีการเปลี่ยนแปลงในเฟมต่างๆอย่างต่อเนื่อง
-ข้อดีคือไม่ต้องอาศัย plug-inใดๆเนื่องจากทุกๆเบราเซอร์สนับสนุนคุณสมบัตินี้
2.JPG ย่อมาจาก Joint Photographic Expert Group
-มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ถึง 16.7ล้านสี
-ใช้ระบบบีบอัดสีที่มีลักษณะสูญเสียรายละเอียดบางส่วนของภาพไป ( lossy )
-ควรใช้กับรูปถ่านหรือรูปที่มีการไล่ขนาดสีอย่างละเอียด
-ไม่ขึ้นกับระบบปฏิบัติการใดๆ
-ใช้กับเบรวเซอร์ได้ทุกชนิด
-ระบบในการบีบอัดข้อมูล
3.PNG ย่อมาจาก Portable Network Graphic
-มีระบบควมคุมค่าแกมม่า ( Gamma ) และความโปร่งใส ( Transparency ) ในตัวเอง
-ไม่สามารถทำ Animation ได้
-ทำพื้นหลังให้กับ Transparent ได้ดีกว่า GIF
-สามารถบีบอัดได้เล็กกว่า GIF ประมาณ 10-30%
คำแนะนำในการเลือกใช้ชนิดของไฟล์ภาพ
-ภาพถ่าย : JPG /JPEG ดีที่สุด
-โลโก้, พื้นหลังเว็บ, รูปส่วนต่างๆของเว็บ ( ปุ่ม, ไอคอน ) : GIFและPNG-8 ดีที่สุด
-รูปที่เป็นเอฟเฟกอย่าง Drop Shadow , Glow หรือรูปที่มี Transparent : PNG-24 ดีที่สุด
