웹사이트 출시 전 이미지 압축 체크리스트

웹사이트 출시 전, 이미지 압축은 로딩 속도와 사용자 경험을 향상시키는 핵심 단계입니다. 압축되지 않은 이미지는 페이지 지연, 이탈률 증가, 심지어 검색 엔진의 사이트 평가에 부정적인 영향을 미칠 수 있습니다. 본 체크리스트는 이미지 압축의 핵심 확인 항목을 정리하여, 출시 전에 하나씩 확인하고 모든 이미지가 '가볍게' 준비되도록 돕습니다.

1. 이미지 형식이 적절한지 확인

이미지 형식은 사용 상황에 따라 다릅니다. 일반적으로 사진과 복잡한 그라데이션 이미지는 JPEG, 아이콘, 로고 및 단순 그래픽은 PNG-8 또는 SVG, 애니메이션이나 투명 배경이 필요하면서 파일 크기가 작은 경우 WebP를 고려합니다. BMP나 TIFF와 같은 압축되지 않은 형식은 피하세요. 체크리스트:

사진 이미지가 JPEG 또는 WebP로 변환되었나요?
아이콘과 장식 요소에 SVG(확장 가능한 벡터 그래픽)를 사용했나요?
PNG 이미지의 색상 깊이(8비트/24비트)를 확인했나요?
WebP 형식(최신 브라우저 지원) 사용을 고려했나요?

2. 이미지 원본 크기 제어

업로드하는 이미지 크기는 실제 표시 크기와 일치해야 하며, HTML이나 CSS로 축소하는 데 의존하지 않아야 합니다. 예를 들어, 표시 영역 너비가 800px이면 4000px 너비의 이미지를 업로드할 필요가 없습니다. 체크리스트:

각 이미지의 최대 너비가 레이아웃 컨테이너 너비를 초과하지 않나요?
이미지 높이가 자동 조정되거나 고정되어 늘어나거나 왜곡되지 않나요?
다양한 기기에 적합한 크기를 제공하기 위해 반응형 이미지(srcset 속성)를 사용했나요?

3. 적절한 압축 도구 선택

압축 도구는 손실 압축과 무손실 압축으로 나뉩니다. 손실 압축(예: TinyPNG)은 파일 크기를 크게 줄일 수 있지만 육안으로는 거의 차이를 느끼지 못합니다. 무손실 압축(예: ImageOptim)은 화질을 손상시키지 않지만 압축률이 낮습니다. 먼저 75%-85% 품질의 손실 압축을 시도하고, 효과가不明显하면 전환하는 것을 권장합니다. 일반적인 도구:

온라인 도구: TinyPNG, Compressor.io, Squoosh
로컬 소프트웨어: ImageOptim, RIOT, Photoshop '웹용으로 저장'
빌드 도구: imagemin(Webpack 등과 함께)

4. 화질과 파일 크기의 균형 유지

과도한 압축은 톱니, 색상 블록 또는 흐림 현상을 초래하여 브랜드 이미지에 영향을 미칠 수 있습니다. 압축 후 원본 이미지와 압축 이미지를 미리 보기로 비교하고, 특히 텍스트, 가장자리 및 그라데이션 영역을 확인하는 것이 좋습니다. 일반적으로 JPEG 품질은 70%-85% 사이, WebP 품질은 약 80%, PNG-8은 256색 이내로 설정합니다. 체크리스트:

핵심 이미지(예: 제품 메인 이미지)의 화질을 별도로 확인했나요?
압축 후 파일 크기가 적절한 범위(일반적으로 200KB 이내, 장식 이미지는 더 작게) 내에 있나요?
눈에 띄는 압축 흔적이 있나요?

5. 일괄 처리 및 명명 규칙

웹사이트 이미지 수가 많은 경우 수동으로 하나씩 압축하지 말고 일괄 처리 기능이나 자동화 스크립트를 사용하세요. 동시에 이미지 파일 이름에는 설명 키워드(예: 'blue-tshirt-front.jpg')가 포함되어야 하며, 'IMG_001.jpg'와 같은 이름은 피하세요. 이는 검색 엔진이 이미지 내용을 이해하는 데 도움이 됩니다. 체크리스트:

일괄 압축(예: TinyPNG에서 여러 이미지 동시 업로드)을 사용했나요?
이미지 파일 이름이 통일된 규칙(소문자, 하이픈 구분, 키워드 포함)을 따르나요?
Retina 화면용으로 다양한 해상도의 대체 이미지를 생성했나요?

6. 압축 후 로딩 속도 확인

압축이 완료되면 테스트 환경에서 도구(예: Google PageSpeed Insights, GTmetrix)를 사용하여 이미지 로딩 상황을 확인하는 것이 좋습니다. '압축되지 않은 이미지 방지' 및 '적절한 형식의 이미지 사용'과 같은 권장 사항에 주목하세요. 체크리스트: