웹 이미지 최적화: 크기·해상도·압축 순서
웹사이트와 블로그 이미지를 필요한 픽셀 크기로 줄이고 적절한 형식과 압축 품질을 선택하는 단계별 가이드입니다.
표시 크기보다 지나치게 큰 원본을 피합니다
본문에서 가로 800px로 표시할 사진을 4000px 원본 그대로 올리면 사용자는 보이지 않는 픽셀까지 내려받습니다. 고해상도 화면을 고려해도 실제 표시 폭의 약 두 배 정도면 충분한 경우가 많습니다. 먼저 레이아웃의 최대 표시 폭을 확인하세요.
리사이즈 후 압축하는 이유
원본을 먼저 압축하고 다시 축소하면 불필요한 픽셀을 처리하고 두 번 인코딩할 수 있습니다. 권장 순서는 자르기, 리사이즈, 형식 변환, 품질 압축입니다. 각 단계의 원본을 모두 저장할 필요는 없지만 최초 원본은 별도로 보관하세요.
품질을 비교하는 방법
파일 크기 숫자만 보지 말고 100% 확대 상태에서 얼굴, 제품 윤곽, 글자와 그라데이션을 비교합니다. 사진은 약간의 손실이 눈에 띄지 않을 수 있지만 UI 캡처와 작은 텍스트는 압축 흔적이 쉽게 드러납니다.
성능 점검 체크리스트
- 모바일에서 이미지가 화면보다 크게 내려오지 않는가
- 너비와 높이를 지정해 레이아웃 이동을 줄였는가
- 초기 화면 밖 이미지는 지연 로딩하는가
- 대체 텍스트가 이미지 목적을 설명하는가
작성 및 검토: FreeTools 운영팀 · 마지막 검토 2026년 7월 31일 · 일반적인 사용 안내이며 중요한 판단은 원본과 공식 기준을 확인하세요.