BlurHash Generator: แปลงรูปภาพเป็น placeholder 30 ตัวอักษร

ลองเปิดแอปสมัยใหม่สักตัวแล้วสังเกตตอน photo feed โหลด ก่อนที่รูปจริงจะมาถึง คุณจะเห็นบล็อกสีเบลอ ๆ นุ่ม ๆ ที่ sketch โครงของแต่ละรูปออกมาแล้ว — ท้องฟ้าอยู่ด้านบน ตัวแบบอยู่ด้านล่าง มีแสงอุ่นสะท้อนอยู่ฝั่งหนึ่ง placeholder แบบบล็อกสีเบลอจะปรากฏขึ้นทันทีระหว่างที่รูปจริงกำลังโหลด และบล็อกนั้นคือ BlurHash string ความยาว 30 ตัวอักษรที่แถมมาใน API response นี่คือเทคนิคด้าน perceived performance ที่ได้ผลที่สุดเทคนิคหนึ่งของเว็บยุคใหม่ แถมตัวมันเล็กกว่าทวีตเสียอีก

BlurHash Generator ฟรี จัดการเทคนิคนี้ให้ครบทั้งสองทิศทาง ฝั่ง encode เปลี่ยนรูปที่คุณ drop ลงไปให้กลายเป็น placeholder string ขนาดกะทัดรัดที่ copy ลง database ได้เลย ส่วนฝั่ง decode ทำงานย้อนกลับ: paste BlurHash code อะไรก็ได้แล้วดูมันค่อย ๆ กลายเป็น live canvas preview เพื่อเช็กก่อนส่ง string ขึ้น production ทุกอย่างทำงานใน browser ของคุณ 100% — ไม่ต้องสมัคร ไม่ต้อง upload และไม่มี server ไหนเห็นไฟล์ของคุณ

ไม่ว่าคุณจะเป็น frontend developer ที่กำลังใส่ placeholder ลงใน infinite-scroll feed, mobile developer ที่ต้องสู้กับ Wi-Fi โรงแรมช้า ๆ หรือ designer ที่กำลังกำหนดพฤติกรรม progressive media ใน design system เครื่องมือนี้ให้ workflow ครบวงจรในหน้าเดียว

ทำไมต้องใช้ BlurHash Generator?

• placeholder ที่โผล่มาทันที API ส่ง string 30 ตัวอักษรมาพร้อม metadata ของ record ได้นานก่อนที่ไบต์ของรูปจะพร้อม ผู้ใช้เห็น layout และ mood ของทุกรูปทันที แทนที่จะเจอกล่องสีเทาหรือ spinner หมุน ๆ
• เล็กโดยดีไซน์ thumbnail ที่บีบอัดหนักที่สุดก็ยังหนักหลายกิโลไบต์และต้องมี storage กับ CDN path ของตัวเอง ส่วน BlurHash เป็นข้อความธรรมดาราว 30 ไบต์ — เล็กพอจะอยู่ในคอลัมน์ database คู่กับ record ที่มันอธิบายได้สบาย
• perceived performance ที่ดีขึ้น placeholder ที่ decode แล้วสื่อสีหลักและทิศทางแสงกว้าง ๆ ของรูปจริง ทำให้ interface รู้สึกพร้อมมากกว่ารู้สึกว่างเปล่า งานวิจัยด้าน loading behavior ยืนยันตรงกันว่า placeholder ที่มีโครงสร้างช่วยลด bounce บนหน้าที่รูปเยอะ
• ครบทั้งสองทิศทางในเครื่องมือเดียว ตัวอย่างส่วนใหญ่ทำแค่ encode แต่เครื่องมือนี้ decode ด้วย: paste BlurHash string อะไรก็ได้ แล้วยืนยันบน live canvas ว่าผู้ใช้จะเห็นอะไรก่อนพิกเซลจริงจะมาถึง
• ปรับความละเอียดได้ คุณเลือกจำนวน component แนวนอนและแนวตั้งที่ hash เก็บ เทรดความยาว string ไม่กี่ตัวอักษรกับรายละเอียดที่มองเห็นได้ — และเครื่องมือแสดงผลลัพธ์ให้เห็นทันที
• เป็นส่วนตัวและรวดเร็ว ทั้ง encode และ decode เกิดขึ้นใน browser ของคุณด้วยคณิตศาสตร์บน canvas งาน design ลับ ภาพลูกค้า และ product shot ที่ยังไม่เปิดตัวไม่เคยออกจากเครื่องคุณ

ฟีเจอร์เด่น

