การออกแบบกราฟฟิกสำหรับเว็บไซต์

กราฟฟิกเป็นองค์ประกอบสำคัญของเว็บเพจ ซึ่งปัญหาส่วนใหญ่ที่เกิดขึ้นมักจะเกิดขึ้นกับการสร้างกราฟฟิก คือ การใช้ลักษณะรูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป

กราฟฟิกมี 3 รูปแบบ คือ

1. GIF ( Graphic Interchange Format )

- ได้รับความนิยมในยุดแรก

-มีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี

- การบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วย สีพื้น

2. JPG ( Joint Photographic Experts Group )

- มีข้อมูลสีขนาด 24 บิต แสดงสีได้ถึง 16.7 ล้านสี

- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)

- ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

3. PNG ( Portable Network Graphic )

- สามารถสนับสนุนสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต

- การบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)

- ควบคุมแกมม่า (Gamma) และความโปร่งใส(Transparency) ในตัวเอง

ระบบการวัดขนาดของรูปภาพ

-ใช้หน่วยวัดเป็น พิกเซล

-ความละเอียดของภาพควรใช้ หน่วย pixle per inch (ppi)

-การใช้งานจะนำหน่วย dot per inch (dpi) จะเหมาะสมกับเครื่องพริ้นท์

-ควรมีความละเอียดแค่ 72 ppt

กราฟฟิกรูปแบบ GIF

- ไม่ขึ้นอยู่กับระบบปฏิบัติการใด ๆ

- สามารถนำไปใช้กับเบราเซอร์ทุกชนิดได้โดยไม่ต้องคำนึงถึงเวอร์ชันใด ๆ

- เก็บข้อมูลสี ได้สูงสุด 8 บิต

- คุณสมบัติ Interlacing

ข้อดี คือ ผู้ใช้เห็นภาพที่กำลังดาวน์โหลดอยู่มีความชัดเจนขึ้นเรื่อย ๆ

ข้อเสีย คือ ขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย

- ระบบการบีบอัดข้อมูลของ GIF

-จะมีการบีบอัดข้อมูลแบบไม่สูญเสีย

-ใช้การบีบอัดที่เรียกว่า LZW ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม zip

-คุณสมบัติในการเคลื่อนไหว(Animated GIF)

ข้อดี คือ ไม่ต้องอาศัย plug-in

-ข้อคิดในการใช้ Animated GIF

- ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด

- ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน

- ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว

- การลดขนาดไฟล์ GIF

-พยายามจำกัดขนาดของกราฟฟิก

-ใช้สีพื้น ๆ เข้าไว้

-รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์ที่เล็กกว่า

กราฟฟิกรูปแบบ JPEG

-ใช้วิธีการบีบบอัดข้อมูลแบบ JFIF (JPEG File interchange format)

-ใช้ระบบสีขนาด 24 บิต จะให้สีสมจริงมากถึง 16.7 ล้านสี ส่งผลให้ได้รูปที่มีคุณภาพ

-ระบบการบีบอัดข้อมูลในไฟล์ JPEG

-เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป

-ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยม

-ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป

-การขยายข้อมูลของ JPEG จะใช้เวลาในการแสดงผลรูป JPEG มากกว่า GIF

-การลดขยายไฟล์ JPEG ไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลง