최소 지원 브라우저
Chrome·Edge 80+, Firefox 74+, Safari 13.1+, iOS Safari 13.4+, Samsung Internet 13+, Android WebView 80+
Pixel Mosaic Lazy Loader
이미지가 화면에 들어오면 큰 픽셀에서 원본으로 전환합니다. GIF·Animated WebP·APNG도 재생을 멈추지 않습니다.
미리 보기
대표 이미지에서 현재 설정을 바로 확인할 수 있습니다.
효과 설정
값을 바꾸고 다시 재생하면 대표 이미지와 아래 예시에 함께 적용됩니다.
큰 픽셀부터 작은 픽셀 순으로 쉼표로 구분합니다.
현재 설정 코드
파일 경로는 배포 환경에 맞게 수정하세요.
설치 방법
npm 배포 후 패키지 설치 또는 CDN 주소로 불러올 수 있습니다.
사용 순서
-
파일 연결
pixel-mosaic.css와pixel-mosaic.js를 불러옵니다. -
이미지 지정
효과를 적용할
<img>에data-pixel-mosaic를 추가합니다. - 설정 적용 위 설정값이 반영된 코드를 복사해 페이지에 붙여 넣습니다.
지원 환경
브라우저에서 실행되는 효과이므로 실제 성능은 이미지 해상도, 화면 배율, 동시 실행 수, 노이즈 프레임 수에 따라 달라집니다.
현재 환경
권장 브라우저
Chrome, Edge, Firefox, Safari의 최신 2개 주요 버전. HTTPS 환경을 권장합니다.
프레임 단위 애니메이션 모자이크
HTTPS에서 ImageDecoder와 해당 이미지 코덱을 사용할 수 있을 때 활성화됩니다. 기준 버전은 Chrome·Edge·Android WebView 94+, Firefox 133+, Samsung Internet 17+이며 Safari는 애니메이션 유지 폴백을 사용합니다.
최소 권장 사양
2코어 CPU, 메모리 2GB 이상, 하드웨어 가속 사용. 1280×720 이하 이미지, 동시 실행 1개, 노이즈 12fps 이하 권장.
원활한 권장 사양
4코어 CPU, 메모리 4GB 이상, 하드웨어 가속 사용. 1920×1080 이하 이미지, 동시 실행 2개, 노이즈 20~24fps 권장.
단계적 기능 축소
- ImageDecoder 미지원: 원본 애니메이션 재생 + Canvas 모자이크
- Canvas 미지원: 기본 CSS 전환 효과
- 동작 줄이기 사용: 효과를 생략하고 원본 즉시 표시
- Internet Explorer는 지원하지 않습니다.
고해상도 이미지나 여러 이미지를 동시에 처리할 때는 maxConcurrent, renderFps, noise.fps를 낮추세요.
같은 움직임, 다른 포맷
같은 원본을 GIF, Animated WebP, APNG로 비교합니다.
GIF
프레임 디코딩을 지원하지 않는 환경에서도 원본 재생을 유지하며 효과를 적용합니다.
Animated WebP
자동 판별이 어려운 파일은 data-pm-animated="true"로 지정할 수 있습니다.
APNG
이미지 바이트를 읽을 수 없는 경우에도 애니메이션은 멈추지 않습니다.
정적 이미지와 투명 PNG
투명 영역과 이미지 비율, 둥근 모서리를 유지합니다.
Static PNG
현재 이미지 요소를 그대로 사용하므로 별도의 저해상도 파일이 필요하지 않습니다.
Transparent PNG
체크 패턴 위에서 투명 영역이 유지되는지 확인할 수 있습니다.
기기에서 동작 줄이기를 사용 중이면 모자이크와 노이즈를 생략하고 원본 이미지를 바로 표시합니다.