การบีบอัดและตั้งค่า Alt Text รูปภาพ

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

แนวทางการบีบอัดรูปภาพ

• ใช้รูปแบบไฟล์ที่เหมาะกับชนิดภาพ: WebP หรือ AVIF สำหรับภาพถ่ายและกราฟิกซับซ้อน, SVG สำหรับไอคอนและโลโก้
• ปรับขนาดรูปให้ใกล้เคียงขนาดที่แสดงจริง และหลีกเลี่ยงการอัปโหลดภาพใหญ่เกินจำเป็น
• ใส่ width และ height ในแท็กภาพเพื่อลดปัญหา layout shift
• ใช้ loading="lazy" กับภาพที่อยู่ต่ำกว่าพับหน้าจอ
• ตั้งเป้าขนาดไฟล์ให้เหมาะสมกับประเภทภาพ เช่น ภาพ hero ควรเล็กกว่าภาพต้นฉบับมาก และภาพย่อยควรเล็กลงอีก

แนวทางการเขียน Alt Text

• อธิบายสิ่งที่เห็นและความหมายของภาพอย่างกระชับ
• ถ้าภาพมีข้อความสำคัญอยู่ในภาพ ให้ใส่ข้อความนั้นใน alt ด้วย
• ใช้ alt="" สำหรับภาพตกแต่งที่ไม่เพิ่มข้อมูล เช่น เส้นคั่น พื้นหลัง หรือไอคอนที่มีข้อความกำกับอยู่แล้ว
• ไม่ควรเริ่มด้วยคำว่า “image of” หรือ “picture of” เพราะโปรแกรมอ่านหน้าจอรู้ว่าเป็นรูปภาพอยู่แล้ว
• หลีกเลี่ยงการยัดคีย์เวิร์ด และไม่ควรใช้ชื่อไฟล์เป็น alt text
• ถ้าภาพซับซ้อนมาก ให้ใส่คำอธิบายเพิ่มในเนื้อหาข้างเคียงแทนการยัดทุกอย่างไว้ใน alt

ตัวอย่าง

• ดี: alt="สุนัขโกลเดนรีทรีฟเวอร์กำลังเล่นในใบไม้ร่วง"
• ดี: alt="" สำหรับภาพตกแต่ง
• ไม่ดี: alt="image of dog"
• ไม่ดี: alt="dog puppy pet cute best dog image"

สรุปสั้น

• บีบอัดให้ภาพเล็กลงด้วยฟอร์แมตและขนาดที่เหมาะสม
• เขียน alt ให้สั้น ชัด และบอกสาระของภาพ
• ภาพตกแต่งใช้ alt=""

หากต้องการ สามารถช่วยจัดทำ เช็กลิสต์สำหรับ WordPress / HTML / SEO รูปภาพ ให้ใช้งานได้ทันทีได้ด้วย