핵심 포인트
• 웹 사진의 현재 표준은 WebP입니다. 데이터 트래픽을 크게 줄입니다(MDN Web Docs, 2026).
• 확대해도 깨지지 않는 로고를 만들려면 SVG 포맷이 필요합니다.
• 풍경 사진을 PNG로 저장하지 마십시오. 파일 크기가 매우 커집니다.
포맷마다 역할이 다릅니다
잘못된 포맷을 선택하면 이미지 품질이 떨어지고 웹사이트 로딩 속도가 극적으로 느려집니다. PNG는 모든 픽셀 데이터를 유지합니다. 따라서 복잡한 사진에 PNG를 사용하면 파일이 무거워져 사용자가 페이지를 보기도 전에 이탈합니다. 웹 표준에 대한 자세한 내용은 W3C 문서를 확인하십시오. 이미지를 즉시 수정하려면 이미지 포맷 변환 도구를 사용하십시오. 변환 후에는 압축 도구로 크기를 더 줄이십시오.
오래된 JPG 사진을 WebP로 변환하는 것만으로도 페이지 데이터 용량을 최대 60%까지 줄일 수 있습니다. 이 최적화는 구글 SEO 순위를 직접적으로 올리는 강력한 요인입니다.
올바른 포맷 선택 방법
출력하기 전에 이미지의 특성을 확인하십시오.
- 색상이 많은 사진: WebP 또는 JPG를 선택합니다. 손실 압축(Lossy)을 통해 파일 크기를 크게 줄일 수 있습니다.
- 그래픽 및 투명 배경: 배경이 없는 이미지나 스크린샷에는 PNG를 사용합니다.
- 웹사이트 로고: 반드시 SVG를 선택합니다. 이것은 수학적 데이터이므로 아무리 확대해도 품질이 떨어지지 않습니다.
- 이미지에 SEO에 중요한 텍스트가 포함되어 있다면, OCR 도구로 텍스트를 추출하여 이미지의 Alt 태그에 설정하십시오.
포맷 비교
| 포맷 이름 | 압축 방식 | 투명도 지원 | 최적의 용도 |
|---|---|---|---|
| JPG | 손실 압축(데이터 감소) | 없음 | 카메라 사진 |
| PNG | 무손실 압축(품질 유지) | 있음 | 스크린샷, 도해 |
| WebP | 둘 다 지원 | 있음 | 웹사이트 표준 이미지 |
| SVG | 벡터(수식) | 있음 | 아이콘, 기업 로고 |
자주 묻는 질문
오래된 브라우저를 위해 만약을 대비해 JPG도 준비해야 합니까?
현재 모든 모던 브라우저(Safari, Edge, Chrome)가 WebP를 지원합니다. 특별한 이유가 없는 한 JPG를 예비로 준비할 필요가 없습니다.
무손실 압축(Lossless)은 무슨 의미입니까?
시스템이 데이터를 ZIP 파일처럼 압축한다는 의미입니다. 브라우저가 이미지를 표시할 때 손실된 데이터가 전혀 없으며 원래의 픽셀이 그대로 복원됩니다.