เพิ่มรูปภาพและไฟล์สื่ออื่น ๆ ในหน้า HTML

5. เพิ่มรูปภาพและไฟล์สื่อต่าง ๆ ในหน้า HTML

เมื่อเราสร้างโครงสร้างพื้นฐานของเว็บไซต์ด้วย HTML แล้ว ขั้นตอนถัดไปคือการทำให้เพจดูน่าสนใจและมีประโยชน์มากขึ้นโดยเพิ่มสื่อ เช่น รูปภาพ วิดีโอ และเสียง การใช้สื่อต่าง ๆ นี้ไม่เพียงแต่ช่วยดึงดูดความสนใจของผู้เข้าชม แต่ยังเป็นเครื่องมือสำคัญในการส่งข้อความ, สอนวิธีทำ, หรือบรรยายประสบการณ์ให้กับผู้อ่านอีกด้วย ทั้งนี้เราต้องใส่ใจเรื่อง การเข้าถึง (accessibility) และ SEO เพื่อให้ทุกคนรวมถึงเครื่องมือค้นหาเข้าใจเนื้อหาของเราได้อย่างถูกต้อง.

5.1 การแทรกรูปภาพด้วยแท็ก `<img>`

รูปภาพเป็นส่วนสำคัญของเว็บที่ช่วยอธิบายข้อมูลและเพิ่มความสวยงามให้กับเพจ การใช้แท็ก <img> มีโครงสร้างพื้นฐานดังนี้:

<img src="path/to/image.jpg" alt="คำบรรยายรูปภาพ">

src: ระบุที่อยู่ของไฟล์รูปภาพ (URL หรือ path ภายในโปรเจกต์)
alt: คำอธิบายสั้น ๆ ของรูปภาพ ซึ่งมีความสำคัญต่อการเข้าถึงและ SEO เพราะเครื่องมือค้นหาใช้ข้อความนี้เป็นข้อมูลพื้นฐานของภาพ

### เคล็ดลับในการใช้ alt text ที่ดี

อธิบายความหมายโดยตรง: หากรูปเป็นสัญลักษณ์หรือไอคอน ให้บอกว่ามันทำหน้าที่อะไร เช่น “ปุ่มค้นหา” หรือ “โลโก้บริษัท”.
หลีกเลี่ยงคำที่ซ้ำซ้อนกับข้อความรอบ ๆ: หากมีหัวข้อหรือเนื้อหาทางด้านบนแล้วไม่จำเป็นต้องอธิบายใหม่ใน alt.
ใช้ความยาวเหมาะสม: ไม่เกิน 125 ตัวอักษร เพราะหลายเครื่องมืออ่านหน้าจอจะตัดข้อความที่ยาวเกินนี้ออกไป.

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

<nav>
  <ul>
    <li><a href="/home"><img src="icons/home.svg" alt="หน้าแรก"> หน้าแรก</a></li>
    <li><a href="/about"><img src="icons/about.svg" alt="เกี่ยวกับเรา"> เกี่ยวกับเรา</a></li>
  </ul>
</nav>

5.2 การแทรกวิดีโอด้วยแท็ก `<video>`

การฝังวิดีโอทำให้เว็บไซต์มีความอินเทอร์แอคทีฟมากขึ้น แต่ควรใช้รูปแบบที่รองรับทั้ง desktop และ mobile พร้อมกับ fallback สำหรับเบราว์เซอร์เก่า.

<video controls width="640" height="360">
  <source src="videos/intro.mp4" type="video/mp4">
  <source src="videos/intro.webm" type="video/webm">
  เนื้อหาวิดีโอไม่รองรับในเบราว์เซอร์ของคุณ
</video>

controls: แสดงปุ่มควบคุมการเล่น (play, pause, volume ฯลฯ)
width / height: กำหนดขนาดของวิดีโอ หากไม่กำหนดเบราว์เซอร์จะใช้ค่าที่กำหนดไว้ในไฟล์สื่อ
<source>: ให้หลาย format เพื่อรองรับเบราว์เซอร์ต่าง ๆ (MP4 เป็นที่นิยมที่สุด แต่ WebM หรือ Ogg ก็เป็นตัวเลือก)

**เคล็ดลับการเพิ่มความเข้าถึง:** หากวิดีโอมีเนื้อหาที่สำคัญ ควรเพิ่ม <track kind="captions" src="captions-en.vtt"> เพื่อให้ผู้ที่มีปัญหาในการได้ยินหรือใช้ข้อความเสียง (screen reader) สามารถติดตามเนื้อหาได้.