• รองรับ drag and drop ทุกฟอร์แมตยอดนิยม จึง hash ไฟล์ JPG, PNG และ WebP ตรงจาก design export ได้เลย
• preview render ตาม aspect ratio ที่คุณจะแสดงจริง ซึ่งตรงกับพฤติกรรมของ decoder ใน production พอดี
• string เป็นข้อความธรรมดา สิ่งที่ copy คือสิ่งที่ paste ลง API response ได้ทันทีโดยไม่ต้องแปลงอะไร

วิธีใช้งาน

1. เปิดเครื่องมือ เข้าไปที่หน้า BlurHash Generator — ไม่ต้องสมัครบัญชี ไม่ต้องติดตั้งอะไร
2. Encode รูปภาพ drop รูปลงใน encode panel หรือเลือกไฟล์ เครื่องมือจะ downsample ภายในแล้วสร้าง BlurHash string ให้ในไม่กี่วินาที
3. ปรับ component ปรับจำนวน component แนวนอนและแนวตั้งแล้วดู preview อัปเดต component เยอะหมายความว่า string ยาวขึ้นโครงสร้างคมขึ้น ส่วนน้อยหมายถึง string สั้นลงสีเนียนขึ้น
4. Decode string สลับไป decode panel paste BlurHash code อะไรก็ได้ — รวมถึงตัวที่เพิ่ง generate — แล้ว live canvas preview จะแสดงให้เห็นว่าเวลาแอปคุณ render แล้วหน้าตาจะเป็นอย่างไร
5. ตรวจสอบแล้ว copy เทียบ placeholder ที่ decode แล้วกับรูปต้นฉบับ ยืนยันว่า contrast กับพาเลตต์โอเค แล้ว copy string ลง data model หรือ API response ของคุณ

30 ตัวอักษรเก็บภาพได้อย่างไร

แกนกลางของ BlurHash คือเวอร์ชันย่อส่วนของคณิตศาสตร์ชุดเดียวกับที่ทำให้ JPEG compression ทำงาน: discrete cosine transform หรือ DCT แทนที่จะอธิบายทุกพิกเซล encoder ถามคำถามที่ง่ายกว่า — ถ้ามองรูปนี้เป็นกอง gradient แสงเนียน ๆ ไม่กี่ชั้น มันหน้าตาเป็นอย่างไร? สีเฉลี่ยของทั้งภาพถูกเก็บก่อน จากนั้น low-frequency component ไม่กี่ตัวอธิบายว่าความสว่างเลื่อนไปทางไหนในแนวนอนและแนวตั้ง เส้นขอบคมกับ texture ละเอียดถูกตัดทิ้งตั้งใจ — placeholder ต้องการ mood ไม่ใช่รายละเอียด

ตัว string เองคือการ encode component เหล่านั้นให้แน่นด้วยอักษร 83 ตัวที่เรียกว่า Base83 โครงสร้างสั้นและคงที่ ตัวอักษรแรกบอกว่า hash เก็บ component แนวนอนกับแนวตั้งกี่ตัว ตัวถัดไปเก็บ maximum AC value ซึ่งเป็น hint สำหรับ normalize ฝั่ง decoder ต่อมาคือ DC component — สีเฉลี่ยของภาพ — ที่ถูกอัดลง 4 ตัวอักษร แล้วตามด้วยตัวอักษร 2 ตัวต่อ AC component หนึ่งตัว ด้วย component grid แบบ 4x3 ที่นิยม รวมแล้วได้ยี่สิบแปดตัวอักษร: หนึ่งตัวสำหรับขนาด grid, หนึ่งตัวสำหรับ scaling, สี่ตัวสำหรับสีเฉลี่ย และสิบเอ็ดคู่สำหรับ gradient เพิ่มเป็น grid 5x4 ก็ได้ราวสามสิบห้าตัว ลดเหลือ 1x1 ทั้ง hash ยุบเหลือหกตัวอักษรที่ decode ออกมาเป็นสีเรียบสีเดียว

BlurHash ถูกคิดค้นที่บริษัทส่งอาหาร Wolt ในปี 2018 ด้วยเหตุผลเป้าหมายชัดเจน: รูปอาหารโหลดช้าบนมือถือระหว่างที่ลูกค้าหิวกำลังเลื่อนดูเมนู ไอเดียนี้แพร่ไปไกลกว่าแอปอาหาร: lazy-loaded feed บนโซเชียล, แอปแผนที่ที่วาด pin หลายพันตัว และ chat client ที่โชว์ attachment ก่อนการ upload จะเสร็จด้วยซ้ำ ล้วนใช้เทคนิคสายนี้ทั้งนั้น ทุกกรณี string placeholder มาพร้อม payload แรกของ API และถูกวาดลงจอได้ในระดับไมโครวินาที

