<img src="placeholder.png" width="800" height="400" alt="Placeholder">Use width and height attributes to prevent layout shift (CLS)
background: #ccc url('placeholder.svg') center/cover;SVG placeholders are ideal for CSS backgrounds — infinitely scalable
<Image src="/placeholder.png" width={800} height={400} alt="..." />Use Next.js Image component for automatic optimization
<img src="data:image/png;base64,..." alt="Placeholder">Embed small placeholders directly in HTML — no extra HTTP request
| 사용 사례 | 크기 | 종횡비 |
|---|---|---|
| Favicon / Icon | 64 × 64 | 1:1 |
| Avatar / Profile | 150 × 150 | 1:1 |
| Thumbnail | 300 × 200 | 3:2 |
| Blog Feature Image | 1200 × 630 | ~1.9:1 |
| Social Media OG | 1200 × 630 | ~1.9:1 |
| Hero Banner | 1920 × 600 | 16:5 |
| Full HD | 1920 × 1080 | 16:9 |
| Product Photo | 800 × 800 | 1:1 |
플레이스홀더 이미지는 최종 이미지가 준비되기 전 프로토타이핑, 와이어프레임 작성, 개발 중에 이미지 공간을 채우기 위해 웹 개발 및 디자인에 사용됩니다. 레이아웃 시각화와 반응형 디자인 테스트에 도움이 됩니다.
예, 이 도구로 생성된 모든 플레이스홀더 이미지는 브라우저에서 로컬로 생성되며 상업 프로젝트를 포함한 모든 목적에 무료로 사용할 수 있습니다.
PNG는 모든 브라우저와 애플리케이션에서 지원되는 픽셀 기반 래스터 이미지 형식입니다. SVG는 품질 손실 없이 확장할 수 있는 벡터 기반 형식으로 고해상도 디스플레이에 이상적입니다. 웹 디자인 목업에는 SVG를, 범용 호환성에는 PNG를 사용하세요.
예! 픽셀 단위로 원하는 너비와 높이를 입력할 수 있습니다. 이 도구는 1×1부터 매우 큰 값까지 모든 크기를 지원합니다. 표준 웹 크기에는 아바타, 썸네일, 배너, 소셜 OG, HD 등의 사전 설정을 사용하세요.