ข้อมูลเบื้องต้นเกี่ยวกับรูปภาพบนเว็บไซต์
ก่อนที่จะเริ่มต้นเขียน Code คำสั่ง HTML ในการใส่รูปภาพในเว็บเพจ สิ่งแรกที่ต้องเรียนรู้ก่อนคือ การเกิดภาพบนคอมพิวเตอร์ ประเภทของไฟล์รูปภาพ รวมถึงการเลือกใช้รูปภาพบนเว็บไซต์เพื่อให้เว็บเพจโหลดได้รวดเร็ว และแสดงผลอย่างมีประสิทธิภาพสูงสุด
ภาพบนคอมพิวเตอร์เกิดได้อย่างไร
ภาพที่ปรากฏบนหน้าจอคอมพิวเตอร์ที่เราเห็นอยู่ทั่วไปนั้น เกิดจากจุดสี่เหลี่ยมเล็กๆ ของสี ที่เราเรียกว่า พิกเซล (Pixel) มาประกอบกันเป็นภาพขนาดต่างๆ นั่นเอง
ความละเอียดของจอภาพ เป็นหน่วยที่ใช้วัดจำนวนพิกเซลสูงสุดที่จอคอมพิวเตอร์ผลิตได้ เช่น 1024×768 หมายถึง แนวนอน 1024 พิกเซล และแนวตั้ง 768 พิกเซล
ภาพบนจอเกิดจากโหมดสี RGB (Red, Green, Blue) โดยใช้หลักการยิงประจุไฟฟ้าให้เกิดแสงผสมกัน ภาพคอมพิวเตอร์แบ่งเป็น 2 ประเภทหลัก:
ประกอบด้วยจุดสีคงที่ (Resolution Dependent) ถ้าขยายจะเห็นเป็นตารางสี่เหลี่ยมหรือภาพแตก
ใช้การคำนวณทางคณิตศาสตร์ (Resolution-Independent) ขยายเท่าไหร่ภาพก็ไม่แตก เหมาะกับงานโลโก้
ประเภทของไฟล์ภาพดิจิตอล
บีบอัดแบบสูญเสียข้อมูล เหมาะสำหรับรูปถ่ายทั่วไปและใช้งานบนอินเทอร์เน็ต
ขนาดไฟล์เล็กมาก รองรับภาพเคลื่อนไหว แต่แสดงสีได้จำกัด (256 สี)
พัฒนามาเพื่อเว็บโดยเฉพาะ รองรับพื้นหลังโปร่งใส และมีความยืดหยุ่นสูง
.TIF: สำหรับงานสิ่งพิมพ์ความละเอียดสูง
.PSD: ไฟล์จาก Photoshop แก้ไขแบบ Layer ได้
การแทรกรูปภาพ (Image)
ใช้ Tag <img> พร้อม Attribute src เพื่อระบุที่อยู่ไฟล์ และ alt เพื่ออธิบายภาพ
<img src="ที่อยู่รูปภาพ" alt="คำอธิบายภาพ" width="ตัวเลข" height="ตัวเลข"/>
การจัดตำแหน่งและพื้นหลัง
การจัดตำแหน่งใช้ align (ในอดีต) หรือ text-align ในปัจจุบัน:
<p style="text-align: center;"> <img src="..."> </p>การใส่ภาพพื้นหลังใน <body>:
<body style="background-image: url('ที่อยู่รูปภาพ');">การสร้างลิงก์เชื่อมโยง (Hyperlinks)
1. ลิงก์ภายในและภายนอก
<!-- ภายในเว็บไซต์ -->
<a href="page2.html">ไปหน้าที่ 2</a>
<!-- ไปเว็บไซต์อื่น -->
<a href="https://www.google.com" target="_blank">ไป Google</a>_blank : เปิดแท็บใหม่ | _self : เปิดหน้าเดิม
2. การเชื่อมโยงด้วยรูปภาพ
<a href="URL">
<img src="images/logo.png" width="100">
</a>