เนื้อหา ( Lecture )
เนื้อหาบางบทจากวิชา Web Design & Development In Business
1.กระบวนการพัฒนาเว็บไซท์
(Web Development Processes)
แนวทางหลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์
· การวางแผน การวางแผนนับว่ามีความสำคัญมากในการสร้างเว็บไซต์ เพื่อให้การทำงานในขั้นตอนต่าง ๆ มีแนว ทางที่ชัดเจนและสามารถปฏิบัติได้ตามที่ตั้งเป้าไว้ ซึ่งประกอบด้วย
· การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะสร้าง นับเป็นสิ่งสำคัญอย่างมากในการเริ่มต้นสร้างเว็บไซต์เลยทีเดียว เพื่อให้เห็นภาพว่าเราต้องการนำเสนอข้อมูลแบบใด เช่น เว็บไซต์เพื่อให้ข้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกำหนดจุดประสงค์ของเว็บไซต์ได้แล้ว เงื่อนไขเหล่านี้จะเป็นตัวกำหนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์ของเราด้วย
· การกำหนดกลุ่มเป้าหมาย เพื่อให้การสร้างและออกแบบเว็บไซต์ได้รับความนิยม การกำหนดกลุ่มเป้าหมายในการเข้าชมเว็บไซต์ก็นับว่ามีส่วนสำคัญไม่น้อย เช่น เว็บไซต์สำหรับเยาวชน นักเรียน นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สำหรับบุคคลทั่วไปที่เข้าไปใช้บริการต่าง ๆ เป็นต้น
· การเตรียมข้อมูล เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้องทราบว่าข้อมูลข่าวสารต่าง ๆ สามารถนำมาจากแหล่งใดบ้าง เช่น การคิดนำเสนอข้อมูลด้วยตัวเอง หรือนำข้อมูลที่น่าสนใจมาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีน เว็บไซต์ และที่สำคัญ ขออนุญาตเจ้าของบทความก่อนเพื่อป้องกันเรื่องลิขสิทธิ์ด้วย
· การเตรียมสิ่งต่าง ๆ ที่จำเป็น ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรับสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนมการหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น
· การจัดโครงสร้างข้อมูล เมื่อได้ข้อมูลต่าง ๆ เช่น กำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำหนดกลุ่มเป้าหมาย การเตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จำเป็นจากขั้นแรกเรียบร้อยแล้ว ในขั้นตอนนี้ เราจะจัดระบบเพื่อใช้เป็นกรอบสำหรับการออกแบบและดำเนินการในขั้นตอนต่อไป ซึ่งมีรายละเอียด ดังนี้
· โครงสร้างและสารบัญของเว็บไซต์
· การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)
· องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ
· การกำหนดรูปแบบและลักษณะของเว็บเพจ
· การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์
· การบริการเสริมต่าง ๆ
· การออกแบบเว็บไซต์ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือPhotoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น<![endif]>
· ในการออกแบบเว็บไซต์นั้นยังต้องคำนึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ ที่ไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้นกรอบเพื่อความสวยงามและดึงดูดผู้เยี่ยมชมด้วย
เทคนิคการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ให้น่าสนใจต้องพิจารณา 3 ประการ คือ
1. ออกแบบเว็บไซต์ที่เน้นเนื้อหา
เว็บไซต์บางประเภทจะเน้นเนื้อหา หรือข้อความเป็นหลัก ภายในเว็บไซต์จะประกอบไปด้วย ตัวหนังสือ มีภาพประกอบบ้างแต่ไม่มาก เช่น เอ็นไซโคพีเดีย ดิกชันนารี ฯลฯ
2. ออกแบบเว็บไซต์ที่เน้นภาพกราฟิก
3. ออกแบบเว็บไซต์ที่เน้นทั้งภาพและเนื้อหา
ส่วนประกอบของหน้าเว็บเพจ
เราสามารถจำแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้
1. ส่วนหัว (Page Header) น่าจะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ
เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สำหรับข้ามไปยังหน้าเว็บอื่น
2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น
3. ส่วนท้าย (Page Footer) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์
แนวคิดในการออกแบบ
ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็นตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนำไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหาและกลุ่มเป้าหมายของเราด้วย
ศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่าง ๆ สื่อสิ่งพิมพ์ในที่นี้ ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและจุดดึงดูดความสนใจ สามารถนำมาประยุกต์ใช้ในเว็บไซต์ของเราได้เช่นกัน
กระบวนการพัฒนาเว็บไซต์
การที่จะสร้างพัฒนาเว็บเพจและนำเว็บไซต์เข้าสู่ระบบเวิลด์ ไวด์ เว็บ ให้คนอื่นเข้ามาเยี่ยมชมได้นั้น มีกระบวนการที่ผู้พัฒนาเว็บไซต์จะต้องศึกษาและปฏิบัติตาม ดังนี้
1. การวางแผนการทำงาน
การวางแผนการทำงานเปรียบเหมือนเข็มทิศที่จะชี้ทางให้เรารู้ว่าควรจะเดินทางไปในทิศทางใดเพื่อไม่ให้หลงทาง การสร้างเว็บไซต์ก็เหมือนกันจำเป็นต้องมีการวางแผนการทำงานให้รอบด้านก่อนที่จะเริ่มลงมือทำ โดยมีหลักที่ต้องกำหนดในการวางแผน ดังนี้
1. ระยะเวลาการทำงาน เป็นการกำหนดช่วงเวลาที่จะใช้ในการสร้างเว็บ
2. ทีมงานหรือผู้ร่วมงาน ปกติการสร้างเว็บต้องทำงานเป็นทีม อย่างน้อยต้องมีผู้เชี่ยวชาญ 3 ฝ่าย คือ ผู้เชี่ยวชาญด้านภาษา HTML หรือโปรแกรมสร้างเว็บเพจ ผู้เชี่ยวชาญด้านการออกแบบและตกแต่งภาพ และผู้เชี่ยวชาญด้านเนื้อหาหรือบรรณาธิการ
3. งบประมาณ เป็นการกำหนดค่าใช้จ่าย
4. อุปกรณ์หรือเครื่องมือช่วยงาน เช่น เครื่องคอมพิวเตอร์ เครื่องสแกนเนอร์และรูปภาพประกอบเว็บเพจ เป็นต้น
5. ปัญหาและอุปสรรค
2. การรวบรวมและวิเคราะห์โครงสร้าง
เป็นขั้นตอนหนึ่งที่ต่อจากการวางแผน เป็นการแผนงานไปปฏิบัติ โดยการรวบรวมข้อมูลที่จำเป็นต้องใช้ในการสร้างเว็บ ตามหัวข้อที่เลือกไว้ ทั้งเนื้อหา ภาพ เสียงและภาพเคลื่อนไหว เก็บรวบรวมเป็นไฟล์ข้อมูล หรือใส่แฟ้มแยกเป็นหมวดหมู่ เพื่อความสะดวกในการนำมาใช้งาน
3. การออกแบบและการสร้างเว็บไซต์ เป็นขั้นตอนการนำข้อมูลทั้งหมดมาสร้างเป็นเว็บไซต์ด้วยภาษา HTML หรือเครื่องมือในการสร้างเว็บอื่นๆ หลักสำคัญในการออกแบบและสร้างเว็บ คือ
1. กำหนดจุดประสงค์เว็บไซต์ โดยวางเป้าหมายของผู้เข้าชมว่าจะเป็นกลุ่มใด
2. เลือกเว็บเบราว์เซอร์ เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซต์ จะได้กำหนดขนาดกว้าง ยาว และลักษณะการวางองค์ประกอบเว็บให้สวยงามและแสดงผลได้เร็ว
3. วางโครงร่างของเว็บไซต์ กำหนดโครงร่างว่ามีทั้งหมดกี่เว็บเพจ แต่ละเว็บเพจมีเนื้อหาอะไรบ้าง ควรเขียนเป็นแผนผังเว็บไซต์ออกมาบนกระดาษ
4. ออกแบบหน้าตาเว็บ เป็นขั้นตอนในการลงมือสร้างเว็บเพจแต่ละหน้าตามที่ได้ออกแบบไว้ พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์ (แบบ Offline)
4. ทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบแบบออฟไลน์ โดยที่ยังไม่ได้นำเว็บไซต์เข้าสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์ เช่น IE เพื่อตรวจสอบตัวอย่างเว็บที่สร้างไว้ เช่น ขนาดตัวอักษร ขนาดภาพ การใช้สี ตาราง ฯลฯ ว่าเหมาะสมหรือไม่ พร้อมกับการปรับปรุงจนเป็นที่น่าพอใจ
5. เผยแพร่ผ่านเว็บไซต์ เป็นการเผยแพร่ให้คนทั่วไปได้รู้จัก หรือเรียกว่าการอัพโหลด (Upload) โดยเจ้าของเว็บจะต้องจดทะเบียนโดเมนเนม และเช่าพื้นที่โฮสต์ ก็สามารถนำเว็บเพจอัพโหลดขึ้นสู่อินเทอร์เน็ต และประชาสัมพันธ์ให้คนทั่วไปได้รู้จัก การที่จะทำให้คนรับรู้ และเข้ามาใช้บริการเว็บไซต์ได้มากนั้นจะต้องมีการประชาสัมพันธ์อย่างต่อเนื่องและใช้เวลาพอสมควร และถ้าจะให้ดีควรมีเคาน์เตอร์ (Counter) หรือตัวจดสถิติผู้เข้าชม ก็จะช่วยให้ประเมินได้ว่าเว็บไซต์ของเราได้รับความสนใจมากน้อยเพียงใด
6. การพัฒนาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบหรืออัพเดท (Update) เว็บไซต์ ถือเป็นขั้นตอนสำคัญเพราะในโลกของอินเทอร์เน็ตมีการเปลี่ยนแปลงอย่างรวดเร็วอยู่ตลอดเวลา ผู้ชมเว็บมักจะใช้เวลาในการค้นหาและเปิดผ่านเว็บไซต์ต่างๆ อย่างรวดเร็วหากพบว่าเว็บไซต์ของเราไม่ได้เปลี่ยนแปลงหรือมีข้อมูลใหม่ๆ เพิ่มขึ้นเลย ผู้เข้าชมเว็บก็จะลดจำนวนลงไปเรื่อยๆ จนกลายเป็นเว็บที่ไม่มีผู้คนเข้ามาเลยหรือเป็นเว็บที่ตายแล้ว
ดังนั้นการปรับปรุงเว็บไซต์อยู่เสมออาจจะวันละครั้ง หรือสัปดาห์ละครั้ง โดยเพิ่มข้อมูล ข่าวสารใหม่ๆ อยู่เป็นประจำก็จะทำให้เว็บไซต์ทันสมัย ผู้คนเข้าชมเป็นประจำและมากขึ้นจนพัฒนาเป็นเว็บไซต์ยอดนิยมได้ในที่สุด
กระบวนการแรกของการออกแบบ เว็บไซต์คือการกำหนดเป้าหมายของเว็บไซต์กำหนดกลุ่มผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจำลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่าง เหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง
1.1 กำหนดเป้าหมายของเว็บไซต์
ขั้น ตอนแรกของการออกแบบเว็บไซต์ คือการกำหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมายของตนเองแตกต่างกันออกไป
ตัวอย่างของเป้าหมายเว็บไซต์ทางธุรกิจ ได้แก่
- สร้างความเชื่อถือให้กับบริษัท
- ให้บริการข้อมูลของสินค้าหรือบริการ
- สร้างความแตกต่างเหนือคู่แข่ง
- ช่วยสื่อความหมายสำคัญของผลิตภัณฑ์
- สำรวจความต้องการของลูกค้า
- กระตุ้นยอดขาย
- เป็นแหล่งบริการข้อมูลที่เข้าถึงได้ตลอดเวลา
- ช่วยในการเลือกสรรพนักงานใหม่
- ส่งข่าวสารถึงลูกค้าและผู้สนใจอย่างรวดเร็วด้วยต้นทุนที่ต่ำมาก
1.2 กำหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ ออกแบบเว็บไซต์จำเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซ ต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สำหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
การกำหนดประเภทของกลุ่มเป้าหมาย มีลักษณะใหญ่ ๆ คือ
- การกำหนดกลุ่มเป้าหมายเฉพาะเจาะจง ตัวอย่างเช่น เว็บไซต์ขายเสื้อผ้า อาจจะกำหนดกลุ่มเป้าหมายเป็นผู้หญิง แต่สินค้าที่นำมาจำหน่ายอาจเป็นสินค้าที่มียี่ห้อและราคาแพงจึงกำหนดกลุ่ม ผู้ใช้ที่เป็นผู้หญิงและมีฐานะทางการเงินที่ดี เป็นต้น
- การกำหนดกลุ่มเป้าหมายหลาย ๆ กลุ่ม ตัวอย่างเช่น เว็บไซต์ของร้านขายของเล่น ซึ่งอาจจะมองว่ากลุ่มเป้าหมายที่เข้ามาเป็นเด็ก ทั้งที่จริงแล้วผู้ใช้บริการอาจจะเป็นพ่อแม่ที่มาหาของเล่นให้ลูก หรือหนุ่มสาวที่เข้ามาซื้อของขวัญ หรือครูอาจารย์เข้ามาเลือกสินค้าเพื่อนำไปใช้ในห้องเรียน ซึ่งจุดนี้ผู้ออกแบบเว็บไซต์ต้องคำนึงถึงกลุ่มเป้าหมายทุกกลุ่ม
1.3 สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลัง จากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลำดับต่อไปคือการออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
การนำเสนอข้อมูลสินค้าที่ทำให้น่าสนใจ ด้วยการแสดงข้อมูลสินค้าในหลาย ๆ รูปแบบ ที่ผู้ใช้สามารถเลือกการแสดงข้อมูลได้ด้วยตนเอง
1.4 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อ เราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับบริษัท
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คำถามยอดนิยม
- ข้อมูลในการติดต่อ
กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผุ้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
- ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( 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)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
3. งบประมาณ เป็นการกำหนดค่าใช้จ่าย
4. อุปกรณ์หรือเครื่องมือช่วยงาน เช่น เครื่องคอมพิวเตอร์ เครื่องสแกนเนอร์และรูปภาพประกอบเว็บเพจ เป็นต้น
5. ปัญหาและอุปสรรค
2. การรวบรวมและวิเคราะห์โครงสร้าง
เป็นขั้นตอนหนึ่งที่ต่อจากการวางแผน เป็นการแผนงานไปปฏิบัติ โดยการรวบรวมข้อมูลที่จำเป็นต้องใช้ในการสร้างเว็บ ตามหัวข้อที่เลือกไว้ ทั้งเนื้อหา ภาพ เสียงและภาพเคลื่อนไหว เก็บรวบรวมเป็นไฟล์ข้อมูล หรือใส่แฟ้มแยกเป็นหมวดหมู่ เพื่อความสะดวกในการนำมาใช้งาน
3. การออกแบบและการสร้างเว็บไซต์ เป็นขั้นตอนการนำข้อมูลทั้งหมดมาสร้างเป็นเว็บไซต์ด้วยภาษา HTML หรือเครื่องมือในการสร้างเว็บอื่นๆ หลักสำคัญในการออกแบบและสร้างเว็บ คือ
1. กำหนดจุดประสงค์เว็บไซต์ โดยวางเป้าหมายของผู้เข้าชมว่าจะเป็นกลุ่มใด
2. เลือกเว็บเบราว์เซอร์ เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซต์ จะได้กำหนดขนาดกว้าง ยาว และลักษณะการวางองค์ประกอบเว็บให้สวยงามและแสดงผลได้เร็ว
3. วางโครงร่างของเว็บไซต์ กำหนดโครงร่างว่ามีทั้งหมดกี่เว็บเพจ แต่ละเว็บเพจมีเนื้อหาอะไรบ้าง ควรเขียนเป็นแผนผังเว็บไซต์ออกมาบนกระดาษ
4. ออกแบบหน้าตาเว็บ เป็นขั้นตอนในการลงมือสร้างเว็บเพจแต่ละหน้าตามที่ได้ออกแบบไว้ พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์ (แบบ Offline)
4. ทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบแบบออฟไลน์ โดยที่ยังไม่ได้นำเว็บไซต์เข้าสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บเบราว์เซอร์ เช่น IE เพื่อตรวจสอบตัวอย่างเว็บที่สร้างไว้ เช่น ขนาดตัวอักษร ขนาดภาพ การใช้สี ตาราง ฯลฯ ว่าเหมาะสมหรือไม่ พร้อมกับการปรับปรุงจนเป็นที่น่าพอใจ
5. เผยแพร่ผ่านเว็บไซต์ เป็นการเผยแพร่ให้คนทั่วไปได้รู้จัก หรือเรียกว่าการอัพโหลด (Upload) โดยเจ้าของเว็บจะต้องจดทะเบียนโดเมนเนม และเช่าพื้นที่โฮสต์ ก็สามารถนำเว็บเพจอัพโหลดขึ้นสู่อินเทอร์เน็ต และประชาสัมพันธ์ให้คนทั่วไปได้รู้จัก การที่จะทำให้คนรับรู้ และเข้ามาใช้บริการเว็บไซต์ได้มากนั้นจะต้องมีการประชาสัมพันธ์อย่างต่อเนื่องและใช้เวลาพอสมควร และถ้าจะให้ดีควรมีเคาน์เตอร์ (Counter) หรือตัวจดสถิติผู้เข้าชม ก็จะช่วยให้ประเมินได้ว่าเว็บไซต์ของเราได้รับความสนใจมากน้อยเพียงใด
6. การพัฒนาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบหรืออัพเดท (Update) เว็บไซต์ ถือเป็นขั้นตอนสำคัญเพราะในโลกของอินเทอร์เน็ตมีการเปลี่ยนแปลงอย่างรวดเร็วอยู่ตลอดเวลา ผู้ชมเว็บมักจะใช้เวลาในการค้นหาและเปิดผ่านเว็บไซต์ต่างๆ อย่างรวดเร็วหากพบว่าเว็บไซต์ของเราไม่ได้เปลี่ยนแปลงหรือมีข้อมูลใหม่ๆ เพิ่มขึ้นเลย ผู้เข้าชมเว็บก็จะลดจำนวนลงไปเรื่อยๆ จนกลายเป็นเว็บที่ไม่มีผู้คนเข้ามาเลยหรือเป็นเว็บที่ตายแล้ว
ดังนั้นการปรับปรุงเว็บไซต์อยู่เสมออาจจะวันละครั้ง หรือสัปดาห์ละครั้ง โดยเพิ่มข้อมูล ข่าวสารใหม่ๆ อยู่เป็นประจำก็จะทำให้เว็บไซต์ทันสมัย ผู้คนเข้าชมเป็นประจำและมากขึ้นจนพัฒนาเป็นเว็บไซต์ยอดนิยมได้ในที่สุด
2.ออกแบบเพื่อผู้ใช้ (Design for Users)
กระบวนการแรกของการออกแบบ เว็บไซต์คือการกำหนดเป้าหมายของเว็บไซต์กำหนดกลุ่มผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจำลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่าง เหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง
1.1 กำหนดเป้าหมายของเว็บไซต์
ขั้น ตอนแรกของการออกแบบเว็บไซต์ คือการกำหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมายของตนเองแตกต่างกันออกไป
ตัวอย่างของเป้าหมายเว็บไซต์ทางธุรกิจ ได้แก่
- สร้างความเชื่อถือให้กับบริษัท
- ให้บริการข้อมูลของสินค้าหรือบริการ
- สร้างความแตกต่างเหนือคู่แข่ง
- ช่วยสื่อความหมายสำคัญของผลิตภัณฑ์
- สำรวจความต้องการของลูกค้า
- กระตุ้นยอดขาย
- เป็นแหล่งบริการข้อมูลที่เข้าถึงได้ตลอดเวลา
- ช่วยในการเลือกสรรพนักงานใหม่
- ส่งข่าวสารถึงลูกค้าและผู้สนใจอย่างรวดเร็วด้วยต้นทุนที่ต่ำมาก
1.2 กำหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ ออกแบบเว็บไซต์จำเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซ ต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สำหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
การกำหนดประเภทของกลุ่มเป้าหมาย มีลักษณะใหญ่ ๆ คือ
- การกำหนดกลุ่มเป้าหมายเฉพาะเจาะจง ตัวอย่างเช่น เว็บไซต์ขายเสื้อผ้า อาจจะกำหนดกลุ่มเป้าหมายเป็นผู้หญิง แต่สินค้าที่นำมาจำหน่ายอาจเป็นสินค้าที่มียี่ห้อและราคาแพงจึงกำหนดกลุ่ม ผู้ใช้ที่เป็นผู้หญิงและมีฐานะทางการเงินที่ดี เป็นต้น
- การกำหนดกลุ่มเป้าหมายหลาย ๆ กลุ่ม ตัวอย่างเช่น เว็บไซต์ของร้านขายของเล่น ซึ่งอาจจะมองว่ากลุ่มเป้าหมายที่เข้ามาเป็นเด็ก ทั้งที่จริงแล้วผู้ใช้บริการอาจจะเป็นพ่อแม่ที่มาหาของเล่นให้ลูก หรือหนุ่มสาวที่เข้ามาซื้อของขวัญ หรือครูอาจารย์เข้ามาเลือกสินค้าเพื่อนำไปใช้ในห้องเรียน ซึ่งจุดนี้ผู้ออกแบบเว็บไซต์ต้องคำนึงถึงกลุ่มเป้าหมายทุกกลุ่ม
1.3 สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลัง จากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลำดับต่อไปคือการออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
การนำเสนอข้อมูลสินค้าที่ทำให้น่าสนใจ ด้วยการแสดงข้อมูลสินค้าในหลาย ๆ รูปแบบ ที่ผู้ใช้สามารถเลือกการแสดงข้อมูลได้ด้วยตนเอง
1.4 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อ เราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับบริษัท
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คำถามยอดนิยม
- ข้อมูลในการติดต่อ
3.ออกแบบกราฟฟิกสำหรับเว็บไซด์
(Design Web Graphics)
กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผุ้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
- ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( 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)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
อ้างอิงจากเอกสารประกอบการเรียน ของ อาจารย์ แสงนภา หิรัญมุทราภรณ์