WhaysnoopyBlog

การออกแบบเว็บไซต์ให้กับสิ่งแวดล้อม 

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

*

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

• เบราเซอร์ที่ใช้

- เบราเซอร์  คือ โปรแกรมที่ใช้เรียกดูเว็บเพจ  โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษรรูปภาพ และภาพเคลื่อนไหว

- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น 

       * 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 card )

- จำนวนหน่วยความจำในการ์ดจอ ( 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>

• ความสว่างและค่าความต่างของโทนสี

- นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว  ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง  ( Brightness ) และความสว่างของโทนสี  ( Contrast ) จากมอนิเตอร์ได้- ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป  และควรเลือกใช้โทนสีที่ต่างกันพอสมควร 

 

*********************************************************************

*

 

  เลือกใช้สีสำหรับเว็บไซต์ 

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

- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร  บางครั้งอาจสร้างความลำบากในการอ่าน- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้

-  การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น                               

ประโยชน์ของสีในเว็บไซต์

- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่ต้องการได้  เช่น  ข้อมูลใหม่  หรือโปรโมชั่นพิเศษ- สีช่วยเชื่องโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน

- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน

- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน

- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ

- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง

- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ 

ความรู้เบื้อต้นเกี่ยวกับสี

- มีสีขั้นต้น  ( 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 )

- มนุษย์เราตอบสนองต่อสีด้วยจิตใจ  ไม่ใช่สมอง  เช่นสีบางสีอาจทำให้รู้สึกสดชื่น  แต่บางสีทำให้รู้สึกซึมเศร้าได้

- ดังนั้นหากเราเลือกสีอย่างรอบคอบ  และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์  เนื้อหาของเว็บไซต์                

สีกับอารมณ์  ความรู้สึก  และความสัมพันธ์กับสิ่งต่างๆ

- สีแดง  อันตราย- สีน้ำเงิน  เทคโนโลยี- สีเขียว  ธรรมชาติ - สีเหลือง  แสงอาทิตย์ , ฤดูร้อน

- สีส้ม  กระตุ้นต่อมหิว  เกี่ยวกับอาหาร

-  สีน้ำตาล  โลก  พื้นดิน- สีเทา  บ่งบอกถึงความเรียบง่าย

- สีขาว  ความเรียบง่าย  สุภาพ- สีดำ  หดหู่ , เศร้า , ไว้อาลัย                

ข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์

- ใช้สีอย่างสม่ำเสมอ- ใช้สีอย่างเหมาะสม- ใช้สีเพื่อสื่อความหมาย               

ตัวอย่างการใช้สี

http://www.sixsides.com/intro/default.html

 

 

*********************************************************************

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

 

 

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

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

                รูปแบบกราฟฟิกสำหรับเว็บ   ( 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)

-  สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ

*************************