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

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

Default image
pongpat
ชื่อเล่นว่า "เขียว" หรือ "Green" ความหมายเดียวกัน ชอบการเขียนเว็บไซต์มาตั้งแต่ไหนแต่ไร ไม่ใช่แค่การเขียนโปรแกรมแต่รวมไปถึงการเขียนบทความด้วย จึงมีโอกาสได้สร้างเว็บไซต์หลายๆเว็บ หลายโปรเจกต์มีทั้งรุ่งและร่วง หลังจากเรียนจบวิศวคอมพิวเตอร์ได้เริ่มงานที่ WD มาจนถึงปัจจุบัน ส่วนงานเว็บเป็นงานอดิเรกที่ชอบทำ แล้วก็ยังทำต่อเนื่องไปเรื่อยๆ

Leave a Reply