Blurhash: 이미지 미리보기 블러 라이브러리 placeholder

Blurhash는 위처럼 사진을 짧고 간단한 string으로 인코딩할 수 있는 것이다.

프론트엔드 UI에서 이미지 로딩될 때 쓰면 예쁘다.

 

C언어 버전으로 작성되었는데 hash83, 특이한 방법으로 이미지를 해싱한다.

여러 언어들로 클라이언트가 있으니 github을 참고한다.

https://github.com/woltapp/blurhash

GitHub - woltapp/blurhash: A very compact representation of a placeholder for an image.

 

그래서 각 사진마다 thumbnail_url 필드가 있는 것처럼, blurhash 필드를 추가해서

백엔드로 사진을 전송하면, 인코딩까지 해서 string을 데이터베이스에 저장하면,

프론트에서 사진이 필요할 때, 로딩되는 동안 프론트엔드에서 저 string을 미리 디코딩 해서 보여주면 좋은 예다.

 

스트링에 사진 크기나 확장자 정보는 없으므로 보통 작은 이미지로 만드는 용도이다. (아니면 사진 메타데이터도 저장)

xComponents랑 yComonents는 1~9까지 가능하고

(4,3)이 무난하고 (9,9)로 하면 조금 더 고화질로 블러하지만 꽤 느릴 수 있다.

 

k-pullup.com 에서 쓰이는 blurhhash go언어 버전은 아래에서 볼 수 있다. (pprof를 통한 최적화 버전)

chulbong-kr/backend/util/blurhash.go