How to Batch Resize 100+ Images for Your Website

지난 화요일, 내 팀의 주니어 개발자가 포토샵에서 제품 이미지를 수동으로 크기 조절하는 데 네 시간을 보내는 모습을 지켜보았습니다. 하나. 하나. 그녀가 200개 중 47번째 이미지를 마침내 완성했을 때, 더 이상 참을 수 없었습니다. 의자에 앉아 남은 153개의 이미지를 3분 이내에 처리하는 방법을 보여주었습니다. 그녀의 표정은 정말 값지더군요 — 반가움과 함께 반나절을 낭비했다는 불만이 섞여 있었습니다.

저는 사라 첸이고, 지난 9년 동안 웹 성능 엔지니어로 일해왔습니다. 제가 일했던 곳은 낡은 스타트업부터 포춘 500의 전자 상거래 대기업까지 다양합니다. 그동안 저는 수천 개의 웹사이트를 최적화해왔으며, 잘못 설정된 이미지가 제가 만나는 성능 저하의 주요 원인이라는 것을 확신합니다. 또한 올바른 도구와 작업 흐름을 알게 되면 해결하기 가장 쉬운 문제입니다.

현실은 이렇습니다: 단일 최적화되지 않은 히어로 이미지의 크기는 8-12 MB에 이를 수 있습니다. 이를 제품 카탈로그나 블로그 아카이브에 곱하면, 예전의 다이얼업 모뎀이 얼굴을 붉힐 만큼의 로드 시간을 초래합니다. 구글의 연구에 따르면 모바일 사용자의 53%가 3초 이상 로드되는 사이트를 포기합니다. 로드 시간이 1초 늘어날 때마다 전환율이 7% 감소할 수 있습니다. 클라이언트에게 그들의 과도한 이미지로 인해 연간 수십만 달러를 잃고 있다고 말하면, 갑자기 이미지 최적화가 우선순위가 됩니다.

이 가이드는 효율적으로 이미지를 배치 크기 조절하는 방법에 대해 제가 배운 모든 것을 다룰 것입니다. 올바른 도구 선택부터 전체 프로세스 자동화까지, 개인 블로그를 관리하든 10,000개 제품이 있는 전자 상거래 사이트를 운영하든, 몇 시간 대신 몇 분 안에 수백 개 이미지를 크기 조절하는 방법을 배울 수 있습니다.

이미지 크기가 실제로 중요한 이유 이해하기

방법으로 들어가기 전에 왜 그런지를 이야기해보겠습니다. 디자이너들과 수없이 많은 대화를 나누었고, 그들은 6000x4000 픽셀의 걸작을 웹에 직접 업로드하려고 고집합니다. "하지만 정말 선명해요!"라고 반박하죠. 물론, 8K 모니터와 광섬유 인터넷을 가진 0.3%의 방문자에게는 멋지게 보입니다.

평균 스마트폰 화면은 1080 픽셀 넓이입니다. 대부분의 데스크탑 모니터는 최대 1920 픽셀입니다. 6000픽셀 넓이의 이미지를 400픽셀 컨테이너에 표시하기 위해 업로드하면, 브라우저는 여전히 전체 거대한 파일을 다운로드한 후, 처리 능력을 이용해 축소합니다. 방문객에게 불필요하게 15배 더 많은 데이터를 다운로드하게 강요하고 있는 것입니다.

지난달 저는 온라인 가구 소매업체를 위해 감사를 실시했습니다. 그들의 제품 페이지는 4G 연결에서 8.7초에 걸쳐 로드되고 있었습니다. 평균 4.2 MB였던 847개의 제품 이미지를 180 KB로 배치 크기 조절한 후, 페이지 로드 시간은 2.1초로 단축되었습니다. 그들의 모바일 전환율은 이후 2주간 34% 증가했습니다. 이는 상관관계가 아니라 A/B 테스트에 의해 뒷받침된 인과관계입니다.

최적의 이미지 차원에 대해 알아야 할 점은 이렇습니다: 히어로 이미지는 2000픽셀 폭을 초과할 필요가 거의 없습니다. 제품 썸네일은 400-600픽셀에서 완벽하게 작동합니다. 블로그 게시물 이미지는 보통 1200픽셀 폭에서 멋져 보입니다. 그보다 큰 것은 단순히 대역폭을 낭비하고 방문객을 짜증나게 할 뿐입니다.

파일 크기도 차원만큼이나 중요합니다. 잘 최적화된 JPEG 파일은 전체 너비 이미지의 경우 100-200 KB, 썸네일의 경우 30-80 KB여야 합니다. 이미지의 크기가 지속적으로 500 KB를 초과하면, 뭔가 잘못되고 있는 것입니다. 현대의 압축 알고리즘은 눈에 띄는 품질 저하 없이 파일 크기를 60-80% 줄일 수 있습니다.

작업 흐름에 적합한 도구 선택하기

오랜 세월 동안 저는 수십 가지 이미지 크기 조절 도구를 테스트해보았고, 모든 문제를 해결할 수 있는 솔루션은 없다는 것을 말씀드릴 수 있습니다. 적합한 도구는 당신의 기술적 편안함 수준, 운영 체제 및 특정 요구 사항에 따라 다릅니다. 실제 운영 환경에서 사용하는 옵션을 분류해보겠습니다.