การ decode คือภาพสะท้อนของการ encode สำหรับทุกพิกเซลของพื้นที่เป้าหมาย decoder คำนวณผลรวมถ่วงน้ำหนักของคลื่น cosine — หนึ่งเทอมต่อหนึ่ง component — แล้วประกอบกลับเป็นภาพเนียน ๆ ที่ใกล้เคียงฉากเดิม คณิตระดับนี้เบาพอจะรันแบบ real time จึงเป็นเหตุผลที่เครื่องมือ render live canvas preview ได้ทันทีที่ paste หรือปรับ string คุณสมบัติเดียวกันนี้ทำให้แอป production วาด placeholder ลง canvas element หรือแปลงเป็น data URL ขนาดจิ๋วได้ โดยไม่ต้องเก็บ thumbnail ไบนารีใด ๆ

จุดที่ต้องเทรดออฟกันจริงจังคือตอนปรับ component hash แบบ 1x1 เล็กมากแต่สื่อได้แค่โทนสีเดียว แบบ 4x3 สื่อท้องฟ้า พื้น และตำแหน่งตัวแบบ ซึ่งครอบคลุมภาพถ่ายทั่วไปเกือบหมด ดันไป 6x4 ขึ้นไปเริ่มทำนายเงารูปทรงได้ — คุ้มสำหรับโลโก้และกราฟิก แต่เปลืองสำหรับรูปธรรมดา เพราะ component เพิ่มหนึ่งตัวมีราคาสองตัวอักษรพอดี ความยาว string จึงเป็นปุ่มหมุนที่คุณตั้งได้ตามบริบท: หกตัวสำหรับ color chip, ราวสามสิบตัวสำหรับ content card

Use cases ในทางปฏิบัติ

Placeholder สำหรับ image feed

Infinite-scroll feed คือบ้านหลังคลาสสิกของ BlurHash encode placeholder ตอน upload แล้วเก็บ string ไว้กับ record ของโพสต์ เมื่อ feed hydrate ทุกการ์ดจะวาด blurred preview จาก hash ที่อยู่ใน JSON payload ทันที แล้วค่อย cross-fade เข้าหารูปจริงเมื่อไฟล์ stream มาถึง ผู้ใช้รู้สึกว่าหน้าเพจมีชีวิตทันที แทนที่จะเห็น grid ของ skeleton ว่าง ๆ

Chat attachment และ upload preview

Messaging client ส่ง BlurHash string ใน message metadata ได้ก่อนที่การ upload attachment จะเสร็จ และแม้ก่อนจะเริ่มด้วยซ้ำ — เพราะฝั่งผู้ส่งคำนวณมันในเครื่อง ผู้รับเห็นสีและองค์ประกอบของรูปก่อนไบต์จะมาถึงเป็นวินาที ๆ ทำให้เน็ตช้ารู้สึกเร็วขึ้นอย่างมีนัยสำคัญ เทคนิคเดียวกันนี้ยังใช้ทำตัวบอกสถานะแบบมีข้อมูลภาพ: มีรูปกำลังมา พร้อมภาพรวมจริงให้ดูแล้ว

Map pin และ location card

แผนที่มัก render thumbnail ตำแหน่งเล็ก ๆ หลายร้อยอันพร้อมกัน และการโหลดรูปจริงขนาดนั้นแพงมาก hash หกถึงสามสิบตัวอักษรต่อตำแหน่งให้ pin กับ preview card ทุกอันมีอัตลักษณ์สีจริงด้วยต้นทุน payload เล็กน้อย ลิสติ้งร้านอาหาร โรงแรม และท่องเที่ยวได้ประโยชน์มากที่สุด เพราะอาหารกับทิวทัศน์อ่านออกได้ดีน่าแปลกแม้ในความละเอียดแบบ blurhash

Progressive media UX ใน design system

ทีม design มาตรฐานพฤติกรรม placeholder ได้โดยเก็บ BlurHash ไว้ใน design token หรือ component API: image component ทุกตัวรับ hash เสริมได้ แล้ว render fade-in แบบเดียวกันทั้งบนเว็บ, iOS และ Android เครื่องมือนี้จึงกลายเป็นขั้นตอน QA — designer paste string ที่ส่งไปแล้วกลับเข้ามาเพื่อยืนยันว่าผู้ใช้จะเห็น preview ตามที่ตั้งใจบนทุกแพลตฟอร์ม

Best Practices

