ホームページを作るときいつもtinypngやらjpegminiやらで画像を最適化、圧縮してます。やってる人は多いと思います。

さすがに記事に入れ込む画像全部そうしてる人は少ないと思うけど、ホームページの基礎になる画像はちょっとでもホームページの表示速度を上げるためにやっぱ画像の最適化はやりますよね。

ただそろそろ毎回ブラウザ立ち上げて、画像アップロードして最適化してもらってダウンロードして…てのがメンドウになってきたんで自分のPC内で画像の最適化できるようにしてました。

ここでは画像をwindows10のローカル環境で最適化（圧縮・サイズ削減）するときにハマったポイントを書いておきます。

ドラッグ＆ペーストで画像処理するのは手軽だけど後々面倒。というかそれならブラウザでやるのと変わらない。ので、コマンドラインでパパっと処理するやり方になってます。

1. とりあえず知識
1. jpg用「mozjpeg」
2. png用「pngquant」
2. んで環境変数Path…
1. コントロールパネルのシステムから
2. フォルダパスを追加する！
3. パスが通ってるか確認するには
3. まとめ

とりあえず知識

とはいえまずはどうやってwindows10のローカル環境で画像圧縮すんの？てところをざっくりと。jpgとpngでそれぞれ違うんでまずは2つの形式別の圧縮ソフトをダウンロードします。

jpg用「mozjpeg」

jpg用の圧縮ソフトはmozjpegというやつ。もちろん無料。

インストールとか必要なくてダウンロードしたzipファイルを解凍するだけで使えるお手軽仕様です。

png用「pngquant」

png用の圧縮ソフトは「pngquant」。こっちももちろん無料。

またまた同じでこっちもインストール不要。zipファイル解凍でOK！

んで環境変数Path…

「mozjpeg」「pngquant」の使い方はそれぞれくわしく書かれてる記事があるんでそっちを参照。

やっぱりコマンドラインで何度も使うなら環境変数、というかパス通しておきたいですよね。してないとすごいメンドウ…。

んで最近はインストール時に勝手に環境変数に追加してくれるソフトが多いのか、実はwindows10に変えてから環境変数自分でいじったことなかったんですよね。はるか昔の記憶…。

コントロールパネルのシステムから

とりあえずパスの設定はコントロールパネルのシステム→システム詳細設定からいけます。

ユーザー側（上部）と全般側（下部）があるけどこれはどっちでもいいハズ。すでに設定されてる環境変数にミスがあったりして以降の設定がダメになる場合を気にするなら、全般側（下部）の方が順位で上にくるんでそっちに追加する方がいいです。

フォルダパスを追加する！

いやー完全に忘れ去ってた。環境変数てプログラムのexeファイル名を指定するんじゃないですね。

そのexeファイルがあるフォルダまでを追加する。

ここにハマってしまって何度も環境変数チェックのためにパソコン再起動する羽目に。2度目の勉強になりました。

パスが通ってるか確認するには

コマンドプロンプト（cmd）立ち上げてpathと打ってターン！すると今通ってるパスの一覧が出てくるんでそれでまず確認。

パソコンの設定によるのかもしれませんが、ぼくの環境だと一度パソコンを再起動しないと設定した環境変数は反映されてなかったです。コマンドプロンプトいったん閉じて開いても反映されず。…内部的にはキルされずにコマンドプロンプト生き残ってるんだろうか。

ま、とりあえずパソコンを再起動すれば確実に設定したパスが反映されます。

まとめ

windows10のローカル環境で画像をWEB向けに最適化する方法を書きました。

環境変数のパスを通すときにめちゃめちゃ苦戦しました。2時間くらいノロノロの再起動を何度も繰り返しそのたびにパスが通ってなくて「内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」が出る始末。

exeファイルがあるフォルダ（ディレクトリ）までをPathに追加する、もうそんなん知ってるよ！人が多いと思いますが、ぼくみたいに躓いたなら参考にしてみてください。

あとは設定したパスの順位を「上へ」を押して一番上にするのも解決にはいい方法、だと思います。

んで最終的にはバッチファイル適当に書いてフォルダ内の全画像をコマンド1行で最適化するとこまでできるんで、やってみてください。バッチのソースコーはそのうちのせたい。まだ人前に出すには不完全なもんで。