BlurHash - เครื่องมือสร้าง placeholder รูปภาพแบบเบลอ

• อ่านรูปภาพแล้วทำให้เบลอ จากนั้นแปลงเป็นรหัสแฮชความยาว 20~30 ตัวอักษร

• บนเว็บ/แอป รับเฉพาะรหัสแฮชก่อนโหลดรูปภาพ เพื่อแสดงรูปเบลอก่อน แล้วค่อยรับรูปจริงผ่านเครือข่ายมาแสดง

• มีโค้ดให้สำหรับ C/Swift/Kotlin/Python/Typescript

• Go/PHP/Java/Clojure/Rust/WASM มี implementation จาก third-party

[xguru]

นี่เป็นวิธีจัดการ image placeholder ที่ถูกใจผมที่สุดเท่าที่เคยเห็นมาเลยครับ หน้าตาผลลัพธ์ก็สวยด้วย

ตอนอัปโหลดรูปในเครื่องมือจัดการ ผมเคยคิดว่า ถ้าทำให้ชื่อไฟล์เป็นแฮชโค้ดทุกครั้งก็น่าจะดี แต่ก็ติดอยู่ที่ base83 encoding นิดหน่อยครับ

[nemorize]

พอเห็นคอมเมนต์นี้ก็คิดว่า "สักวันต้องลองเอาไปใช้ดู~" แล้วสุดท้ายก็เพิ่งได้ลองใช้หลังจากผ่านไป 5 ปี
ใน B83 มีอักขระพิเศษอย่าง ? / # = รวมอยู่ด้วย ก็เลยเข้ารหัส B83 ซ้ำเป็น B64-urlsafe ไปเลยครับ ฮ่าๆ;

แม้จะเข้ารหัสค่าแฮช 43 ซึ่งเป็นการตั้งค่าคอมโพเนนต์พื้นฐานด้วย B64 ก็ยังยาวแค่ราว ๆ 40 ตัวอักษร เลยไม่ได้เป็นภาระมากอย่างที่คิด
และถ้าปรับลดลงเป็นประมาณ 33 หรือ 3*2 ตามสถานการณ์ ถึงจะสวยน้อยลงหน่อย แต่ก็ทำให้เหลือราว ๆ 25 ตัวอักษรได้

[sduck4]

โอ้... ถ้าอย่างนั้นก็สามารถแสดง placeholder จากชื่่อรูปภาพเองได้เลยสินะครับ! เป็นไอเดียที่ยอดเยี่ยมมาก :)