• รักษา placeholder ให้ subtle hash ควรบอกใบ้ภาพ ไม่ใช่แย่งซีนกับมัน ถ้า preview ที่ decode แล้วดึงสายตามากกว่ารูปจริง ให้ลดจำนวน component ลง
• Precompute ตอน upload การ encode เบาแต่ไม่ฟรี สร้าง hash ครั้งเดียวใน upload pipeline แล้ว persist เก็บไว้ อย่าไปคำนวณใหม่ทุกครั้งที่มี request หรือให้ client คำนวณเอง
• ตรวจ contrast ของภาพที่ decode แล้ว paste string ที่ส่งขึ้น production กลับเข้า decode panel แล้วเช็กกับธีมสว่างและธีมมืดทั้งคู่ — placeholder ที่หายไปกับพื้นหลังสีขาวแย่กว่าไม่มี placeholder เสียอีก
• จับคู่ aspect ratio ให้ตรงกับที่แสดง BlurHash ถูกยืดเข้าไปในสี่เหลี่ยมใดก็ได้ที่วาดลงไป encode จากรูปที่มีสัดส่วนใกล้เคียงกับการ์ดจริง เพื่อไม่ให้ preview บิดเบี้ยว
• เก็บ hash ไว้ข้าง record ถือว่า string เป็น metadata — คอลัมน์ database หรือฟิลด์ JSON บน resource — เพื่อให้ผู้ใช้ API คนไหนก็ render placeholder ได้โดยไม่ต้องยิง request เพิ่ม
• ดูแลไฟล์ต้นฉบับให้เบา placeholder ที่ดีตั้งความคาดหวังที่รูปเต็มต้องตามให้ทัน แปลงและบีบอัดไฟล์จริงก่อนส่งขึ้น production ด้วย Image Format Converter

เริ่ม encode และ decode BlurHash วันนี้

ข้อความสามสิบตัวอักษรพาสี แสง และ layout ของรูปที่คุณจะส่งขึ้นเว็บได้ทั้งหมด — และตอนนี้คุณสร้างกับตรวจสอบมันได้ในหน้าเดียว เปิด BlurHash Generator drop รูปลงไป ปรับ component จนกว่า preview จะรู้สึกถูกใจ แล้ว paste string ลงใน API response ถัดไปของคุณ ผู้ใช้จะเห็นความต่างก่อนที่รูปจะโหลดเสร็จเสียอีก

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• File Type Detector — ยืนยันว่าไฟล์ที่ drop ลงมาเป็นรูปภาพจริงก่อนนำไป hash
• Image Comparison Slider — โชว์ลูกค้าช่องว่างระหว่าง placeholder กับรูปจริง
• Image Format Converter — แปลงและบีบอัดไฟล์ต้นฉบับให้การเปิดเผยรูปจริงเร็วเท่า placeholder

ขอให้สนุกกับการ hash!

คำถามที่พบบ่อย

ถ: BlurHash คืออะไรกันแน่?

ตอบ: คือรูปแบบ open source สำหรับเก็บภาพ placeholder แบบกะทัดรัด คิดค้นที่ Wolt ในปี 2018 มันเก็บสีเฉลี่ยบวกกับ gradient ความสว่างความถี่ต่ำไม่กี่ตัวเป็น Base83 string สั้น ๆ ที่ client ไหนก็ decode เป็น blurred preview ได้

ถ: BlurHash string ยาวแค่ไหน?

ตอบ: ขึ้นกับจำนวน component ที่เลือก hash แบบ 1x1 ยาว 6 ตัวอักษร grid ยอดนิยมแบบ 4x3 ยาว 28 ตัวอักษร และ grid ที่ละเอียดขึ้นเพิ่มตัวอักษรด้านละสองตัวต่อ component ส่วนใหญ่ทีมอยู่ใต้ 40 ตัว

ถ: BlurHash คือไฟล์รูปขนาดจิ๋วหรือเปล่า?

ตอบ: ไม่ใช่ ไม่มีข้อมูลไบนารีเลย — มันเป็นข้อความธรรมดาที่อธิบาย gradient สีเนียน ๆ client จะ decode ข้อความนั้นลง canvas ตอนแสดงผล จึงใส่ไปใน JSON response ได้และ render เสร็จในระดับไมโครวินาที

ถ: เครื่องมือ upload รูปของฉันขึ้นที่ไหนหรือเปล่า?

ตอบ: ไม่ขึ้นครับ ทั้ง encode และ decode รันใน browser ของคุณด้วย canvas API มาตรฐาน ไฟล์ทั้งหมด รวมถึงงานลับหรืองานที่ยังไม่เปิดตัว ไม่เคยออกจากเครื่องคุณ

ถ: เอา string ที่ได้ไปใช้ในแอปตัวเองได้ไหม?

ตอบ: ได้เลย BlurHash เป็น open standard ที่มี decoder library ไลเซนส์ MIT ครบทั้ง JavaScript, Swift, Kotlin, Python และอีกมากมาย string ที่ copy ได้เป็นข้อความธรรมดา จึงวางลง API response หรือฟิลด์ database ได้ทันทีโดยไม่ต้องแปลงอะไร