<video controls>
  <source src="videos/intro.mp4" type="video/mp4">
  <track kind="captions" srclang="en" label="English" src="captions-en.vtt">
</video>

5.3 การแทรกเสียงด้วยแท็ก `<audio>`

เหมาะสำหรับ podcast, background music หรือเสียงประกอบต่าง ๆ ใช้โครงสร้างเดียวกับวิดีโอ แต่ไม่มีการแสดงภาพ:

<audio controls>
  <source src="audio/lesson1.mp3" type="audio/mpeg">
  เนื้อหาเสียงไม่รองรับในเบราว์เซอร์ของคุณ
</audio>

หากต้องการให้ผู้ใช้สามารถปิดหรือเปิดเสียงได้ ควรเพิ่ม attribute autoplay, loop หรือ muted ตามความเหมาะสม แต่ควรระมัดระวังเพื่อไม่ทำให้เกิดความสับสนหรือรบกวนผู้ใช้งาน.
เช่นเดียวกับวิดีโอ ควรมี fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ เช่น การแสดงลิงค์ดาวน์โหลดไฟล์เสียงแทน.

5.4 การจัดการสื่อให้ Responsive และเข้าถึงได้

เพื่อให้รูปภาพ, วิดีโอและเสียงดูดีบนอุปกรณ์ทุกขนาด เราสามารถใช้ CSS Flexbox หรือ Grid ร่วมกับ max-width: 100%; height: auto;.

img,
video {
  max-width: 100%;
  height: auto;
}

**ตัวอย่างการจัดวางภาพและวิดีโอใน Grid:**

<div class="media-grid">
  <img src="images/photo1.jpg" alt="รูปถ่าย 1">
  <video controls><source src="videos/clip.mp4" type="video/mp4"></video>
  <audio controls><source src="audio/sound.mp3" type="audio/mpeg"></audio>
</div>

<style>
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
</style>

5.5 การใช้ ARIA เพื่อเพิ่มความเข้าถึงสื่อ

สำหรับผู้ที่ใช้งาน screen reader หรืออุปกรณ์ช่วยเหลืออื่น ๆ ควรระบุ aria-label, role="img" และอื่น ๆ เพื่อบ่งบอกว่ารูปภาพหรือวิดีโอมีความหมายอย่างไร.

<img src="icons/alert.svg" alt="" role="img" aria-label="ไอคอนเตือน">

**ข้อควรระวัง:** อย่าใช้ aria-hidden="true" กับภาพที่มีข้อมูลสำคัญ เพราะจะทำให้ screen reader ไม่อ่านออก.

5.6 การตรวจสอบความเข้ากันได้ของสื่อกับเบราว์เซอร์

รูปภาพ: รองรับ PNG, JPEG, GIF (รวม GIF แอนิเมชัน), SVG (เวกเตอร์)
วิดีโอ: MP4 (H.264 + AAC) เป็น format ที่ได้รับการรองรับสูงที่สุด แต่ควรมี WebM หรือ Ogg เพื่อความเข้ากันได้กับเบราว์เซอร์ที่ไม่สนับสนุน MP4.
เสียง: MP3, WAV, OGG; MP3 มีการรองรับครอบคลุมมากที่สุด.

**เครื่องมือทดสอบ:** ใช้ W3C Markup Validation Service เพื่อตรวจสอบว่าโค้ด HTML ของคุณไม่มีข้อผิดพลาด และใช้ WAVE Accessibility Tool เพื่อประเมินความเข้าถึงของสื่อ.

สรุปบทเรียนขั้นตอน 5 – เพิ่มรูปภาพและไฟล์สื่อต่าง ๆ ในหน้า HTML

1. ใช้แท็ก <img>, <video>, และ <audio> เพื่อแทรกสื่อในเว็บเพจ.

2. ใส่ alt text ที่มีความหมายและเหมาะสมกับภาพเพื่อช่วย SEO และผู้ใช้ที่ต้องการอ่านหน้าจอ.

3. ใช้ CSS เพื่อทำให้สื่อ responsive, โดยใช้ max-width: 100% และ height: auto.

4. เพิ่ม ARIA attributes เพื่อเพิ่มความเข้าถึงสำหรับผู้มีความบกพร่องทางการมองเห็นหรือฟัง.

5. ตรวจสอบความเข้ากันได้ของไฟล์สื่อกับเบราว์เซอร์ทุกตัว และเตรียม fallback เมื่อเบราว์เซอร์ไม่รองรับ.

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