Lesson Of Lecture

ความสำคัญของการออกแบบเว็บไซต์ 

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

องค์ประกอบของการออกแบบเว็บไซต์ที่ดี

1. ความเรียบง่าย (Simplicity) การสื่อสารเนื้อหาถึงผู้ใช้โดยจำกัดองค์ประกอบเสริมที่เกี่ยวข้องกับการนำเสนอให้เหลือเฉพาะสิ่งที่จำเป็นเท่านั้น เช่น อาจไม่ทำตัวอักษรวิ่งวนไปมาให้ลายตา การใช้ชนิดของตัวอักษร ไม่มากจนเกิดความวุ่นวาย หรือใช้สีตัวอักษรที่ฉูดฉาดเกินไป

2. ความสม่ำเสมอ (Consistency) การใช้รูปแบบเดียวกันตลอดทั้งไซต์ เนื่องจากผู้ใช้จะรู้สึกกับว่าเว็บไซต์เสมือนสถานที่จริง ถ้าลักษณะของแต่ละหน้าแตกต่างกันมาก ผู้ใช้จะเกิดความสับสนหรือไม่แน่ใจว่ากำลังอยู่ในเว็บเดิมหรือไม่

3. ความเป็นเอกลักษณ์ (Identity) การออกแบบควรคำนึงถึงภาพรวมขององค์กร เช่น ถ้าออกแบบเว็บไซต์เกี่ยวกับเด็ก วัยรุ่น ควรมีสีสันสดใส หรือการออกแบบเว็บไซต์ของธนาคารไม่ควรจะดูเหมือนสวนสนุก ผู้ออกแบบต้องเลือกใช้องค์ประกอบเหล่านี้อย่างเหมาะสม

4. เนื้อหามีประโยชน์ (Useful Content) เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้น ควรเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องสมบูรณ์ โดยมีการปรับปรุงเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ

5. ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Navigation) เนวิเกชันเสมือนป้ายบอกทางให้กับผู้ใช้ การออกแบบเนวิเกชัน ควรออกแบบให้วางในตำแหน่งเดียวกันของทุกๆ หน้า เพื่ออำนวยความสะดวกให้กับผู้ใช้งาน

6. มีลักษณะที่น่าสนใจ (Visual Appeal) เป็นเรื่องยากที่จะตัดสินว่าหน้าตาของแต่ละเว็บไซต์แห่งหนึ่งแห่งใดน่าสนใจหรือไม่ เพราะเกี่ยวข้องกับองค์ประกอบความชอบของแต่ละบุคคล อย่างไรก็ดีหน้าตาของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น ภาพกราฟฟิกจะต้องสมบูรณ์ไม่เป็นรอย หรือจุดด่าง หรือมีเส้นขอบเป็นขั้นบันได การใช้โทนสีที่เข้ากันอย่างสวยงาม ตลอดจนตัวอักษรที่อ่านง่าย สบายตา เป็นต้น

7. การใช้งานอย่างไม่จำกัด (Compatibility) การออกแบบให้ผู้ใช้ส่วนใหญ่เข้าถึงได้มากที่สุด โดยไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมใดๆ เพิ่มเติม หรือสามารถแสดงผลได้ในทุกๆ ระบบปฏิบัติการที่มีความละเอียดของหน้าจอที่ต่างกันได้อย่างไม่มีปัญหา

---

หลักการออกแบบหน้าเว็บ

1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)

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

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

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

2.สร้างรูปแบบ บุคลิก และสไตล์


            รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น

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

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

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


3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์


               ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชันทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า

                ทางด้านเทคนิคเราสามารถใช้ CSS ช่วยในการกำหนดสไตล์มาตรฐานได้

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

4.จัดวางองค์ประกอบทีสำคัญไว้ในส่วนบนของหน้าเสมอ
      

               ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้าบราวเซอร์ดดยที่ยังไม่มีการเลื่อนหน้าจอใดๆ

                ส่วนบนสุดนี้ควรประกอบด้วย

                1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
                2.ชื่อหัวเรื่องหรือชื่อแสดงหมาวหมู่ของเนื้อหาที่ปรากฏ
                3.สิ่งสำคัญที่เราต้องการโปรดมตเว็บ
                4.ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที


5.สร้างจุดสนใจด้วยความแตกต่าง


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

                     เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้


6.จัดแต่งหน้าให้เป็นระเบียบและเรียบง่าย


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

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

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

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


7.ใช้กราฟฟิกอย่างเหมาะสม


                    ควรใช้กราฟฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆ ตามความเหมาะสมและไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ

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

---

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

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

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

§  Internet explorer

§  Netscape Navigator

§  The World

§  Opera

§  Mozilla

§  Firefox

ในอดีตมีการแข่งขันของเว็บเบราเซอร์สูง แต่ละผู้ผลิตต่างพัฒนาคุณสมบัติใหม่ๆให้กับเบราเซอร์ของตัวเอง

 ปัจจุบันได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง นั่นคือ W3C
                  ปัจจุบันคนส่วนใหญ่นิยมใช้งาน IE ทำให้ผู้พัฒนาเว็บมีความสะดวกขึ้น แต่ก็ยังพบปัญหาที่เกิดขึ้นระหว่าง version             ของ IE ที่สนับสนุนคุณสมบัติแตกต่างกัน
 


