이미지 픽셀화

픽셀화하면 그림이 커다란 정사각형 색 블록으로 바뀝니다. 레트로나 모자이크 효과, 티저 이미지, 또는 대략적인 형태와 색만 남기고 이미지 전체를 가릴 때 쓰입니다. 블록 크기를 픽셀로 정하거나 가로로 몇 개의 블록을 원하는지 지정하고, 평균 또는 가운데 픽셀 샘플링을 고른 뒤, 필요하면 색 수도 줄일 수 있습니다. 이미지는 원래 크기를 유지하며, 처리는 브라우저에서 이루어집니다.

사용 방법

1. 이미지를 하나 이상 고릅니다.
2. 블록 크기를 픽셀로 정하거나 가로 블록 개수를 지정합니다.
3. 부드러운 모자이크는 평균 샘플링을, 더 선명하고 대비가 큰 느낌은 가운데 픽셀 샘플링을 고릅니다.
4. 필요하면 8~32색으로 줄이고 내려받습니다.

계산식

블록 색 = 블록 안에서 Σ(색 × 알파) ÷ Σ 알파; 블록 수 = ceil(가로 ÷ b) × ceil(세로 ÷ b)

b는 픽셀 단위 블록 크기이며, "가로 블록 개수"를 쓰면 round(가로 ÷ 블록 수)입니다. 평균은 투명도를 가중치로 계산하므로 비치는 픽셀 때문에 색이 어두워지지 않습니다. 가운데 샘플링은 각 블록 한가운데 픽셀을 그대로 복사합니다. 색 줄이기는 블록 색을 쌍별 최근접 이웃 양자화로 팔레트로 묶고, 모든 블록을 가장 가까운 팔레트 색으로 맞춥니다.

예시

1200 × 800 사진을 20px 블록으로 만들면 1200 ÷ 20 × 800 ÷ 20 = 60 × 40개 블록의 모자이크가 되고 크기는 여전히 1200 × 800px입니다. 가로 40개 블록을 지정하면 블록 크기는 round(1200 ÷ 40) = 30px이고 40 × ceil(800 ÷ 30) = 40 × 27개 블록이 됩니다. 마지막 줄은 높이가 20px뿐입니다.