웹을 위한 이미지 압축 모범 사례

웹을 위한 이미지 압축 모범 사례

이미지는 일반적인 웹페이지 데이터의 절반 이상을 차지합니다. 최적화되지 않은 모든 킬로바이트는 더 느린 로딩 시간, 더 높은 이탈률, 더 낮은 검색 순위로 이어집니다. 이 가이드는 전문 웹 개발자가 모든 화면 크기에서 선명하고 빠르게 로딩되는 이미지를 제공하기 위해 사용하는 모범 사례를 다룹니다.

1. 항상 마스터 사본 보관

압축을 적용하기 전에 원본 이미지의 압축되지 않은 마스터를 저장하세요. 마스터 사본이 있으면 다양한 품질 수준을 실험하고 나중에 처음부터 다시 시작하지 않고도 재압축할 수 있는 자유를 얻을 수 있습니다. 마스터는 PNG 또는 TIFF와 같은 무손실 포맷으로 저장한 다음 프로덕션용으로 사본을 압축하세요.

2. 품질 설정 이해하기

압축 품질은 일반적으로 0(최악)에서 100(최고)까지의 척도로 측정됩니다. 최적의 설정은 이미지 콘텐츠와 성능 목표에 따라 달라집니다.

JPEG 품질 가이드라인:

• 80~85: 대부분의 웹 사진에 탁월합니다. 아티팩트가 거의 감지되지 않습니다.
• 60~75: 썸네일 및 배경 이미지에 적합합니다. 일부 압축 아티팩트가 나타납니다.
• 60 미만: 눈에 띄는 블록화 및 색상 띠 현상. 파일 크기가 절대적으로 우선일 때만 사용하세요.

WebP 품질 가이드라인:

• 75~85: 약 25~35% 더 작은 파일 크기로 JPEG 품질과 일치합니다.
• 무손실 WebP: 픽셀 완벽한 출력이 중요한 그래픽 및 스크린샷에 이상적입니다.

PNG 압축:

• PNG는 무손실 압축만 사용합니다. 비트 심도 감소(32비트에서 8비트 색상으로 변환)는 단색 그래픽에서 가시적인 품질 손실 없이 PNG를 축소하는 가장 효과적인 방법입니다.

AVIF 품질 가이드라인:

• 50~70: 비슷한 시각적 품질에서 JPEG보다 최대 50% 더 작은 파일을 생성합니다.
• 더 높은 인코딩 복잡성은 더 느린 압축을 의미하지만, 파일 크기 절감 효과는 상당합니다.

3. 이미지 콘텐츠에 맞게 압축 방식 조정

모든 이미지가 압축에 동일하게 반응하지는 않습니다. 콘텐츠 유형에 따라 접근 방식을 맞추세요.

• 사진: 손실 압축(JPEG, WebP, AVIF)이 가장 효과적입니다. 품질 80에서 시작하여 허용 가능한 임계값을 찾을 때까지 낮춰가세요.
• 스크린샷 및 UI 목업: 무손실 압축(PNG, 무손실 WebP)이 선명한 텍스트와 깔끔한 가장자리를 보존합니다. 이러한 이미지는 매우 효율적으로 압축되는 넓은 균일 영역을 포함합니다.
• 로고 및 아이콘: 무손실 포맷이 벡터와 같은 선명도를 유지합니다. 원본의 색상이 적다면 색상 심도를 줄인 PNG가 매우 작아질 수 있습니다.
• 제품 사진: 품질 75~85가 최적점입니다. 원본과의 시각적 차이는 거의 보이지 않지만 파일 크기 절감은 극적입니다.

4. 숨겨진 메타데이터 제거

디지털 카메라와 디자인 소프트웨어는 EXIF 데이터라는 메타데이터를 이미지 파일에 포함시킵니다. 여기에는 카메라 모델, GPS 좌표, 타임스탬프, 색상 프로필 정보가 포함될 수 있습니다. 메타데이터를 제거하면 시각적 영향 없이 파일 크기를 5~15% 줄일 수 있습니다.

대부분의 압축 도구는 메타데이터를 자동으로 제거하는 옵션을 제공합니다. 저작권이나 색상 프로필 정보를 보존해야 할 특별한 이유가 없다면 활성화하세요.