ระบบปฏิบัติการ(Operating System)

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

ความละเอียดของหน้าจอ

                ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” และอื่นๆความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป็น Pixel

                ความละเอียด 640x480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล

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

จำนวนสีที่จอผู้ใช้สามารถแสดงได้


                มอนิเตอร์มีความสามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ(Video Card)

                     จำนวนหน่วยความจำในการ์ด (Video memory) ที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
                    จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
                     ชุดสีสำหรับเว็บ (Web Palette) หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
                     ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง เนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีได้มากขึ้น แต่ใน tool ต่างๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่

ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

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

                        

                       MS Sans Serif VS Microsoft Sans Serif

                                MS Sans Serif เป็นฟอนต์แบบบิตแมพ(bitmapped font) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน

                                 Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส็น(Vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด

ความเร็วในการเชื่อมต่ออินเตอร์เน็ต


                      ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บความเร็วของอินเตอร์เน็ตมีหลายระดับ
                       ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 56 kbps ในหน่วยงานบางแห่งอาจใช้อินเตอร์เน็ตความเร็วสูง เช่น ADSL,Cable modem ซึ่งมีความเร็วตั้งแต่ 128 kbps จนถึง 10 Mbps
                       ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บให้สวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด



ขนาดหน้าต่างเบราเซอร์


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


                              ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ (Flexible Design)
                                      เมื่อมีการเปลี่ยนแปลงขนาดหน้าต่างเบราเซอร์ องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
                               ข้อดี
                                      พื้นที่หน้าจอทั้งหมดถุกใช้อย่างเต็มที่
                                      เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
                               ข้อเสีย
                                      ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
                                       เนื่องจากมีการจัดรูปแบบใหม่ จึงทำให้เสียรูปแบบหน้าจอที่ออกแบบไว้เดิม


                               ออกแบบเว็บเพจให้มีขนาดคงที่ (Flexed design)
                                       รูปแบบนี้เหมาะกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บให้ควรที่เสมอ
                               ข้อดี
                                       เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
                                       สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษรไม่ยาวจนเกินไปในหน้าจอที่มีขนาดใหญ่มาก
                                ข้อเสีย
                                       ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล



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


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

---

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

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

โปรแกรมกราฟฟิกสำหรับเว็บ

• ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในากรสร้างกราฟฟิกสำหรับเว็บ

                    -Adobe PhotoShop
                    -Adobe ImageReady
                    -Firework

• ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง

• Adobe PhotoShop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
• Adobe ImageReady ลักษณะหน้าตาและเครื่องมือจะคล้ายคลึงกับ PhotoShop แต่จะถูกพัฒนาขึ้นเพื่องานกราฟฟิกโดยเฉพาะ และเพิ่มความสามารถในการสร้าง animation ได้
• Macromedia Fireworks มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว และการตัดแบ่งภาพให้มีขนาดเล็กๆ สำหรับไฟล์ HTML

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

• มีไฟล์นามสกุลเป็น .gif
• ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
• GIF เป็นกราฟฟิกประเภทเดียวที่สามารถนำไปใช้กับเบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชันใดๆ
• GIF มีคุณสมบัติในการเคลื่อนไหว
• GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
• คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับคือ ที่คุณภาพ 12.5%,25%,50% และ 100% ตามลำดับ ข้อดีคือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเตนขึ้นเรื่อยๆ ข้อเสียคือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
• ระบบการบีบอัดข้อมูลของ GIF - GIF มีการบีบอัดข้อมูลแบบไม่สูญเสีย (Lossless) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด - GIF ใช้การบีบอัดที่เรียกว่า LZW (Lempel-Ziv-Welch) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล

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

• มีนามสกุลเป็น .jpg หรือ .jpeg
• ใช้วิธีการบีบอัดข้อมูลแบบ JFIF(JPEG File interchange format)
• ไฟล์ประเภท JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆ และสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
• ใช้ระบบสีขนาด 24 บิต ซึ่งจะให้สีสมจริงมากถึง 16.7 ล้านสีส่งผลให้ได้รูปที่มีคุณภาพสูง
• ระบบการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆ ในบริเวณกว้างๆ ได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
• ระบบการบีบอัดข้อมูลในไฟล์ JPEG - ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด 8X8 พิกเซลให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DCT) แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน จากนั้นข้อมูลบางส่วนในความถี่สูงจะถูกตัดไป จะมากหรือน้อยขึ้นอยู่กับระดับคุณภาพที่กำหนด
• ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป เช่นท้องฟ้า(ความถี่ข้อมูลต่ำ) จะบีบอัดได้ดีกว่าใบไม้ใบหญ้า (ความถี่ข้อมูลสูง)