การใส่รูปภาพ

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

1. รู้จักกับภาพกราฟิกชนิดต่างๆ

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

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

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

ภาพชนิด JPEG
กราฟิกชนิด JPEG ถูกพัฒนาโดย Joint Photographic Experts Group เป็นกราฟิกที่สามารถทำงานกับเครื่องต่างแบบต่างรุ่นได้เช่นกัน ข้อดีของกราฟิกชนิดนี้ คือสามารถแสดงสีได้สูงสุดถึง 16.7 ล้านสี อย่างไรก็ตามภาพแบบ JPEG จะมีการสูญเสียรายละเอียดบ้าง ซึ่งเป็นผลจากการบีบอัดข้อมูล (Compression) เพื่อลดขนาดภาพให้มีขนาดไม่ใหญ่จนเกินไป
กราฟิกชนิด JPEG เหมาะสำหรับใช้แสดงภาพถ่ายที่มีสีสันมาก และต้องการประหยัดเนื้อที่ในการเก็บ

Note : เราสามารถกำหนดระดับการบีบอัดของภาพชนิด JPEG เป็น High, Medium หรือ Low ได้โดยใช้โปรแกรมตกแต่งภาพเช่น Photoshop โดยการบีบอักข้อมูลสูงจะได้ไฟล์ที่มีขนาดเล็ก แต่จะสูญเสียรายละเอียดมากที่สุด นอกจากนั้นการแสดงภาพที่บีบอัดข้อมูลสูงบนจอภาพจะใช้เวลาในการประมวลผลนานกว่าด้วย

1. การแสดงภาพบนเว็บ

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

ชื่อแท็ก	img (Image)
ตำแหน่งแท็ก	อยู่ภายในแท็ก <body>...</body>
รูปแบบใน HTML	<img src = “ชื่อไฟล์ภาพ” />

ตัวอย่างแสดงภาพแบบ JPEG และ GIF

<body>

ตัวอย่างการแสดงภาพในเว็บเพจ

<img src = “tree.jpg” /> ภาพชนิด JPEG

<img src = “logo.gif” /> ภาพชนิด GIF

</body>

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

2. การใส่ข้อความกำกับภาพ

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

ชื่อแอตทริบิวต์	alt
ตำแหน่งของ แอตทริบิวต์	อยู่ภายในแท็ก <body>...</body>
รูปแบบของ แอตทริบิวต์	<img src = “ชื่อภาพ” alt = “ข้อความกำกับภาพ” />

ตัวอย่างการใส่ข้อความกำกับตาราง

<body>

ตัวอย่างการแสดงภาพในเว็บเพจ

<img src = “tree.jpg” alt = “ภาพต้นไม้” /> ภาพชนิด JPEG

<img src = “logo.gif” alt = “ภาพโลโก้” /> ภาพชนิด GIF

</body>

3. การใส่กรอบให้กับรูปภาพ

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

ชื่อแอตทริบิวต์	border
ตำแหน่งของ แอตทริบิวต์	อยู่ภายในแท็กเปิด <img...>
รูปแบบใน HTML	<img src = “ชื่อภาพ” border = “ความหนาของกรอบ”/>
ค่าที่กำหนดให้ใช้	ขนาดความหนาของกรอบกำหนดเป็นจำนวนพิกเซล