แท็กรูปภาพ (Image Tag)

ในบทเรียนก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการสร้างลิงก์โดยใช้แท็ก <a> ซึ่งช่วยให้เราสามารถเชื่อมโยงไปยังหน้าเว็บอื่นๆ หรือส่วนต่างๆ ภายในหน้าเว็บของเราได้ ในบทนี้ เราจะมาเรียนรู้วิธีการแสดงรูปภาพบนหน้าเว็บโดยใช้แท็ก <img> (Image Tag) ซึ่งเป็นองค์ประกอบสำคัญที่ช่วยให้เว็บไซต์ของเรามีความน่าสนใจและสื่อสารข้อมูลได้อย่างมีประสิทธิภาพมากยิ่งขึ้น

แท็ก `<img>` คืออะไร?

แท็ก <img> เป็นแท็ก HTML ที่ใช้สำหรับฝังรูปภาพลงในหน้าเว็บ โดยแท็กนี้เป็น "self-closing tag" หรือแท็กปิดตัวเอง นั่นหมายความว่าเราไม่ต้องมีแท็กปิด (</img>) เหมือนกับแท็กอื่นๆ บางแท็ก

รูปแบบการใช้งานพื้นฐานของแท็ก <img> คือ:

<img src="URL_ของรูปภาพ" alt="คำอธิบายรูปภาพ">

จากตัวอย่างข้างต้น เราจะเห็นว่าแท็ก <img> มี attribute หลักๆ สองตัวที่สำคัญ ได้แก่:

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

การใช้ Attribute 'src'

Attribute src (source) เป็น attribute ที่สำคัญที่สุดของแท็ก <img> เนื่องจากเป็นตัวกำหนดว่ารูปภาพใดที่เราต้องการแสดงบนหน้าเว็บ ค่าของ src คือ URL ของรูปภาพ ซึ่งอาจเป็น:

URL แบบ Absolute: คือ URL ที่ระบุตำแหน่งของรูปภาพแบบเต็ม เช่น https://www.example.com/images/logo.png
URL แบบ Relative: คือ URL ที่ระบุตำแหน่งของรูปภาพโดยอ้างอิงจากตำแหน่งของไฟล์ HTML ปัจจุบัน เช่น images/logo.png (ถ้าไฟล์ HTML และโฟลเดอร์ images อยู่ใน directory เดียวกัน) หรือ ../images/logo.png (ถ้าไฟล์ HTML อยู่ใน directory ที่อยู่ภายใน directory ที่มีโฟลเดอร์ images)

ตัวอย่างการใช้ URL แบบ Absolute:

<img src="https://www.example.com/images/my-image.jpg" alt="วิวทิวทัศน์สวยงาม">

ตัวอย่างการใช้ URL แบบ Relative:

สมมติว่าโครงสร้าง directory ของเว็บไซต์ของคุณเป็นดังนี้:

  website/
  ├── index.html
  └── images/
      └── my-image.jpg

ในไฟล์ index.html คุณสามารถใช้ URL แบบ Relative เพื่ออ้างอิงถึงรูปภาพ my-image.jpg ได้ดังนี้:

<img src="images/my-image.jpg" alt="วิวทิวทัศน์สวยงาม">

ถ้าไฟล์ index.html อยู่ใน directory อื่น เช่น:

  website/
  ├── pages/
  │   └── about.html
  └── images/
      └── my-image.jpg

ในไฟล์ about.html คุณจะต้องใช้ URL แบบ Relative ที่ซับซ้อนขึ้นเล็กน้อย:

<img src="../images/my-image.jpg" alt="วิวทิวทัศน์สวยงาม">

../ หมายถึง "ขึ้นไปหนึ่ง directory" ดังนั้น ../images/my-image.jpg หมายถึง "ขึ้นไปหนึ่ง directory จาก directory ปัจจุบัน (pages) แล้วเข้าไปใน directory images เพื่อหารูปภาพ my-image.jpg"

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

Attribute 'alt' สำหรับคำอธิบายรูปภาพ

Attribute alt (alternative text) เป็น attribute ที่สำคัญมากและจำเป็นต้องมีในแท็ก <img> แม้ว่ารูปภาพจะแสดงผลได้อย่างถูกต้องก็ตาม Attribute นี้มีหน้าที่:

แสดงข้อความเมื่อรูปภาพไม่สามารถโหลดได้: หากรูปภาพไม่สามารถโหลดได้เนื่องจาก URL ไม่ถูกต้อง, ไฟล์รูปภาพเสียหาย, หรือเหตุผลอื่นๆ เบราว์เซอร์จะแสดงข้อความที่อยู่ใน attribute alt แทนที่รูปภาพ
ให้คำอธิบายสำหรับผู้ใช้งานที่ใช้โปรแกรมอ่านหน้าจอ (Screen Reader): โปรแกรมอ่านหน้าจอจะอ่านข้อความใน attribute alt ให้ผู้ใช้งานที่มีความบกพร่องทางการมองเห็นทราบว่ารูปภาพนั้นคืออะไร
ช่วยในการปรับปรุง SEO (Search Engine Optimization): Search engine ใช้ข้อความใน attribute alt เพื่อทำความเข้าใจว่ารูปภาพนั้นเกี่ยวกับอะไร ซึ่งจะช่วยเพิ่มโอกาสที่เว็บไซต์ของคุณจะถูกค้นพบเมื่อมีผู้ใช้งานค้นหาคำที่เกี่ยวข้องกับรูปภาพ

ตัวอย่างการใช้งาน attribute alt:

