Implement ภาษาอีสานให้รองรับการแสดงภาพ WebP

ก่อนหน้านี้พจนานุกรมภาษาอีสานของเราแสดงผลภาพด้วยนามสกุล .jpg ตามปกติเหมือนเว็บทั่วๆไป แต่เพื่อพัฒนาให้โหลดเร็วขึ้นจึงพัฒนาให้รองรับการแสดงผลแบบไฟล์ที่บีบอัดแบบ webp ซึ่งผมได้เขียนโน๊ตไว้ในบันทึกก่อนหน้านี้เกี่ยวกับการดาวน์โหลดและติดตั้ง cwebp บน Linux Server และสคริปสำหรัอีบแปลงไฟล์ที่ละเยอะๆ

สำหรับบทความนี้เราก็จะมาต่อด้วยการนำไปใช้งานจริง โดยปกติเวลาที่เราจะแสดงผลภาพใน html ก็จะใช้แท็ก
<img src="xxx" />
เช่น
<img src="filename.jpg" alt="title file" />

การเขียนโค้ด เพื่อให้แสดงผลภาพแบบ webp ก็จะมี syntax เพิ่มขึ้นมานิดหน่อย คือ
<picture> <source srcset="filename.webp" type="image/webp" /></picture> <picture><img src="filename.jpg" alt="title file" /></picture>

และนี่ก็คือโด้ดที่เราใช้งานจริงๆ

Source WebP
Source WebP

ดูตัวอย่างหน้าเว็บที่ใช้งานจริงที่คำศัพท์ภาษาอีสานคำไหนก็ได้ครับ หรือจะดูที่คำนี้ก็ได้ “อีหล่า