더미 이미지 생성
Placeholder Image
원하는 크기의 단색·그라디언트 더미 이미지를 만들고 크기를 이미지 위에 표시합니다.
필요한 크기에 정확히 맞는 회색 상자를, 크기를 적어 넣은 채로 만듭니다. 실제 사진을 기다리는 레이아웃에 씁니다. 결과는 CSS에 바로 붙일 수 있는 SVG data URI이고, 어떤 PNG보다 작으며 요청도 필요 없습니다.
'/%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("…")
사용 방법
크기를 정합니다
자리의 정확한 픽셀 크기입니다. 표시를 켜 두면 이미지에 그려지므로, 크기가 잘못된 상자가 레이아웃에서 바로 눈에 띕니다.
단색·그라데이션·노이즈 중에 고릅니다
단색과 그라데이션은 SVG로 남습니다. 노이즈는 PNG여야 합니다. 픽셀마다 난수를 두면 SVG로는 사각형이 수 메가바이트가 되기 때문입니다.
data URI를 복사합니다
Base64가 아니라 퍼센트 인코딩입니다. 25%쯤 작고 스타일시트에서 읽을 수도 있습니다.
자주 묻는 질문
노이즈는 왜 SVG로 안 되나요?
SVG에는 엔진마다 똑같이 그려지는 픽셀 단위 난수 요소가 없기 때문입니다. 그대로 표현하려면 픽셀마다 사각형 하나가 필요한데, 400×300 상자면 요소가 12만 개입니다.
노이즈가 매번 달라지나요?
달라지지 않습니다. 시드를 쓰므로 같은 설정이면 같은 이미지가 나옵니다. 렌더링할 때마다 달라지는 자리표시자는 시각 회귀 테스트를 무용지물로 만듭니다.
실제 서비스에 써도 되나요?
data URI라면 괜찮습니다. 수백 바이트이고 404가 나지 않습니다. 외부 자리표시자 서비스는 그렇게 말하기 어렵습니다. 다만 지우는 것을 잊지 마세요. 배포까지 따라간 자리표시자는 코드 리뷰에서 눈에 띄지 않습니다.
이 도구로 이어지는 것
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
BlurHash 생성
BlurHash / ThumbHash
이미지를 짧은 BlurHash·ThumbHash 문자열로 인코딩해 로딩 자리표시자로 쓸 수 있게 합니다.
기기 목업 생성
Device Mockup
스크린샷을 휴대폰·태블릿·노트북·브라우저 프레임에 넣고 배경과 그림자를 더합니다.
이미지 Base64 변환
Image to Base64 / Data URI
이미지를 Base64 문자열이나 CSS·HTML·JSON에 바로 붙일 수 있는 data URI로 인코딩합니다.
이미지 배경 제거
Background Remover
단색이나 균일한 배경을 OKLab에서 키잉해 투명한 PNG로 만들고, 브러시로 경계를 다듬을 수 있습니다.
EXIF 정보 삭제
EXIF Remover
화질은 그대로 두고 카메라·GPS·편집 이력 메타데이터만 지웁니다.
파비콘 생성
Favicon Generator
ICO·PNG·애플 터치 아이콘·웹 매니페스트를 한 번에 만들고 붙여넣을 HTML까지 제공합니다.