* ผู้ใช้แต่ละละคนมีสภาวะแวดล้อมทางเทคนิคแตกต่างกันไป ตั้งแต่ระบบปฏิบัติการของคอมพิวเตอร์ เบราเซอร์ที่ใช้ ความละเอียดของหน้าจอ และอื่นๆอีกมากมาย* เราจะออกแบบอย่างไรถึงจะเข้าได้กับสภาพแวดล้อมของผู้ใช้ทุกคน เพื่อให้ทุกคนสามารถเข้าชมเว็บได้อย่างราบรื่นปราศจากปัญหา
*
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
- เบราเซอร์ที่ใช้
- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น
* Internet Explorer
* Netscape Navigator
* Opera
* Mozilla
* Firefox
- ในอดีตมีการแข่งขันของเว็บเบราเซอร์สูง แต่ละผู้ผลิตต่างพัฒนาคุณสมบัติใหม่ๆ ให้กับเบราเซอร์ของตัวเอง
* <layer> ใช้ได้เฉพาะกับ Netscpe Navigator4
* <marquee> ใช้ได้เฉพาะกับ IE เท่านั้น
- ปัจจุบันคนส่วนใหญ่นิยมใช้งาน IE ทำให้ผู้พัฒนาเว็บมีความสะดวกขึ้น แต่ก็ยังพบปัญหาที่เกิดขึ้นระหว่าง version ของ IE ที่สนับสนุนคุณสมบัติแตกต่างกัน- การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
* เว็บไซต์สำหรับเบราเซอร์ทุกรุ่น
* เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
* เว็บไซต์ตามความสามารถของเบราเซอร์
* เว็บไซต์ที่มีหลายรูปแบบ
- ระบบปฏิบัติการของคอมพิวเตอร์ ( Operating System )
* การแสดงผลของ windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
* ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Unix
- ดังนั้นในการออกแบบเว็บเพจ ควรอ้างอิงกับกลุ่มผู้ใช้ส่วนใหญ่ของเว็บนั้น
- ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” และอื่นๆ
- ความละเอียดของหน้าจอ ( monitor resolution ) มีหน่วยความจำเป็น Pixel
* ความละเอียด 640*480 หมายถึง หน้าจอมีพิกเซลเรียงตัวตามแนนนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล- ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ด แสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
- ความละเอียดของหน้าจอ
* กรณีที่ 1 ออกแบบไว้ที่ความละเอียด 800*600
* กรณีที่ 2 ออกแบบไว้ที่ความละเอียด 640*480
* กรณีที่ 3 ออกแบบไว้ที่ความละเอียด 1024*768
- สรุป
* กรณีที่ 1 ผู้ใช้ส่วนใหญ่จะเห็นหน้าเว็บที่สมบูรณ์
* กรณีที่ 2 ผู้ใช้ทุกคนจะได้เห็นเนื้อหาทั้งหมดในหน้าจอ
* กรณีที่ 3 ผู้ใช้จำนวนน้อยที่สามารถดูเนื้อหาได้อย่างเหมาะสม
- Tip & Trick ในการออกแบบ
* ออกแบบโดยใช้รายละเอียด 800*600 แต่ควรจัดวางองค์ประกอบสำคัญ เช่น ระบบเนวิเกชัน ไว้ในส่วนพื้นที่ 640*480
* ควรทดสอบการแสดงผลหน้าเว็บที่ความละเอียดต่างๆก่อนจะเปิดใช้งานจริง
- จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- จำนวนหน่วยความจำในการ์ดจอ ( video memory ) ที่มากขึ้นจำทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิเซล
- ตารางแสดงระดับความละเอียดของสีกับจำนวนสีสูงสุดที่สามารถแสดงได้
- ชุดสีสำหรับเว็บ ( Web Palette ) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac- ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
- ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
- การตรวจสอบว่าในเครื่องคอมพิวเตอร์มีฟอนต์อะไรบ้างทำได้โดยเข้าไปในโฟลเดอร์ C://Windows\Fonts- MS Sans Serif VS Microsoft Sans Serif
* MS Sans Serif เป็นฟอนต์แบบบิตแมพ ( bitmapped font ) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
* Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น ( vector font ) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด- ตัวอักษรแบบกราฟฟิก (Graphic Text )
* ข้อดี
+ สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
+ ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง + สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
*ข้อเสีย
+ ใช้เวลาในการ download มากกว่า
+ ลำบากในการแก้ไขและเปลี่ยนแปลง
+ ข้อความที่เป็นกราฟฟิกจะไม่สามารถค้นหาได้ด้วย search engine
- ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
* ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 56 Kbps
* ในหน่วยงานบางแห่งอาจใช้อินเตอร์เน็ตความเร็วสูง เช่น ADSL , Cable , modem ซึ่งมีความเร็วตั้งแต่ 128 Kbps จนถึง 10 Mbps
- สิ่งที่เราสนใจในการออกแบบเว็บเพจให้ผู้ชมส่วนใหญ่สามารถเข้าถึงเว็บได้อย่างรวดเร็ว
- ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บให้สวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำไฟล์มีขนาดเล็กที่สุด
- ขนาดหน้าต่างเบราเซอร์
- คำถามคือ เว็บเพจควรถูกออกแบบให้มีขนาดคงที่ตายตัว หรือเป็นแบบที่มีขนาดเปลี่ยนแปลงไปตามขนาดหน้าต่างเบราเซอร์
- ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ ( Flexible Design )
* เมื่อมีการเปลี่ยนแปลงขนาดหน้าต่างเบราเซอร์ องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
- ข้อดี
* พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
* เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
-ข้อเสีย
* ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
* เนื่องจากมีการจัดรูปแบบใหม่ จึงทำให้เสียรูปแบบหน้าจอที่ออกแบไว้เดิม
- www.google.com,www.gmail.com
- ตัวอย่างคำสั่ง HTML ที่ใช้ในการสร้างตาราง 2 คอลัมน์ที่มีขนาดเป็นสัดส่วนกับพื้นที่หน้าจอ
<TABLE BORDER=1 WIDTH=100%><TR>
<TD WIDTH=25%>left column </TD>
<TD WIDTH=75%>right column </TD>
<TR>
</TABLE>
- ออกแบบเว็บเพจให้มีขนาคงที่ ( Fixed Design )
*รูปแบบนี้เหมาะกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บให้คงที่เสมอ
- ข้อดี
* เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
* สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษรไม่ยาวจนเกินไปในหน้าจอที่มีขนาดใหญ่มาก
- ข้อเสีย
* ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
- www.sanook.com , www.manager.co.th
- ตัวอย่างคำสั่ง HTML ที่ใช้ในการสร้างตาราง 2 คอลัมน์ให้มีความกว้างแน่นอน
<TABLE BORDER=1 WIDTH=100%><TR>
<TD WIDTH=150%>left column </TD>
<TD WIDTH=450%>right column </TD>
<TR>
</TABLE>
- ตัวอย่างคำสั่ง HTML ที่ใช้ในการสร้างตาราง 2 คอลัมน์ โดยกำหนดให้คอลัมน์ทางซ้ายมีขนาดคงที่ แต่ขนาดของคอลัมภ์ทางขวาสามารถเปลี่ยนแปลงตามพื้นที่เบราเซอร์
<TABLE BORDER=1 WIDTH=100%><TR>
<TD WIDTH=150%>left column </TD>
<TD> right column </TD>
<TR>
</TABLE>
- ความสว่างและค่าความต่างของโทนสี
เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์- เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่ต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ- สีช่วยเชื่องโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้อต้นเกี่ยวกับสี
- มีสีขั้นต้น ( Primary color )
* สีแดง
* สีเหลือง
* สีน้ำเงิน
- สีขั้นที่ 2
- สีขั้นที่ 3
- สีขั้นที่ 4
การผสมสี ( Color Mixing )- การผสมสีแบบบวก ( Additive mixing ) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมสีแบบลบ ( Subtractive mixing ) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ- การนำไปใช้งาน
* การผสมสีแบบบวก จะนำไปใช้ในสื่อใดๆที่ใช้แสดงออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
* การผสมสีแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆ
วงล้อสี ( Color Wheel )- เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้
* วงล้อสีแบบลบ ( Subtractive Color Wheel )
* วงล้อแบบบวก ( Additive Color Wheel )
สีที่เป็นกลาง ( Neutral Colors )
- คือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น ซึ่งก็คือ สีเทา , ขาว , ดำ
สีอ่อน สีเข้ม และโทนสี ( Tint , Shade and Tone )
- ในการผสมสีกลางเข้าสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย
* สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน ( tint of the hue )
* สีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับต่างๆ ( tone of the hue )
* สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม ( Shade of the hue )- สีอ่อน สีเข้ม และโทนสีมีประโยชน์อย่างมากในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้น
ความกลมกลืนของสี ( Color Harmony )
- ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงามในเวลาเดียวกัน
* การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผุ้ชมได้
* การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม- เป้าหมายในเรื่องสี คือ การนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )- ชุดสีที่ถูกจัดกลุ่มอย่างเข้ากันด้วยรูปแบบต่างๆ
* ชุดสีร้อน ( Warm Color Scheme ) ประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง , แดง , ส้ม , เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม
* ชุดสีเย็น ( Cool Color Scheme ) ประกอบด้วยสีม่วง , สีน้ำเงิน , สีน้ำเงินอ่อน , ฟ้า , น้ำเงินแกมเขียว และ สีเขียว ชุดสีเย็นหึความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ เรียบร้อย
* ชุดสีแบบเดียว ( Monochromatic Color scheme ) เป็นรูปแบบชุดสีที่ง่าย คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อน ในระดับต่างๆ ชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา เพราะขาดความหลากหลายของสี
* ชุดสีที่คล้ายคลึงกัน ( Analogous Color Scheme ) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
* ชุดสีตรงข้าม ( Complementary Color Scheme ) คือ สีคู่ที่อยู่ตรงข้ามกันในวงล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
* ชุดสีตรงข้ามข้างเคียง ( Split Complementary Color Scheme ) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
* ชุดสีตรงกันข้ามข้างเคียงทั้ง 2 ด้าน ( Double Split Complementary color Scheme ) ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน ชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและความกลมกลืนของสีที่ลดลง
ผลทางจิตวิทยาที่มีต่อสี ( Color Psychology )
- มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นสีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีทำให้รู้สึกซึมเศร้าได้
- ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์
สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่างๆ
- สีแดง อันตราย- สีน้ำเงิน เทคโนโลยี- สีเขียว ธรรมชาติ - สีเหลือง แสงอาทิตย์ , ฤดูร้อน
- สีส้ม กระตุ้นต่อมหิว เกี่ยวกับอาหาร
- สีน้ำตาล โลก พื้นดิน- สีเทา บ่งบอกถึงความเรียบง่าย
- สีขาว ความเรียบง่าย สุภาพ- สีดำ หดหู่ , เศร้า , ไว้อาลัย
ข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์
- ใช้สีอย่างสม่ำเสมอ- ใช้สีอย่างเหมาะสม- ใช้สีเพื่อสื่อความหมาย
ตัวอย่างการใช้สี
ออกแบบกราฟฟิกสำหรับเว็บไซต์
- กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผุ้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
- ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( GIF , JPG , และ PNG)
- GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบเสียงแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
- JPG ย่อมาจาก Joint Photographic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
- PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
- รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวบถึงขนาดของหน้าต่างเบราเซอร์
- ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
- แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
* Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
* Adobe ImangeReady ลักษณะหน้าตาและเครื่องมือคล้ายคลึงกับ Photoshop แต่จะถูกพัฒนาข้นเพื่องานกราฟฟิกโดยเฉพาะ เพิ่มความสามารถในการสร้าง animation ได้
* Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว การตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์ HTML
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์ , ชุดสีที่ใช้ , จำนวนสี , ระดับความสูญเสีย , ความโปร่งใสและสีพื้นหลัง
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
- GIF เป็นกราฟฟิกประเภทเดียวที่ไม่สามารถนำไปใช้เบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชันใดๆ
- GIF มีคุณสมบัติในการเคลื่อนไหว
- GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือ ที่คุณภาพ 12.5% , 25% , 50% , 100% ตามลำดับ
* ข้อดี คือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
* ข้อเสีย คือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบการบีบอัดข้อมูลของ GIF
* GIF มีการบีบอัดข้อมูลแบบไม่สูญเสีย (Lossiess) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด
* GIF ใช้การบีบอัดที่เรียกว่า LZW (Lempei-Ziv-Weleh) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล
- คุณสมบัติในการเคลื่อนไหว (Animated GIF)
* รูปที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อเนื่อง
* ข้อดี ของ Animated GIF คือไม่ต้องอาศัย plug-in ใดๆเนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้
- ข้อคิดในการใช้ Animated GIF
* ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด
* ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน
* ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว
- เราสามารถใช้โปรแกรมสร้าง Animated GIF ได้หลายโปรแกรม เช่น ImageReady , Firework , GifBuilder เป็นต้น
- ค่าต่างๆที่สามารถกำหนดได้ในการออกแบบ Animeted GIF
* จำนวนรอบของการแสดงผล
* เวลาที่ใช้ในแต่ละเฟรม
* ชุดสีที่ใช้
* ความโปร่งใส
* ลักษณะการแสดงรูปเป็นลำดับขั้น (Interlacing)
การลดขนาดไฟล์ GIF
- จำกัดขนาดของกราฟฟิก
* พยายามลดขนาดรูปหรือกราฟฟิกให้เล็กไว้เสมอ
* ตัดเอาบางส่วนของรูปที่ไม่มีความจำเป็นออกไป
* ใช้กราฟฟิกขนาดเล็กหลายๆรูปรวมกัน แทนที่จะใช้กราฟฟิกขนาดใหญ่เพียงรูปเดียว
- ออกแบบโดยใช้สีพื้นๆเข้าไว้
* เลือกใช้สีพื้นๆที่ไม่ซับซ้อน แทนที่จะเป็นการไล่สีจากสีหนึ่งไปอีกสีหนึ่ง
* จำกัดปริมาณของส่วนที่มีลักษณะของรูปภาพหรือภาพ่ายในไฟล์ GIF
- ลดจำนวนสีที่ใช้ลง
* แม้ว่ากราฟฟิกรูปแบบ GIF มีระบบสี 8 บิต แต่เราไม่จำเป็นต้องใช้ทั้งหมดที่มีอยู่ก็ได้
- ออกแบบลวดลายตามแนวนอน
* รูปลักษณะเดียวกัน 2 รูป รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์เล็กกว่า
กราฟฟิกรูปแบบ JPEG
- มีนามสกุลเป็น .jpg หรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
- ไฟล์ประเภท JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
- ใช้ระบบสีขนาด 24 บิต ซึ่งจะให้สีสมจริงมากถึง 16.7 ล้านสีส่งผลให้ได้รูปที่มีคุณภาพสูง
- ระบบการบีบอัดข้อมูลในไฟล์ JPEG
* เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
* อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆในบริเวณกว้างๆได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
* ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด 8*8 พิกเซลให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DCT) แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน จากนั้นข้อมูลบางส่วนในความถี่สูงจะถูกตัดไป จะมากหรือน้อยขึ้นอยู่กับระดับคุณภาพ
* ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป เช่น ท้องฟ้า ( ความถี่ข้อมูลต่ำ ) จะบีบอัดได้ดีกว่าใบไม้ใบหญ้า ( ความถี่ข้อมูลสูง )
* JPEG สามารถบีบอัดข้อมูลในอัตราสูงตั้งแต่ 10:1 จนถึง 20:1 โดยที่สายตามนุษย์ไม่อาจมองเห็นคุณภาพที่ลดลงแต่อย่างใด
- การขยายข้อมูลของ JPEG
* เนื่องจากข้อมูลถูกบีบอัดให้อยู่ในรูปของ DCT ดังนั้นเบราเซอร์ต้องทำการขยายข้อมูลก่อนแสดงผล ดังนั้นเบราเซอร์จะใช้เวลาในการแสดงผลรูป JPEG มากกว่า GIF
* เนื่องจากจำนวนบิตของสีไฟล์ JPEG เป็น 24 บิตเสมอจึงไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
* การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่ต้องการด้วย
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
- ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
- เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
- ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
