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


สาระสำคัญ

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


ผลการเรียนรู้

      1. อธิบายถึงชนิดของไฟล์รูปภาพและความแตกต่างของไฟล์แต่ละชนิดได้
      2. เรียนรู้ถึงคำสั่งที่ใช้ในการใส่รูปภาพลงในเว็บเพจและอธิบายรูปแบบการใช้งาน
      3. เรียนรู้ถึงคำสั่งที่ใช้ในการจัดรูปภาพที่ใส่ลงในเว็บเพจ เช่น การกำหนดขนาด, การกำหนดตำแหน่งการจัดวาง,
การใส่ความกำกับ, การใส่กรอบ เป็นต้น
      4. สามารถใส่รูปภาพและปรับแต่งได้ตามที่เราต้องการ


1. ชนิดของไฟล์รูปภาพ

     การเลือกรูปภาพมาใส่ลงในหน้าเว็บของเรา ควรที่จะพิจารณาสิ่งต่าง ๆ ก่อนดังนี้
    1.1 คุณสมบัติของไฟล์รูปภาพ

           คุณสมบัติของไฟล์รูปภาพแต่ละชนิดจะแตกต่างกันในด้านต่างๆต่อไปนี้

           - ความลึกของสี (color depth)

             สีที่มีความลึกมากจะทำให้รูปภาพนั้นสมจริงมากขึ้น ความลึกของสีจะเป็นตัวบอกถึง จำนวนบิตที่ใช้ในการบอก
สีในแต่ละจุด (pixel)  ยิ่งจำนวนบิตมากก็ยิ่งทำให้แสดงจำนวนสีได้มาก โดยรูปภาพที่เป็น full color จะใช้ความลึก
ของสี 24 บิต

          - การบีบขนาดไฟล์ (compression/file size) 

            ไฟล์รูปมักมีขนาดใหญ่ จึงมักจะต้องมีการบีบขนาดเพื่อช่วยลดขนาดไฟล์ ให้เล็กลงซึ่งมีเทคนิคการบีบ
ขนาด ไฟล์มีอยู่ 2 แบบคือ
           - การบีบขนาดแบบ Lossless จะช่วยให้ไฟล์มีขนาดเล็กลงโดยไม่ลดคุณภาพของรูปภาพนั้นลงตาม
           - การบีบขาดแบบ Lossyจะช่วยให้ไฟล์มีขนาดเล็กลงแต่คุณภาพนั้นจะด้อยลงตามไปด้วย

          - การแสดงภาพเคลื่อนไหว (Animation)

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

          - ลักษณะโปร่งแสง (Transparency)

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

    1.2 ชนิดของไฟล์รูปภาพ

           ไฟล์รูปภาพมีอยู่มากมายหลายชนิด แต่เรานิยมและสามารถนำมาใส่ลงในเอกสาร HTML
ได้จะมีอยู่ด้วยกัน 3 ชนิดคือ

           1) รูปภาพชนิด GIF (Graphics Interchange Format)

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

           2) รูปภาพชนิด JPEG หรือ JPG (Joint Photographic Experts Group)

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

          3) รูปภาพชนิด PNG (Portable Network Graphics)

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

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


    1.3 ข้อควรพิจารณาในการใส่รูปในเว็บเพจ

          1) ไม่ควรใช้ภาพให้มีขนาดใหญ่ เพราะจะทำให้แสดงผลได้ช้า
          2) ถ้าเป็นภาพขนาดใหญ่ ควรใช้เป็นแบบ Interfaced GIF
          3) ภาพขนาดใหญ่ไม่ควรเกิน 600*400 จุดเพราะยังมีผู้ใช้ที่ใช้จอภาพที่มีความละเอียด 640*480 อยู่
          4) ถ้าเป็นไปได้ควรสร้างจุดเชื่อมโยงไปยังรูปภาพใหญ่แทนที่จะแสดงรูปภาพโดยตรง