웹사이트 이미지를 일괄 압축하는 방법: 통일된 크기, 형식, ZIP 다운로드 흐름

어떤 경우에 일괄 압축이 적합한가

일괄 압축은 용도가 비슷한 이미지 묶음에 적합합니다. 글 삽입 이미지, 상품 목록 이미지, 포트폴리오 썸네일, 백엔드 업로드 대기 소재 등이 여기에 해당합니다. 장점은 처리 방식을 통일해 한 장씩 설정을 반복하는 시간을 줄이는 것입니다. 현재 도구는 각 이미지마다 원본 크기, 출력 크기, 출력 치수, 상태, 다운로드 링크를 표시합니다.

각 이미지마다 목표가 다르다면, 예를 들어 첫 번째는 반드시 80KB, 두 번째는 반드시 300KB여야 한다면, 일괄 도구는 가장 적합한 도구가 아닙니다. 목표 KB 필드도 없고 파일별 개별 설정도 없습니다. 모든 이미지는 출력 형식, 품질, 최대 크기를 공유합니다.

일괄 이미지 압축 도구 열기

공통 설정을 정하는 방법

먼저 출력 형식을 선택합니다. JPEG는 호환성이 넓고 사진이나 투명 배경이 필요 없는 이미지에 적합합니다. WebP는 웹 리소스에 자주 쓰이지만, 받는 플랫폼과 오래된 환경이 지원하는지는 별도로 확인해야 합니다. 일괄 도구는 JPEG와 WebP 출력을 지원합니다. 브라우저가 선택한 형식을 내보낼 수 없으면 해당 행에 실패가 표시됩니다.

다음으로 최대 크기를 정합니다. 여기서 최대 크기는 정확한 너비와 높이가 아니라 더 긴 변을 제한합니다. 2400 × 1600 가로 이미지를 1200px로 설정하면 약 1200 × 800이 되고, 1600 × 2400 세로 이미지는 약 800 × 1200이 됩니다. 마지막으로 품질을 조정합니다. 품질이 낮을수록 보통 용량은 더 절약되지만, 디테일 손실도 더 뚜렷해집니다.

한 장으로 WebP 출력 테스트

추천 흐름

일괄 처리 전에 이미지를 용도별로 나눕니다. 큰 이미지, 썸네일, 투명 이미지, 스크린샷을 한 묶음에 섞지 않는 것이 좋습니다. 품질과 형식에 대한 허용도가 서로 다르기 때문입니다. 비슷한 이미지 묶음에 같은 설정을 사용하면 결과를 더 잘 제어할 수 있습니다.

파일을 선택한 뒤 먼저 작은 샘플을 압축하고 결과 표의 출력 크기와 용량을 확인합니다. 많은 행에 “준비됨, 하지만 원본보다 작지 않음”이 표시된다면, 해당 이미지들이 이미 충분히 작거나 현재 형식이 추가 압축에 적합하지 않을 수 있습니다. 두 개 이상의 파일이 완료되면 ZIP으로 다운로드할 수 있습니다. ZIP은 편리한 묶음일 뿐, 이미지 픽셀을 다시 압축한다는 뜻이 아닙니다.

1. 용도별로 나누고, 투명 이미지와 일반 사진을 한 묶음에 섞지 않습니다.
2. JPEG 또는 WebP 출력을 선택하고 가장 긴 변의 상한을 설정합니다.
3. 먼저 중간 품질로 한 번 실행하고 각 행의 상태를 확인합니다.
4. 여러 결과가 사용할 수 있음을 확인한 뒤, 개별 파일 또는 ZIP을 다운로드합니다.

가상 예시

예를 들어 서로 다른 휴대폰에서 온 글 표지 이미지 30장을 정리해야 하며, 원본의 너비, 높이, 파일 크기가 크게 다르다고 가정합니다. 같은 일괄 작업에 넣고, 출력 형식을 JPEG로 선택하며, 최대 크기를 1600px로 설정하고, 품질을 중간에서 높은 범위로 둘 수 있습니다. 압축 후 표를 확인해 큰 이미지가 적절한 너비와 높이로 줄었고 작은 이미지가 확대되지 않았는지 확인합니다.

그중 몇 장이 투명 PNG 아이콘이라면 사진과 함께 JPEG로 내보내는 것은 권장되지 않습니다. 투명 영역이 흰 배경으로 바뀌기 때문입니다. 아이콘 소재는 형식 변환 도구나 크기 도구로 따로 처리하거나, 사이트가 지원하는지 확인한 뒤 WebP로 변환할 수 있습니다.

한 장의 형식 변환

제한과 판단 경계

일괄 도구는 브라우저 탭 안에서 디코딩, 크기 조정, 재인코딩, ZIP 생성을 수행합니다. 처리할 수 없는 행은 건너뛰거나 표시하고 다른 파일 처리를 계속합니다. 입력과 출력은 모두 정적 이미지를 대상으로 합니다. 움직이는 이미지는 애니메이션을 보존하지 않으며, 메타데이터와 색상 설정도 편집 대상으로 보존되지 않습니다.

웹사이트에 각 이미지별 엄격한 KB 상한이 있다면, 일괄 도구로 먼저 크기를 통일한다고 해서 기준 충족이 보장되지는 않습니다. 초과한 이미지는 목표 KB 도구로 한 장씩 처리해야 합니다. 웹사이트가 정확한 픽셀을 요구한다면, 예를 들어 모든 썸네일이 800 × 450이어야 한다면, 일괄 압축의 최대 크기는 정확한 치수와 같지 않으므로 먼저 크기 도구를 사용해야 합니다.

정확한 픽셀 크기 처리

자주 묻는 질문

일괄 압축은 각 이미지를 같은 크기로 만들까요?

아닙니다. 같은 형식, 품질, 최대 크기로 각 이미지를 처리하지만, 이미지 내용이 다르면 출력 크기도 달라집니다.

ZIP 다운로드는 이미지를 한 번 더 압축하는 것인가요?

아닙니다. 여기서 ZIP은 이미 생성된 여러 출력 파일을 한 번에 다운로드하기 쉽게 묶는 용도이며, 추가적인 이미지 화질 압축으로 이해해서는 안 됩니다.

폴더를 직접 선택할 수 있나요?

현재 도구는 여러 파일 선택을 통해 이미지를 처리하며, 폴더 가져오기는 제공하지 않습니다. 먼저 파일 선택기에서 처리할 이미지 파일을 선택해야 합니다.

참고 자료

• HTMLCanvasElement: toBlob() 메서드 | MDN
• 이미지 파일 유형 및 형식 가이드 | MDN
• WebP 문서 | Google for Developers