웹에서 이미지 포맷 고르는 법

작성 Piano Garden 편집팀 · 검수 Piano Garden 도구 검수 · 게시 2026-08-05 · 수정 2026-08-25

웹 이미지는 ‘가장 최신 포맷’이 아니라 ‘이 파일이 하는 일’에 맞춰 고릅니다. 사진인지, 로고인지, 스크린샷인지, 아이콘인지에 따라 최적해가 갈립니다. 포맷 선택은 압축률만의 문제가 아니라 투명도·애니메이션·호환성 문제이기도 합니다.

사진·그라데이션이 많은 비주얼은 WebP 또는 JPG가 무난합니다. 같은 체감 화질에서 PNG보다 용량이 작은 경우가 많고, 히어로·썸네일·블로그 본문에 적합합니다. 구형 환경 지원이 필요하면 JPG 폴백을 준비하세요.

로고, 아이콘, 단순 일러스트는 SVG가 확대해도 선명하게 스케일됩니다. 단색·적은 앵커 포인트일수록 이득이 큽니다. 복잡한 비트맵을 억지로 SVG로 바꾸면 용량과 렌더 비용이 오히려 커질 수 있습니다.

투명 배경이 필요하면 PNG 또는 알파가 있는 WebP를 검토하세요. 상품 누끼, 오버레이 UI, 스티커형 이미지가 대표적입니다. 투명도가 없는 사진에 PNG를 쓰면 용량만 커지는 경우가 많으니 ‘투명이 진짜 필요한지’를 먼저 물으세요.

스크린샷·UI 캡처·작은 글자가 많은 이미지는 손실 압축 아티팩트가 읽기를 방해합니다. WebP/JPG 품질을 높이거나, 색이 적은 구간은 PNG가 나을 수 있습니다. 확대했을 때 글자 가장자리가 깨지면 포맷·품질을 다시 조정하세요.

애니메이션은 GIF보다 최신 포맷·짧은 영상 태그가 나은 경우가 많습니다. GIF는 호환성이 좋지만 색·용량 효율이 떨어질 수 있습니다. 자동재생·접근성(움직임 감소 설정)도 함께 고려하세요.

CMS·SNS·이메일마다 허용 포맷이 다릅니다. 이메일 클라이언트는 WebP 지원이 제한적인 경우가 있어 JPG/PNG가 안전한 선택일 수 있습니다. 최종 배포 채널의 제약을 디자인 단계가 아니라 내보내기 직전에 확인하면 재작업이 납니다.

같은 자산도 용도별 파생본을 두세요. 원본(편집용), 웹 본문용, 썸네일용, 오픈그래프용처럼 해상도와 포맷을 나누면 품질과 용량을 동시에 잡기 쉽습니다. 파일명에 포맷과 폭을 넣어 혼동을 줄이세요.

선택 체크리스트: 투명 필요? → 사진인가 그래픽인가 → 텍스트 가독성 중요? → 애니메이션? → 채널 호환 → 목표 KB. 이 여섯 질문에 답하면 포맷 논쟁이 짧아집니다.

포맷을 정한 뒤에는 Piano Garden 이미지 압축·JPG/WebP/PNG 도구로 용량을 맞추고, 필요 시 자르기로 표시 비율을 정리하세요. 좋은 포맷도 과한 해상도 앞에서는 속도를 지키지 못합니다.