Web에서 품질 손실 없이 이미지를 압축하는 방법

대용량 이미지 파일은 웹사이트 로딩 속도 저하의 가장 큰 원인 중 하나입니다. 연구에 따르면 이미지는 일반적인 웹페이지 총 크기의 50% 이상을 차지합니다. 웹사이트 로딩 시간이 3초를 초과하면 방문자의 거의 절반이 이탈할 수 있습니다. 좋은 소식은 올바른 압축 기술을 사용하면 눈에 보이는 품질 손실 없이 이미지 파일 크기를 크게 줄일 수 있다는 것입니다.

이미지 압축이 Web에 중요한 이유

이미지 압축은 단순히 저장 공간을 절약하기 위한 것이 아닙니다. 사용자 경험, 검색 엔진 순위 및 수익에 직접적인 영향을 미칩니다. Google은 페이지 속도를 순위 요소로 사용하며, 압축되지 않은 이미지는 특히 LCP(최대 콘텐츠 그리기) 지표에서 Core Web Vitals 점수가 낮은 가장 흔한 원인입니다.

이미지를 올바르게 압축하면 대역폭 비용을 낮추고, 모바일 로딩 시간을 개선하며, 더 부드러운 브라우징 경험을 만들 수 있습니다. 핵심은 파일 크기와 시각적 품질 사이의 최적의 균형점을 찾는 것입니다.

손실 압축과 무손실 압축 이해하기

이미지 압축에는 두 가지 기본 방법이 있으며, 이들 간의 차이를 이해하는 것이 웹사이트에 올바른 선택을 하는 데 중요합니다.

무손실 압축

무손실 압축은 이미지 데이터를 전혀 버리지 않고 파일 크기를 줄입니다. 원본 이미지는 압축 파일에서 완벽하게 복원할 수 있습니다. PNG와 같은 형식은 무손실 압축 알고리즘을 사용합니다. 이 방법은 그래픽, 로고, 스크린샷 및 날카로운 가장자리나 텍스트가 있는 이미지에 이상적입니다. 파일 크기는 일반적으로 10-30% 감소합니다.

손실 압축

손실 압축은 일부 이미지 데이터를 영구적으로 삭제하여 더 작은 파일 크기를 달성합니다. JPEG와 WebP는 손실 압축을 사용합니다. 적절한 품질 설정에서는 대부분의 시청자가 시각적 차이를 인지하지 못하지만, 파일 크기는 40-80%까지 줄일 수 있습니다. 이로 인해 손실 압축은 Web에서 사진과 복잡한 이미지에 가장 적합한 선택이 됩니다.

올바른 이미지 형식 선택하기

적절한 형식을 선택하는 것은 효과적인 이미지 최적화의 첫 번째 단계입니다. 각 형식에는 고유한 장점과 단점이 있습니다.

• JPEG: 사진과 다양한 색상이 있는 복잡한 이미지에 가장 적합합니다. 조정 가능한 품질 수준의 손실 압축을 지원합니다. 투명도를 지원하지 않습니다.
• PNG: 투명도, 날카로운 가장자리 또는 텍스트가 필요한 이미지에 가장 적합합니다. 무손실 압축을 사용합니다. 사진의 파일 크기가 JPEG보다 큽니다.
• WebP: Google이 개발한 현대적인 형식으로, 손실 및 무손실 압축과 투명도를 모두 지원합니다. WebP 파일은 동일 품질에서 JPEG보다 25-35% 작으며, 현재 모든 주요 브라우저에서 지원됩니다.
• AVIF: 최신 형식으로, 최고의 압축률을 제공하며 JPEG보다 최대 50% 더 작습니다. 브라우저 지원이 증가하고 있지만 아직 보편화되지 않았습니다. 대체 형식과 함께 사용하는 것을 고려하세요.
• SVG: 아이콘, 로고 및 간단한 일러스트레이션에 가장 적합합니다. SVG는 벡터 기반이므로 모든 크기에서 완벽하게 확장되며 파일 크기가 매우 작습니다.

이미지 압축 단계별 프로세스

1. 표시 크기에 맞게 조정하기

표시 크기보다 큰 이미지를 제공하지 마세요. 이미지가 800픽셀 너비로 표시된다면 4000픽셀 버전을 제공할 이유가 없습니다. 압축을 적용하기 전에 먼저 이미지를 표시 크기에 맞게 조정하세요. 이 단계만으로도 파일 크기를 80% 이상 줄일 수 있습니다.

2. 올바른 형식 선택하기

WebP를 주요 형식으로 사용하고 JPEG 또는 PNG를 대체 형식으로 사용하세요. 사진의 경우 손실 압축 WebP가 최상의 크기 대비 품질 비율을 제공합니다. 투명도가 필요한 그래픽의 경우 알파 채널이 있는 WebP 또는 PNG를 대체 형식으로 사용하세요.

3. 압축 적용하기

JPEG와 WebP의 경우 품질 설정 80에서 시작하여 필요에 따라 조정하세요. 대부분의 이미지는 품질 75-85에서 원본과 동일하게 보이지만 파일 크기는 크게 줄어듭니다. PNG의 경우 팔레트 축소와 압축 알고리즘을 적용하는 최적화 도구를 사용하세요.

4. 반응형 이미지 구현하기

srcset 속성을 사용하여 다양한 화면 해상도에 대해 서로 다른 크기의 이미지를 제공하세요. 이렇게 하면 모바일 사용자가 전체 데스크톱 버전이 아닌 적절한 크기의 이미지를 다운로드할 수 있습니다.

5. 지연 로딩 활성화하기

스크롤 없이 보이는 영역 아래에 나타나는 이미지에 loading="lazy"를 추가하세요. 이렇게 하면 사용자가 스크롤하여 가까이 오기 전까지 브라우저가 이미지를 다운로드하지 않아 초기 페이지 로딩 시간이 크게 줄어듭니다.

피해야 할 일반적인 실수

• 카메라나 스톡 사진 사이트에서 직접 압축되지 않은 이미지 제공하기
• JPEG나 WebP가 훨씬 더 작은데 사진에 PNG 사용하기
• width와 height 속성을 지정하지 않아 레이아웃 이동 발생
• 눈에 보이는 아티팩트가 나타날 정도로 이미지를 과도하게 압축하기
• 이미지의 WebP 버전 만들기를 잊어버리기

권장 압축 설정

광범위한 테스트를 기반으로 한 Web 이미지의 최적 품질 설정은 다음과 같습니다:

• JPEG 품질: 사진은 75-85, 텍스트 오버레이가 있는 이미지는 85-90
• WebP 품질: 손실은 75-85, 그래픽은 무손실 모드
• PNG: 256색 이하의 단순 그래픽에는 8비트 PNG 사용
• 최대 크기: 히어로 이미지 너비 1920px, 콘텐츠 이미지 800px