<img src="images/sunset.jpg" alt="ภาพพระอาทิตย์ตกดินที่ชายหาด">

ข้อควรจำ:

เขียนคำอธิบายที่กระชับและสื่อความหมายของรูปภาพได้อย่างชัดเจน
หลีกเลี่ยงการใช้คำว่า "รูปภาพของ..." หรือ "ภาพของ..." เพราะโปรแกรมอ่านหน้าจอส่วนใหญ่จะเข้าใจอยู่แล้วว่าเป็นรูปภาพ
หากรูปภาพเป็นเพียงส่วนประกอบตกแต่งที่ไม่มีความหมายสำคัญต่อเนื้อหา ให้ใส่ alt="" (alt attribute ว่างเปล่า) เพื่อบอกโปรแกรมอ่านหน้าจอว่าไม่ต้องอ่านคำอธิบาย

การปรับขนาดรูปภาพ

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

การปรับขนาดรูปภาพด้วย attribute width และ height:

<img src="images/my-image.jpg" alt="รูปภาพของฉัน" width="200" height="150">

ในตัวอย่างนี้ เรากำหนดให้รูปภาพมีความกว้าง 200 pixels และความสูง 150 pixels

ข้อควรระวัง: การปรับขนาดรูปภาพด้วย attribute width และ height อาจทำให้รูปภาพผิดเพี้ยนได้ หากอัตราส่วน (aspect ratio) ของความกว้างและความสูงไม่ถูกต้อง ทางที่ดีควรกำหนดแค่ width หรือ height เพียงอย่างเดียว เพื่อให้เบราว์เซอร์ปรับขนาดอีกด้านหนึ่งโดยอัตโนมัติ โดยรักษาสัดส่วนเดิมไว้

<img src="images/my-image.jpg" alt="รูปภาพของฉัน" width="200">

การปรับขนาดรูปภาพด้วย CSS:

การปรับขนาดรูปภาพด้วย CSS เป็นวิธีที่ยืดหยุ่นและควบคุมได้มากกว่า เราสามารถทำได้โดยการกำหนด property width และ height ใน CSS rule:

<img src="images/my-image.jpg" alt="รูปภาพของฉัน" style="width: 200px; height: 150px;">

หรือกำหนด CSS class:

<style>
  .small-image {
    width: 200px;
    height: 150px;
  }
</style>

<img src="images/my-image.jpg" alt="รูปภาพของฉัน" class="small-image">

ข้อดีของการปรับขนาดรูปภาพด้วย CSS:

ความยืดหยุ่น: CSS ช่วยให้เราสามารถกำหนดขนาดรูปภาพได้หลากหลายวิธี เช่น ใช้ pixels, percentages, หรือ viewport units
การควบคุม: CSS ช่วยให้เราสามารถควบคุมการแสดงผลของรูปภาพได้ละเอียดมากขึ้น เช่น การกำหนด object-fit property เพื่อควบคุมว่ารูปภาพจะถูกปรับขนาดอย่างไรเมื่อขนาดของ container ไม่ตรงกับอัตราส่วนของรูปภาพ
Responsive Design: CSS ช่วยให้เราสามารถปรับขนาดรูปภาพให้เหมาะสมกับขนาดหน้าจอต่างๆ ได้ง่ายขึ้น

คำแนะนำเพิ่มเติม:

Optimize รูปภาพ: ก่อนที่จะอัพโหลดรูปภาพไปยังเว็บไซต์ของคุณ ควรทำการ optimize รูปภาพให้มีขนาดไฟล์ที่เล็กที่สุดเท่าที่จะเป็นไปได้ โดยไม่ทำให้คุณภาพของรูปภาพลดลงมากเกินไป การ optimize รูปภาพจะช่วยให้เว็บไซต์ของคุณโหลดได้เร็วขึ้น
ใช้ WebP format: WebP เป็น format รูปภาพที่พัฒนาโดย Google ซึ่งมีประสิทธิภาพในการบีบอัดที่ดีกว่า JPEG และ PNG การใช้ WebP format จะช่วยลดขนาดไฟล์ของรูปภาพและทำให้เว็บไซต์ของคุณโหลดได้เร็วขึ้น
ใช้ Lazy Loading: Lazy loading คือเทคนิคที่ช่วยให้รูปภาพที่อยู่ด้านล่างของหน้าเว็บ (ที่ผู้ใช้งานยังไม่ได้เลื่อนลงไปดู) จะถูกโหลดเมื่อผู้ใช้งานเลื่อนลงไปใกล้ๆ รูปภาพนั้นๆ เท่านั้น การใช้ lazy loading จะช่วยลดปริมาณข้อมูลที่ต้องโหลดในครั้งแรก และทำให้เว็บไซต์ของคุณโหลดได้เร็วขึ้น

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการใช้แท็ก <img> เพื่อแสดงรูปภาพบนหน้าเว็บ รวมถึงการใช้ attribute src และ alt และวิธีการปรับขนาดรูปภาพ ทั้งด้วย attribute HTML และ CSS ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการสร้างรายการ (Lists) ใน HTML ซึ่งเป็นอีกหนึ่งองค์ประกอบพื้นฐานที่สำคัญในการจัดระเบียบเนื้อหาบนหน้าเว็บ

แท็กรูปภาพ (Image Tag)

แท็กรูปภาพ (Image Tag)

แท็ก <img> คืออะไร?

การใช้ Attribute 'src'

Attribute 'alt' สำหรับคำอธิบายรูปภาพ

การปรับขนาดรูปภาพ

แท็ก `<img>` คืออะไร?