웹디자인에서 이미지 해상도는 사용자 경험과 로딩 속도에 직접적인 영향을 줍니다. 이 글에서는 PC·모바일 웹에 최적화된 이미지 해상도 기준과 포맷별 설정법, 실제 적용 팁까지 정리합니다.
1. 웹디자인에서 해상도란?
웹에서 말하는 해상도는 크게 두 가지 개념으로 나뉩니다.
- 픽셀 단위 해상도: 이미지의 가로 × 세로 크기 (ex. 1920×1080)
- DPI (Dots Per Inch): 인쇄 품질 관련 지표로, 웹에서는 일반적으로 72~96dpi 사용
※ 웹에서는 픽셀(px) 기준이 중요하며, DPI는 큰 영향 없음
2. 웹용 이미지 해상도 기준표
용도권장 해상도 (px)비고
| 전체 배경 이미지 | 1920 × 1080 이상 | PC FHD 기준, 가로 폭 기준 |
| 배너 이미지 | 1200 × 600 또는 1920 × 400 | 사이트 레이아웃에 따라 변동 |
| 썸네일 (PC) | 400 × 300 이상 | 비율 유지 필요 |
| 썸네일 (모바일) | 300 × 200 이상 | 반응형 대비 필요 |
| 아이콘/버튼 | 64 × 64 / 128 × 128 | SVG 권장 |
| SNS 공유 이미지 | 1200 × 630 | Open Graph 최적화 사이즈 |
웹사이트 해상도 기준은 대부분 1920px 이하로 구성되며,
모바일 대응 시에는 반응형 이미지 또는 2배 해상도 이미지 (Retina 대응) 사용을 고려해야 합니다.
3. 모바일 & 고해상도(Retina) 대응 방법
@2x 이미지란?
레티나 디스플레이에서는 한 화면에 더 많은 픽셀이 사용되기 때문에
표시되는 크기의 2배 해상도 이미지(@2x)를 사용해야 선명하게 보입니다.
표시 크기실제 이미지 크기
| 200 × 200 px | 400 × 400 px (@2x) |
사용 팁
- HTML/CSS에서 width, height는 그대로 설정하고
- 실제 이미지는 @2x로 준비해 품질 확보
- 파일 용량이 커지므로 WebP 포맷 활용 권장
4. 웹용 이미지 해상도 설정 팁
① Photoshop 내보내기 설정
- 메뉴: 파일 → 내보내기 → 웹용으로 저장(구버전)
- 해상도: 72dpi
- 포맷: JPEG (사진), PNG (투명), SVG (벡터), WebP (웹최적화)
- 리샘플링: Bicubic Sharper (축소 시 선명도 유지)
② 이미지 리사이징 기준
- PC 웹 기준: 가로 1200~1920px
- 모바일: 가로 375~768px
- 동일 이미지라도 디바이스마다 자동 리사이징 대응 필요 (responsive image)
5. 이미지 포맷별 웹 적합성 비교
포맷특징용도권장 여부
| JPEG | 손실 압축, 빠른 로딩 | 사진, 썸네일 | ◎ |
| PNG | 투명도 지원, 고품질 | 로고, UI 요소 | ◎ (단 용량 큼) |
| SVG | 벡터, 해상도 무관 | 아이콘, 로고 | ◎ |
| WebP | 고압축 + 고화질 | 모든 이미지 대체 가능 | ◎ |
| GIF | 짧은 애니메이션 가능 | 간단한 움직임 | ○ (WebP로 대체 권장) |
6. 자주 묻는 질문 (Q&A)
Q1. 웹 이미지에 300dpi로 저장해야 하나요?
A. 아닙니다. 웹에서는 72dpi~96dpi가 표준이며, 픽셀 기준이 더 중요합니다.
Q2. 큰 이미지를 업로드하면 자동으로 리사이징되나요?
A. CMS(예: 워드프레스, 카페24 등)에 따라 다릅니다.
일부는 자동 리사이징되지만, 속도와 품질을 위해 업로드 전에 리사이징하는 것이 좋습니다.
Q3. PNG와 WebP 중 무엇을 써야 하나요?
A. 품질 유지와 용량 절감을 동시에 원한다면 WebP 사용을 추천합니다.
단, 특정 구형 브라우저 호환 여부는 확인이 필요합니다.
7. 요약 정리
항목기준
| 기본 해상도 | 1920px 이하 (PC), 375~768px (모바일) |
| 썸네일 | 최소 400×300px |
| 레티나 대응 | 2배 해상도 이미지 사용 (@2x) |
| 권장 포맷 | JPEG, PNG, SVG, WebP |
| 저장 설정 | 72dpi, 리샘플링 최적화 필수 |
댓글