이미지 블러 플레이스홀더 생성 및 제공 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 개발자, 특히 이미지 최적화 및 성능 개선에 관심 있는 개발자

- 난이도: 중간 (이미지 처리, JavaScript, 라이브러리 사용 기초 지식 필요)

핵심 요약

• 이미지 블러 플레이스홀더 생성 테크닉: sharp 라이브러리로 원본 이미지 축소 후 blurhash로 블러 해시 생성
• 플레이스홀더 제공: 해시를 blurhash-base64로 디코딩하여 Base64 이미지 데이터 문자열로 제공
• 성능 최적화: 원본 이미지 대비 1/50 크기의 해시로 저장, 100바이트 vs 940바이트 저장 공간 절약

섹션별 세부 요약

1. 이미지 축소 및 해시 생성

• sharp 라이브러리로 원본 이미지 크기 축소 (32x32 픽셀 기준)
• blurhash 라이브러리로 블러 해시 생성 (componentX=5, componentY=4 추천)
• Uint8ClampedArray 형식으로 RGBA 채널 데이터 전환 후 해시 생성

2. 해시 저장 및 제공

• 해시 문자열을 데이터베이스, 캐시 등에 저장 (빠른 복구 가능)
• blurhash-base64 라이브러리로 해시 디코딩하여 Base64 이미지 데이터 문자열 생성
• data:image/png;base64, 형식으로 HTML에 직접 삽입

3. 플레이스홀더 대체 로직

• data-original-src 속성으로 원본 이미지 경로 지정
• JavaScript로 뷰포트 내 50px 이내에 있는 이미지 대상으로 플레이스홀더 교체
• overflow-hidden을 사용해 블러 효과의 경계선을 깔끔하게 처리

결론

• CSS만 사용한 방법 대비 장점: 해시 저장 공간 절약 (100B vs 940B), 블러 효과의 시각적 품질 향상
• 실무 팁: componentX와 componentY 값을 조정해 블러 강도와 세부 정보 균형 맞추기
• 추천: blurhash와 sharp 활용한 서버 측 블러 처리가 성능과 시각적 경험 모두에서 우수한 선택