5. 원본 포맷으로 압축

최신 이미지 압축기는 원본 포맷을 유지하면서 이미지를 최적화할 수 있습니다. 이는 포맷 변환이 종종 불필요하고 때로는 바람직하지 않기 때문에 중요한 기능입니다.

• PNG는 PNG로 유지: 무손실 압축이 투명도와 선명한 가장자리를 보존합니다.
• JPEG는 JPEG로 유지: 최적화된 Huffman 테이블과 양자화가 재인코딩 손실 없이 더 작은 파일을 제공합니다.
• WebP는 WebP로 유지: 손실 및 무손실 WebP 모두 메타데이터 제거와 최적화된 인코딩 매개변수의 이점을 누립니다.
• AVIF는 AVIF로 유지: 고급 압축 튜닝으로 이미 효율적인 AVIF 파일을 더욱 줄일 수 있습니다.

원본 포맷 그대로 압축하면 포맷 변환 체인을 통해 품질이 저하되지 않으며, 워크플로우도 단순하게 유지됩니다.

6. 압축 워크플로우 자동화

수동 압축은 소수의 이미지를 넘어서면 확장되지 않습니다. 프로덕션 웹사이트의 경우 빌드 파이프라인에 압축을 통합하세요.

• 빌드 타임 플러그인: sharp, Squoosh CLI, imagemin과 같은 도구를 빌드 단계에서 실행할 수 있습니다.
• CMS 자동화: 많은 콘텐츠 관리 시스템이 업로드 시 이미지를 압축하는 플러그인을 제공합니다.
• CI/CD 통합: 배포 파이프라인에 압축 단계를 추가하여 모든 이미지가 라이브 전에 자동으로 최적화되도록 합니다.

7. 썸네일은 더 공격적으로 압축

썸네일과 미리보기 이미지는 작은 크기로 표시되므로 압축 아티팩트가 훨씬 덜 눈에 띕니다. 더 낮은 품질 설정을 적용하세요.

• JPEG 썸네일: 품질 50~60
• WebP 썸네일: 품질 50~70
• PNG 썸네일: 이미지가 허용한다면 8비트 색상으로 축소

8. 압축과 지연 로딩 결합

압축은 각 이미지의 크기를 줄이지만, 지연 로딩은 이미지가 뷰포트에 진입할 때만 다운로드되도록 보장합니다. 이 조합은 가장 영향력이 큰 성능 최적화 중 하나입니다. img 태그에 loading="lazy"를 추가하고 나머지는 브라우저가 처리하도록 하세요.

9. 실제 측정 지표로 테스트

시각적 추측은 신뢰할 수 없습니다. 객관적인 도구를 사용하여 압축 선택의 영향을 측정하세요.

• Lighthouse는 이미지 최적화 기회를 보고하고 잠재적 절감 효과를 추정합니다.
• PageSpeed Insights는 이미지 무게가 Core Web Vitals 점수에 어떤 영향을 미치는지 보여줍니다.
• WebPageTest는 첫 바이트까지의 시간과 다운로드 소요 시간을 포함한 모든 이미지 요청의 폭포형 차트를 제공합니다.
• Squoosh는 설정을 확정하기 전에 압축된 출력을 원본과 나란히 미리 볼 수 있게 해줍니다.

모두 종합하기

현대적인 이미지 최적화 워크플로우는 다음과 같습니다.

1. 압축되지 않은 마스터 사본을 저장합니다.
2. 압축 중 메타데이터를 제거합니다.
3. 원본 포맷으로 압축합니다. 불필요한 변환은 하지 않습니다.
4. 다양한 뷰포트에 적절한 크기의 버전을 제공합니다.
5. 중요하지 않은 이미지에 지연 로딩을 활성화합니다.
6. 성능을 측정하고 반복합니다.

지금 바로 당사의 무료 온라인 이미지 압축기로 이러한 모범 사례를 적용해 보세요. 이미지를 업로드하고 몇 초 만에 최적화된 버전을 다운로드하세요. 원본 포맷은 그대로 유지됩니다.