How to Batch Resize 100+ Images for Your Website

先週の火曜日、私のチームのジュニア開発者がPhotoshopで製品画像のサイズを手作業で4時間もかけて変更するのを見ました。一つずつ。一つずつ。彼女がやっと200枚中47枚の画像を終えたとき、私はもう我慢できませんでした。椅子を引っ張り出して、残りの153枚の画像を3分以内で処理する方法を示しました。彼女の顔に浮かんだ表情は貴重でした — 半分は安心、半分は半日を無駄にしたことへの苛立ちでした。

私はサラ・チェンで、過去9年間にわたりウェブパフォーマンスエンジニアを務め、スラッピーなスタートアップからフォーチュン500のeコマースジャイアントまで、さまざまな人と仕事をしてきました。その間に、私は何千ものウェブサイトを最適化してきましたが、これだけは絶対に確実に言えます：不適切なサイズの画像は、私が出会うパフォーマンスの主要な悪化要因です。しかし、適切なツールとワークフローを知れば、最も簡単な問題です。

現実を見てみましょう：単一の最適化されていないヒーロー画像は8-12 MBの重さがあります。これを製品カタログやブログアーカイブ全体に掛け算すると、ダイヤルアップモデムも赤面するような読み込み時間がかかります。Googleの調査によると、53%のモバイルユーザーは、読み込みに3秒以上かかるサイトを放棄します。毎秒の読み込み時間が増えるごとに、コンバージョン率が7%減少する可能性があります。クライアントに、彼らのオーバーサイズの画像が年間6桁の収益を失わせていると言うと、突然画像の最適化が重要になります。

このガイドでは、画像を効率的にバッチサイズ変更するために私が学んだすべてを説明します。適切なツールの選択からプロセス全体の自動化まで、個人ブログを管理している場合でも、10,000製品のeコマースサイトを管理している場合でも、数分で数百枚の画像をリサイズする方法を学べます。

画像サイズが実際に重要な理由の理解

手法に入る前に、なぜこれが重要かを話しましょう。私は、6000x4000ピクセルの傑作を直接ウェブにアップロードすることを主張するデザイナーたちとの無数の会話を持ってきました。「でもとてもクリスプに見える！」と彼らは抗議します。確かに、非常に素晴らしい — 8Kモニターと光ファイバーインターネット接続を持つ訪問者の0.3%だけには。

平均的なスマートフォンの画面は1080ピクセル幅です。ほとんどのデスクトップモニターは最大1920ピクセルです。6000ピクセル幅の画像を400ピクセルのコンテナで表示するためにアップロードすると、ブラウザーは依然として全体の巨大なファイルをダウンロードし、その後処理能力を使用してスケーリングします。訪問者全員に必要なデータの15倍をダウンロードさせているのです。

私は先月、オンライン家具小売業者のために監査を行いました。彼らの製品ページは4G接続で8.7秒かかって読み込まれていました。その847枚の製品画像を平均4.2 MBから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ドルですが、時間を節約することで何百回も元を取っています。画像のサイズ変更、名前変更、透かし入れ、最適化を一度で行うカスタムワークフローを作成できます。私は、生の製品写真を取得して、3つの異なるサイズ（サムネイル、中、Large）にリサイズし、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秒。これをPhotoshopで手動で行った場合、アクションやバッチ処理を使っても、少なくとも30分はかかっていたでしょう、おそらくもっと長く。

私がeコマースクライアントのために使用するもう少し高度な例があります。これにより、一連の画像から3つの異なるサイズが作成されます：for img in *.jpg; do convert "$img" -resize