만든 과정

여러 이미지를 한 번에 WebP로 변환하고 줄이는 도구 만들기

이미지 일괄 변환기 열기

블로그와 웹사이트에 올릴 여러 이미지를 같은 크기로 줄이고 JPG·PNG·WebP로 일괄 변환하는 도구의 제작 이야기입니다.

블로그나 홈페이지에 사진을 올리기 전에 크기와 용량을 줄이는 일이 있습니다. 한 장이라면 이미지 편집기에서 저장할 수 있지만, 여러 장이면 같은 설정을 반복해야 합니다. 파일마다 창을 열고 너비를 바꾸고 형식을 선택하는 과정이 실제 글쓰기보다 길어지기도 합니다.

한 장 편집이 아니라 같은 작업의 반복

이 문제의 핵심은 정교한 보정이 아닙니다. 여러 이미지에 같은 규칙을 적용하는 것입니다.

자르기, 필터, 색 보정까지 넣으면 다시 범용 편집기가 됩니다. 반복 작업을 줄인다는 목적에서 벗어나므로 이번 도구에서는 제외했습니다.

작은 이미지는 다시 키우지 않는다

최대 가로 크기를 1920px로 정했다고 해서 800px 이미지를 억지로 확대할 필요는 없습니다. 확대는 파일 크기를 늘리면서 선명도를 높이지 못합니다. 설정값보다 큰 이미지만 줄이고 작은 이미지는 원래 크기를 유지하도록 했습니다.

가로 크기만 받는 이유도 같습니다. 사용자가 세로 값까지 계산하게 만들면 이미지마다 비율을 확인해야 합니다. 원본의 가로와 세로 비율을 유지해 세로 크기를 자동으로 계산합니다.

투명 배경과 출력 형식

PNG와 WebP는 투명 배경을 유지할 수 있지만 JPG에는 투명 영역이 없습니다. 투명 PNG를 JPG로 바꾸면 배경이 검게 보이는 환경도 있습니다. JPG로 내보낼 때는 먼저 흰 배경을 채운 뒤 이미지를 그리도록 했습니다.

PNG는 손실 압축 품질값의 영향을 받지 않으므로 품질 조절을 비활성화합니다. JPG와 WebP에서는 용량과 화질 사이를 사용자가 직접 조절할 수 있게 했습니다.

브라우저에서 순서대로 처리하기

여러 고해상도 이미지를 동시에 디코딩하면 메모리를 많이 사용합니다. 도구는 파일 정보를 먼저 확인한 뒤 다운로드할 때 한 장씩 순서대로 변환합니다. 한 번에 최대 30장, 한 파일은 25MB로 제한했습니다.

현재는 브라우저가 안정적으로 읽을 수 있는 JPEG, PNG, WebP에 집중했습니다. HEIC는 브라우저별 차이가 커서 지원한다고 표시하고 일부 환경에서 실패하게 두는 것보다 범위에서 분명히 제외하는 편을 택했습니다.

결과

이미지를 끌어놓고 출력 형식, 최대 가로 크기, 품질을 한 번 정하면 됩니다. 한 장은 이미지 파일로, 여러 장은 ZIP으로 내려받습니다. 사진은 서버에 업로드되지 않습니다.

이 도구는 디자인을 대신하지 않습니다. 블로그와 웹 작업을 시작하기 전에 반복되는 크기 줄이기와 형식 통일을 짧게 끝내는 작업대입니다.