ImageShrinker ―― 複数画像をまとめて縮小

これは何?

たくさんの画像ファイルをまとめて縮小するツールです。今どきのデジカメやスマホで撮影した高解像度の画像ファイルを、Webページに載せるような用途を想定しているので、HTMLの生成機能も付いています。

C#で記述しました。.NET Framework 4.7.2以上で動作します(よって、Windows向けです)。

画像形式はJPEGとPNGに対応しているので、「たくさんスクショを撮った。ここから手順書のHTMLを作りたい」といった用途でも使えるかと思います。

ソースはGitHubで公開しています。

https://github.com/kmaebashi/ImageShrinker

画面

こんな感じの画面です。

画面上の各機能

画面上の各機能は、以下の通りです。

• ①リサイズ後の幅と高さ
  画像リサイズ後の幅と高さを指定します。②のリサイズモードが「幅を合わせる」の時は、高さは(使わないので)非活性となります。
• ②リサイズモード
  画像の縮小方法を指定します。以下の2種類から選択します。
  1. 幅を合わせる
     画像の幅を、指定した幅に合わせて縮小します。高さは幅の縮小に合わせて縮小されます。
     
  2. サイズに収める
     画像を、指定した幅と高さの矩形に収まるように縮小します。
     
  どちらを指定しても、画像自体の縦横比は変わりません。
• ③ファイル名サフィックス
  縮小後のファイル名に付与されるサフィックスです。たとえばここに「_s」と指定した場合、元画像が「abc.jpg」というファイル名なら、縮小画像のファイル名は「abc_s.jpg」となります。
• ④ファイルがあったら上書き
  ここにチェックを入れると、縮小画像生成時、同名のファイルがそのフォルダにあった場合に上書きします。チェックを入れないと、その場で処理を中断します。
• ⑤テンプレートHTML
  ここに指定したHTMLについて、{0}～{3}のプレースホルダ―を処理対象のファイル名に応じて置換したものが、「結果HTML」の欄に出力されます。下に説明が付けてありますが、各プレースホルダーの意味は以下の通り。
  • {0} … 元ファイル名。元のファイル名が「abc.jpg」なら、「abc.jpg」になります。
  • {1} … 縮小後のファイル名。ファイル名サフィックスに「_s」と指定し、元のファイル名が「abc.jpg」なら、「abc_s.jpg」になります。
  • {2} … 元ファイル名(拡張子なし)。元のファイル名が「abc.jpg」なら、「abc」になります。
  • {3} … 拡張子(ピリオド含む)。元のファイル名が「abc.jpg」なら、「.jpg」になります。
  具体的にどう使うかは、後述します。HTML生成機能を使わないなら、空欄のままで構いません。
• ⑥ファイル選択ボタン
  これをクリックするとファイル選択のダイアログが表示されるので、縮小対象のファイルを選択します(複数選択可能)。
• ⑦出力フォルダ選択ボタン
  これをクリックするとフォルダ選択のダイアログが表示されるので、縮小画像の出力先のフォルダを選択します。ここでフォルダを選択すると、「元ファイルと同じ場所」のチェックは外れます。
• ⑧元ファイルと同じ場所
  縮小画像の出力先が元ファイルと同じ場所でよい場合は、これをチェックします。これをチェックすると、出力フォルダ選択ボタンで指定したフォルダはクリアされます。
• ⑨リサイズ実行ボタン
  このボタンを押すことで、縮小が実行されます。
• ⑩プログレスバー
  縮小の進捗が表示されるプログレスバーです。
• ⑪結果HTML
  テンプレートHTML欄に入力したHTMLのプレースホルダーを置換したものを、画像ファイルの数だけ出力するエリアです。このHTMLを使用する場合、ここからコピペしてください。

具体的な使い方

「旅行に行って写真をたくさん撮ってきた。Webページに載せて友達に見せたい」というような使い方を想定しています。

ケース1

「たくさんの写真を幅500ピクセルでWebページに並べたい。その画像をクリックすると、原寸大の(スマホで撮影したままの解像度の)写真を表示できるようにしたい。」というケース(上の画像にあるのはこのケースです)。

1. リサイズ後の幅に500を、リサイズモードを「幅を合わせる」に、ファイル名サフィックスを「_s」にします。
2. テンプレートHTML欄に、以下のようなHTMLを入力します。

   <p>ここに説明を書く</p>
   <p><a href="./{0}"><img src="./{1}"></a></p>
   

3. 画像を選択して縮小を実行します。結果HTMLにはたとえば以下のようなHTMLが生成されます。

   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_045440024.jpg"><img src="./PXL_20240615_045440024_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_051907012.jpg"><img src="./PXL_20240615_051907012_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_051911443.jpg"><img src="./PXL_20240615_051911443_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_053708718.jpg"><img src="./PXL_20240615_053708718_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_062805872.jpg"><img src="./PXL_20240615_062805872_s.jpg"></a></p>
   

4. これを、画像と同じフォルダに置いた適当なHTMLにコピペして、「ここに説明を書く」となっているところに説明を書きます。

この手順で作ったページのサンプルがこちら。

ケース2

「たくさんの写真を幅500ピクセルでWebページに並べたい。今どきのスマホのカメラの解像度は高すぎるので、クリックした場合でも、縦横1000ピクセルの範囲内に縮小した画像を表示したい。」というケース。

このケースでは、縮小を2回実行します。

1. リサイズ後の幅に500を、リサイズモードを「幅を合わせる」に、ファイル名サフィックスを「_s」にします。
2. このケースでは元サイズの画像は使わないので、出力先フォルダを指定します。
3. 1回目の実行では、テンプレートHTML欄は空欄のままにしてリサイズを実行します。
4. リサイズ後の幅と高さに1000を、リサイズモードを「サイズに収める」に、ファイル名サフィックスを「_l」にします。
5. テンプレートHTML欄に、以下のようなHTMLを入力します。

   <p>ここに説明を書く</p>
   <p><a href="./{2}_l{3}"><img src="./{2}_s{3}"></a></p>
   

6. もう一度縮小を実行します。結果HTMLにはたとえば以下のようなHTMLが生成されます。

   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_041842223_l.jpg"><img src="./PXL_20240615_041842223_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_045440024_l.jpg"><img src="./PXL_20240615_045440024_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_051907012_l.jpg"><img src="./PXL_20240615_051907012_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_051911443_l.jpg"><img src="./PXL_20240615_051911443_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_053708718_l.jpg"><img src="./PXL_20240615_053708718_s.jpg"></a></p>
   <p>ここに説明を書く</p>
   <p><a href="./PXL_20240615_062805872_l.jpg"><img src="./PXL_20240615_062805872_s.jpg"></a></p>
   

7. これを、画像と同じフォルダに置いた適当なHTMLにコピペして、「ここに説明を書く」となっているところに説明を書きます。

この手順で作ったページのサンプルがこちら。

ダウンロードとインストール

ここからダウンロードできます。

ImageShrinker_20240706.zip

適当なフォルダで展開して、ImageShrinker.exeを実行してください。

「誰が作ったかわからない謎の.exeファイル」なので、「WindowsによってPCが保護されました」の警告が出るかもしれません。警告が出るのはもっともなので、kmaebashi.comの管理者を全面的に信頼する場合に限り、「詳細情報」を押して「実行」してください。

内容物は以下の通りです。これらはImageShrinker.exeと同じフォルダに置いてください。ImageShrinker.exeをデスクトップ等に置きたければショートカットを作ってください。

• ImageShrinker.exe
  実行ファイルです。
• ImageShrinker.exe.config
  .NET Frameworkのアプリケーション構成ファイルです。今回特に使っていません。
• html_template.txt
  HTMLテンプレートがここに保存されています。
• settings.txt
  その他の設定値はここに保存されています。
• logs(フォルダ)
  ログフォルダです。何か異常が起きたら、ここを見たら有効な情報が出ているかもしれません。