ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytการจัดการรูปภาพ


ประเภทของไฟล์รูปภาพ | การแทรกรูปภาพ | การจัดวางตำแหน่งของรูปภาพ | การกำหนดเส้นขอบรูปภาพ | คำอธิบายรูปภาพ

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

ytประเภทของไฟล์รูปภาพ

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

รู้จักกับชนิดของภาพกราฟิกบนเว็บ
ตัวอย่างภาพ
ไฟล์สกุล JPG (Joint Photographer’s Experts Group)
เป็นไฟล์หนึ่งที่นิยมใช้บน Internet  มีความละเอียดสูง และใช้สีจำนวนมาก (สนับสนุนถึง 24 bit color) ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นำมาสแกน และต้องการนำไปใช้บนอินเทอร์เน็ต เพราะให้ความคมชัดและความละเอียดของภาพสูง
  • จุดเด่น
    สนับสนุนสีได้ถึง 24 bit
    สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
    มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive
    มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
    เรียกดูได้กับ Graphics Browser ทุกตัว
    ตั้งค่าการบีบไฟล์ได้ (compress files)
  • จุดด้อย
    ทำให้พื้นของรูปโปร่งใสไม่ได้
ไฟล์สกุล GIF (Graphics Interlace File)
พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสำหรับการเผยแพร่ผ่านอินเทอร์เน็ตตั้งแต่ยุคแรก
  • จุดเด่น สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
    - มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวดเร็ว
    - สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent)
    - มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace
    - มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
    - เรียกดูได้กับ Graphics Browser ทุกตัว
    - ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)
  • จุดด้อย ไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้ การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น
ไฟล์สกุล PNG (Portable Network Graphics)
ไฟล์สกุลล่าสุดที่นำจุดเด่นของไฟล์ GIF และ JPEG มาพัฒนาร่วมกัน ทำให้ภาพในสกุลนี้แสดงผลสีได้มากกว่า 256 สี และยังสามารถทำพื้นภาพให้โปร่งใสได้ จึงเป็นไฟล์ภาพที่ได้รับความนิยมมากในปัจจุบันด้วยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ
  1. สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า ระบบคอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
  2. ขนาดไฟล์เล็ก ด้วยเทคนิคการบีบอัดคงสัญญาณ LZW
  3. สามารถทำภาพโปร่งใสจากสีพื้น 256 ระดับ
  4. แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดที่ดีกว่า
  5. มีคุณสมบัติ Gamma ทำให้ภาพสามารถปรับตัวเองได้ตามจอภาพ และปรับระดับความสว่างที่แท้จริงตามที่ควรจะเป็น
  • จุดเด่น
    สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit)
    สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
    มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace)
    สามารถทำพื้นโปร่งใสได้
  • จุดด้อย
    หากกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดต่ำ
    ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4
    ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card
    โปรแกรมสนับสนุนในการสร้างมีน้อย

ytการแทรกรูปภาพในเว็บเพจ

คำสั่ง <IMG SRC="ชื่อรูปภาพ"> คือ คำสั่งในการแทรกรูปภาพในหน้าเว็บเพจ

<html>
      <head>
          <title>
              Insert Images : การแทรกภาพ
          </title>
      </head>
      <body background="images\bgimage.gif">
            ข้อความที่แสดงในส่วนเนื้อหา<br>
            <img src="images/chicklittle.gif">
      </body>
</html>
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ข้อความที่แสดงในส่วนเนื้อหา
images/chicklittle

จะสังเกตได้ว่าคำสั่ง IMG นี้เป็นคำสั่งเดี่ยวไม่ต้องมีคำสั่งปิด เมื่อมีการเก็บรูปภาพไว้ในโฟลเดอร์ใดเป็นการเฉพาะ จะต้องกำหนดเส้นทางชี้ไปยังรูปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรูปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้างในคำสั่งเป็น <IMG SRC="images/name.gif"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดงดังตัวอย่างภาพนี้         เพราะไม่มีรูปนี้อยู่จริง

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

<html>
      <head>
          <title>
              Insert Images : การกำหนดขนาดภาพ
          </title>
      </head>
      <body>
            <div align="center"><b>ตัวอย่างการแสดงผลจากคำสั่ง</b><br><br>
            <img src="images/cl_breakdance.gif">
            <img src="images/cl_breakdance.gif" width="80" height="66">
            <img src="images/cl_breakdance.gif" width="160" height="133"></div>
      </body>
</html>
ตัวอย่างการแสดงผลจากคำสั่ง

แสดงการกำหนดขนาดภาพ
chicklittle chicklittle chicklittle


ytEND : สรุปคำสั่งที่ใช้ในบทนี้
TAGS รายละเอียด
<img src="ชื่อไฟล์รูปภาพ width="x" hight="y" >  คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือ ชื่อและสถานที่รูปนั้นอยู่ โดยรูปภาพชนิด JPG, GIF, PNG
width กำหนด ความกว้างของรูปภาพ ( x แทนค่า ตัวเลข หน่วย pixel)
hight กำหนด ความสูงของรูปภาพ ( y แทนค่า ตัวเลข หน่วย pixel)

ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP