웹사이트에 이미지를 업로드할 때는 포토샵에서 용량과 화질을 모두 고려해 최적화된 설정으로 저장하는 것이 중요합니다. 이 글에서는 포토샵에서 웹용 이미지로 저장할 때의 정확한 설정법을 정리합니다.
1. 왜 웹용 이미지 최적화가 중요한가?
- 로딩 속도 향상: 이미지 용량이 줄어들면 페이지 로딩 시간이 단축
- SEO 영향: 페이지 속도가 빠를수록 검색 순위에 긍정적 영향
- 디바이스 호환성: 해상도에 따라 적절히 조정된 이미지가 다양한 화면에서 선명하게 표현
- 트래픽 절약: 모바일 사용자의 데이터 사용량 감소
2. 포토샵 웹용 이미지 저장 방식 2가지
저장 방식설명권장 사용
| 웹용으로 저장 (구버전) | 최적화된 포맷, 해상도, 품질 직접 설정 가능 | JPEG, PNG, GIF 등 |
| 내보내기 형식 | 최근 버전에서 제공되는 간편 저장 방식 | SVG, WebP 등 포함 가능 |
3. 웹용으로 저장(구버전) 설정 방법
경로:
파일 → 내보내기 → 웹용으로 저장(구버전)
(또는 Alt + Shift + Ctrl + S)
설정 항목별 설명
항목권장 설정
| 포맷 | JPEG (사진), PNG-24 (투명 배경), WebP (고화질 저용량) |
| 품질 | 60~80 (JPEG 기준, 육안 구분 어려운 수준) |
| 이미지 크기 | 가로 최대 1920px 이하 (PC 기준), 800px 이하 (모바일 콘텐츠용) |
| 색상 프로파일 | ICC 프로파일 포함 (sRGB 권장) |
| 메타데이터 | 없음 또는 저작권만 유지 (불필요한 정보 제거로 용량 절감) |
| 프리뷰 | 2-up 또는 4-up 모드로 화질/용량 비교 가능 |
4. 내보내기 형식(Export As) 설정 방법
경로:
파일 → 내보내기 → 내보내기 형식
주요 설정
- 형식 선택: JPEG / PNG / WebP / SVG
- 품질 설정 (JPEG): 70~80 권장
- 크기 조정: 가로 1x, 2x 배율 선택 가능 (Retina 대응 시 유용)
- 캔버스 크기 조정 가능
- 배경 투명도 적용 (PNG, WebP)
- 색상 프로파일: sRGB 포함 체크
5. 이미지 유형별 추천 설정
용도포맷해상도품질 설정
| 웹 배너 | JPEG | 1200×600 | 80 |
| 제품 사진 | JPEG | 800×800 | 75 |
| 아이콘/버튼 | PNG or SVG | 64×64 / 128×128 | 무손실 |
| 투명 이미지 | PNG-24 | 원본 유지 | 고해상도 |
| 블로그/썸네일 | WebP or JPEG | 800px 내외 | 70 |
6. 추가 팁: 이미지 최적화 플러그인 활용
- TinyPNG 플러그인: 포토샵에서 직접 WebP, PNG 압축 가능
- ImageOptim / Squoosh: 외부 압축 도구로 추가 최적화
- 파일 크기 테스트: 저장 전 2-up 미리보기에서 품질·용량 비교 필수
7. 자주 묻는 질문 (Q&A)
Q1. JPEG로 저장할 때 품질은 몇으로 해야 하나요?
A. 일반적으로 60~80 사이가 적당합니다. 100으로 저장하면 용량만 커지고, 육안 차이는 미미합니다.
Q2. WebP는 포토샵에서 바로 저장 가능한가요?
A. 최신 포토샵 버전에서는 가능합니다. 구버전 사용자는 WebP 플러그인을 설치해야 합니다.
Q3. DPI 설정은 어떤 값을 써야 하나요?
A. 웹에서는 72~96dpi를 표준으로 사용하며, 중요한 건 픽셀 크기(px)입니다. DPI는 웹에서는 큰 영향이 없습니다.
8. 요약 정리
항목권장값
| 포맷 | JPEG / PNG / WebP / SVG |
| 품질 (JPEG) | 70~80 |
| 최대 가로 해상도 | 1920px (PC), 800px (모바일) |
| 색상 프로파일 | sRGB 포함 |
| 저장 방식 | 웹용 저장 or 내보내기 형식 |
댓글