포토샵 웹용 이미지 최적화 설정법 완전정리
웹사이트 속도는 이미지 최적화에 달려 있습니다. 이 글에서는 포토샵을 활용해 **화질은 유지하면서 용량은 줄이는 웹용 이미지 저장 방법과 최적 설정값(JPG, PNG, WEBP 등)**을 자세히 안내합니다.
1. 웹용 이미지 최적화가 중요한 이유
-
페이지 로딩 속도 개선
-
SEO 성능 향상 (구글 코어웹바이탈 지표 반영)
-
사용자 이탈률 감소
-
트래픽 비용 절감
웹사이트나 블로그를 운영한다면, 이미지는 가볍고 빠르게 로딩되도록
최대한 압축 + 품질 유지가 핵심입니다.
2. 최적의 웹 이미지 포맷 선택
| 포맷 | 특징 | 권장 용도 |
|---|---|---|
| JPG | 손실 압축 / 용량 작음 / 배경 없음 | 사진, 썸네일 |
| PNG-8 | 투명 배경 / 색상 제한(256) | 단순 아이콘, 로고 |
| PNG-24 | 투명 배경 / 고화질 | 상세 이미지, UI |
| WEBP | 구글 차세대 포맷 / 고압축 / 고화질 | 전반적 추천 |
| GIF | 애니메이션 지원 / 색상 제한 | 움직이는 배너 |
현재는 WEBP가 가장 권장되는 포맷입니다.
다만, 브라우저 호환성이나 CMS 상황에 따라 JPG 또는 PNG를 선택합니다.
3. 포토샵 웹용 이미지 저장 기본 절차
① 작업 완료 후 → 파일 > 내보내기 > 웹용으로 저장(구버전)
또는
→ 파일 > 내보내기 > 내보내기 형식
4. 저장 시 추천 설정값 (포맷별)
✅ JPG (사진, 블로그용)
-
품질: 60~80 (고화질 유지 + 용량 절감)
-
포맷: 진행성(Progressive) 체크
-
색상 프로필: Convert to sRGB 체크
-
이미지 크기: 최대 가로 1920px 이하
-
메타데이터: None 또는 Copyright only
✅ PNG (로고, 투명 이미지)
-
PNG-24: 고해상도 + 투명 배경
-
PNG-8: 파일 용량 더 작지만 색상 제한
-
크기: 필요 해상도에 맞게 리사이즈
-
투명 배경 유지 시, 배경색 없애기
✅ WEBP (추천)
-
품질: 50~75
-
압축 방식: 손실 / 무손실 선택 가능
-
색공간: sRGB
-
포토샵에서는 기본 지원하지 않을 경우 플러그인 설치 필요
→ 또는 다른 툴(EX: Squoosh, TinyPNG, Convertio 등)로 변환 가능
5. 고급 팁: 이미지 크기 리사이즈 기준
| 용도 | 가로(px) 기준 |
|---|---|
| 블로그 본문 | 800~1200px |
| 썸네일 / 미리보기 | 400~600px |
| 배너 / 섹션 이미지 | 1920px 이하 |
| 모바일 배너 | 720px 권장 |
원본 크기 그대로 저장하면 불필요하게 큰 용량이 발생하므로
목적에 맞게 크기 줄이기 + 최적 포맷 선택이 중요합니다.
6. 이미지 최적화 실전 예시
예시: 2000px 사진 1장 → 웹용 JPG로 저장
-
원본: 3.5MB
-
포토샵 저장 설정: JPG, 품질 70, sRGB, 가로 1080px
-
결과: 350KB (약 90% 용량 절감)
-
시각적 차이: 거의 없음
7. 자주 묻는 질문 (Q&A)
Q1. JPG 품질을 낮추면 이미지가 깨지나요?
A. 70 정도까지는 육안상 차이가 거의 없습니다.
60 이하로 가면 노이즈가 생길 수 있으니 테스트 후 적용하세요.
Q2. PNG보다 JPG가 더 좋은가요?
A. 사진은 JPG,
투명 배경 로고, UI 등은 PNG가 더 적합합니다.
Q3. WEBP는 어떻게 저장하나요?
A. 최신 포토샵(2022 이후)은 기본 지원합니다.
이전 버전은 Google WebP 플러그인을 설치하거나
TinyPNG, Squoosh 같은 무료 툴로 변환하세요.
8. 포토샵 웹 이미지 최적화 요약
| 항목 | 권장 설정 |
|---|---|
| 포맷 | JPG (사진), PNG (로고), WEBP (전반적) |
| 해상도 | 가로 1080~1920px 내외 |
| 품질 | JPG 70, PNG 압축, WEBP 60 |
| 색공간 | sRGB |
| 기타 | 메타데이터 제거, 진행성 체크 |