이미지 포맷 선택 하나가 웹페이지 로딩 속도를 2~3배 차이나게 만들 수 있습니다. 상황별 최적 포맷을 알아봅니다. CSS 도구와 함께 UI를 최적화해보세요.
포맷별 특성 비교
JPG/JPEG
손실 압축. 파일 크기 작음. 투명도 없음.
📌 사진, 배경이미지, 썸네일
PNG
무손실 압축. 투명도(Alpha) 지원. 파일 크기 큼.
📌 로고, 아이콘, 스크린샷, 투명 배경
WebP
JPG 대비 25~34% 작은 크기. 투명도 지원. 구형 브라우저 미지원.
📌 모던 웹 전반 — Chrome·Firefox·Safari 지원
AVIF
WebP 대비 추가 50% 압축. 최신 브라우저만 지원.
📌 고화질 이미지가 많은 사이트 (지원 브라우저 확인 필수)
SVG
벡터 — 확대해도 깨지지 않음. 코드로 구성됨.
📌 로고, 아이콘, 일러스트레이션
2025년 기준 신규 웹 프로젝트는 WebP를 기본으로 사용하고, 구형 브라우저 대응이 필요하면 JPG 폴백을 설정하는 것이 권장됩니다.