BlurHash 생성
BlurHash / ThumbHash
이미지를 짧은 BlurHash·ThumbHash 문자열로 인코딩해 로딩 자리표시자로 쓸 수 있게 합니다.
BlurHash는 이미지를 흐릿하게 복원할 수 있는 스무 자 남짓의 문자열입니다. 이미지 URL 옆 데이터베이스 칼럼에 넣고 같은 JSON에 실어 보낼 만큼 짧아서, 사진이 도착하기 전에 알아볼 수 있는 무언가를 보여 줄 수 있습니다.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
SVG data URI
580bytebase64가 아니라 퍼센트 인코딩입니다. 25%쯤 작고 사람이 읽을 수도 있습니다. 다음에 그대로 붙여 넣으세요: background-image: url("…")
사용 방법
이미지를 놓거나 해시를 붙여넣습니다
같은 화면에서 양방향으로 씁니다. 이미지를 넣으면 해시가 나오고, 해시를 넣으면 복원된 미리보기가 나옵니다.
성분 수를 정합니다
해시 길이는 4 + 2·x·y자라서 4×3이면 28자입니다. 성분이 많을수록 더 자세해지고 문자열이 길어집니다. 보통은 4×3을 씁니다.
밋밋한 사진에는 강조를 씁니다
평균 색은 그대로 두고 변화 폭만 키웁니다. 그냥 두면 평평한 사각형으로 복원될 저대비 이미지를 살려 줍니다.
자주 묻는 질문
원본을 왜 먼저 32px로 줄이나요?
그보다 높은 주파수는 어차피 변환 과정에서 버려지기 때문입니다. 원본 해상도로 계산하면 같은 28자를 얻으려고 기저 함수를 1억 번 평가하게 됩니다.
평균 색만 필요합니다.
해시의 앞 여섯 글자를 쓰세요. 정확히 그것이 인코딩되어 있어서, 배경색만 필요한 페이지는 아무것도 복원하지 않아도 됩니다.
BlurHash와 ThumbHash 중 무엇을 쓸까요?
BlurHash는 어느 언어에나 라이브러리가 있고 이 페이지가 내보내는 것도 그것입니다. ThumbHash는 같은 품질에서 더 짧고 알파도 담지만, 어느 쪽이든 클라이언트에 디코더가 필요합니다. 지금 스택에 이미 있는 쪽을 고르세요.
이 도구로 이어지는 것
더미 이미지 생성
Placeholder Image
원하는 크기의 단색·그라디언트 더미 이미지를 만들고 크기를 이미지 위에 표시합니다.
대표 색상 추출
Average & Dominant Colour
이미지의 평균·중앙값·최빈 색 가운데 하나를 대표 색으로 뽑아 색상 값으로 돌려줍니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
JPEG 압축
JPEG Compressor
원하는 품질로 JPEG를 다시 인코딩하고 압축 전후 용량과 차이를 함께 보여줍니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
대표 색상 추출
Average & Dominant Colour
이미지의 평균·중앙값·최빈 색 가운데 하나를 대표 색으로 뽑아 색상 값으로 돌려줍니다.
이미지 크기 조절
Image Resizer
픽셀·비율·최대 변 길이 기준으로 크기를 바꾸고 가로세로 비율 고정과 일괄 처리를 지원합니다.
더미 이미지 생성
Placeholder Image
원하는 크기의 단색·그라디언트 더미 이미지를 만들고 크기를 이미지 위에 표시합니다.
Base64 인코딩·디코딩
Base64 Encoder & Decoder
텍스트와 파일을 Base64·Base64URL로 인코딩·디코딩하며 UTF-8을 올바르게 처리합니다.
Base64 이미지 복원
Base64 to Image
Base64 문자열이나 data URI를 다시 볼 수 있고 내려받을 수 있는 이미지로 되돌립니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.