"이미지의 모든 메가바이트 부풀음은 당신이 잃고 있는 전환입니다. 히어로 이미지가 모바일에서 로드하는 데 8초가 걸리면 사용자는 그 아름다움을 보기 위해 기다리지 않습니다 — 경쟁업체로 이동합니다."

Mac 사용자가 GUI 애플리케이션을 원한다면, 저는 항상 Retrobatch를 추천합니다. 가격은 29.99달러지만, 절약된 시간만으로도 수백 배로 가치가 있습니다. 이미지를 한 번에 크기 조정하고, 이름을 바꾸고, 워터마크를 추가하고 최적화할 수 있는 사용자 지정 워크플로를 만들 수 있습니다. 실제로 저는 원본 제품 사진을 가져와서 세 가지 다른 크기(썸네일, 중간, 대형)로 크기 조정하고, WebP 형식으로 변환 후, 정리된 폴더에 출력하는 워크플로를 갖고 있습니다. 모든 것이 아이콘에 파일을 드래그 앤 드롭하기만 하면 됩니다.

Windows 사용자는 XnConvert를 살펴봐야 합니다. 완전히 무료이고 놀랍도록 강력합니다. 배치 작업을 아름답게 처리하며 500개 이상의 이미지 형식을 지원합니다. 인터페이스는 배우는 데 약 15분이 걸리지만, 첫 번째 배치 작업을 설정하면 그 작업을 저장하여 무한정 재사용할 수 있습니다.

개발자와 명령줄 애호가를 위해, ImageMagick은 금본위제입니다. 무료이며 오픈 소스로 모든 플랫폼에서 사용할 수 있습니다. 학습 곡선은 더 가파르지만, 그 힘은 비할 데 없습니다. 단 3초 정도 걸리는 명령어로 500개의 이미지를 크기 조정할 수 있습니다. 더 중요한 것은 이를 스크립트화하고, 자동화하며, 빌드 프로세스에 통합할 수 있다는 것입니다.

WordPress 사이트를 관리하고 있다면 지속적인 최적화를 위해 ShortPixel 플러그인을 추천하지만, 일회성 배치 작업의 경우 이미지를 업로드하기 전에 크기 조정하는 것이 좋습니다. WordPress 플러그인은 유지 관리에는 잘 작동하지만, 200개의 이미지를 한 번에 처리하기에는 적합하지 않습니다.

Cloudinary와 Imgix와 같은 클라우드 기반 서비스는 대규모 작업에 대해 훌륭하지만, 대부분의 중소형 웹사이트에는 과잉입니다. 저는 수천 개의 이미지를 매달 처리하는 클라이언트를 위해 이들을 사용하지만, 월 비용이 약 49달러부터 시작합니다. 가끔 배치 크기 조정을 할 경우, 로컬 도구가 더 비용 효율적입니다.

ImageMagick 방법: 파워 유저 접근법

제가 가장 자주 사용하는 방법을 보여드리겠습니다. ImageMagick은 처음에는 intimidating하게 보일 수 있지만, 기본 구문을 이해하면 과거에는 어떻게 살았는지 궁금해질 것입니다. 저는 지난 1년 동안 50,000개 이상의 이미지를 처리하는 데 이 도구를 사용했습니다.

먼저, ImageMagick을 설치해야 합니다. Mac의 Homebrew를 사용하면 brew install imagemagick으로 간단하게 설치할 수 있습니다. Ubuntu 또는 Debian Linux에서는 apt-get install imagemagick을 사용하세요. Windows 사용자는 공식 웹사이트에서 설치 프로그램을 다운로드할 수 있습니다. 설치는 약 2분 정도 걸립니다.

단일 이미지를 크기 조정하는 데 사용하는 기본 명령어는 다음과 같습니다: convert input.jpg -resize 1200x output.jpg. 이는 이미지의 넓이를 1200픽셀로 조정하면서 비율을 유지합니다. 높이는 자동으로 조정됩니다. 간단하죠?

그러나 실제 마법은 배치 작업에서 발생합니다. 예를 들어, 150개의 제품 사진이 있는 폴더가 있다고 가정해봅시다. 썸네일을 400픽셀 폭으로 만들어야 합니다. 터미널에서 해당 폴더로 이동한 후 다음 명령어를 실행합니다: mogrify -resize 400x -quality 85 -path ./thumbnails *.jpg. 이 명령어는 폴더에 있는 모든 JPEG를 처리하여 400픽셀로 크기 조정하고, 품질을 85%로 설정한 후 (파일 크기와 시각적 품질 간의 최적 지점), 썸네일 하위 폴더에 출력합니다.

저는 지난주에 287개 이미지에 대해 이 명령어를 실행했습니다. 총 처리 시간: 43초. 만약 이 작업을 포토샵에서 수동으로 했더라면, 액션과 배치 처리 기능이 있더라도 최소 30분, 아마도 더 걸렸을 것입니다.

전자 상거래 클라이언트를 위해 사용하는 더 고급의 예제를 보여드리겠습니다. 이는 이미지 배치에서 세 가지 다른 크기를 생성합니다: for img in *.jpg; do convert "$img" -resize