サイトの画像ファイルを圧縮した
Git Clone の時間短縮を狙うため、このサイトの一部の画像ファイルを圧縮した。
元々はてなブログで運営していた時は、画像ははてなフォトライフにブチ込んでいて容量を気にすることがなかったのだが、XREA や GitHub Pages での運営に切り替ると、画像ファイルも Git 管理するようになり、重たいファイルが大量にあると Git Clone に時間がかかるのである。
1ファイルで数 MB あるモノもあったりしたので、以下の方針で画像を圧縮していくことにした。
- 画像のファイルサイズは 350KB までに留めることを目指す
- 後述のとおり、長辺のピクセルサイズが 920px・960px・1280px 程度の画像なら、大きくても 350KB 程度に収まる場合がほとんどだったので、おおよその目安とした
- リサイズ・トリミング・低画質化で対処する
- どうしてもファイルサイズが減らせない PNG 画像は JPG に変換してしまう
- 画像のピクセルサイズは長辺を 920px・960px・1280px 程度に調整する
- パノラマ写真とかなら別だが、1920px 以上のサイズは基本的に要らない
- 元々のファイルサイズが十分に小さければ、ピクセルサイズ調整はしていないファイルもある
- 画質は Photoshop の「高 : 8」(JPG) や「最小のファイルサイズ (最低速保存)」(PNG) をベースにする
- JPG の場合、ファイルサイズを減らしたい場合は 7 とか 6 とかいう中画質レベルに落とした場合もあった
このサイトの内容で、画質なんかそう必要ないんだよな。解像度もほどほどで良いし、古い記事は内容的にもあまりもう見返したくないモノもあったりするので (笑)、小さく小さく留めようと思った。
WSL で作業しているのだが、「大きな画像ファイル」を探す方法として、こんなコマンドを書いた。
$ find . -name '*.png' -or -name '*.jpg' -or -name '*.gif' | xargs identify -format '%i %B %w %h\n' 2>/dev/null | sort -rn -k 2 | head -n20
画像ファイルをリストアップし、ImageMagick の identify コマンドに食わせて、
%i: 画像ファイルパス%B: ファイルサイズ (バイト単位)%w: 画像の幅 px%h: 画像の高さ px\n: 改行
というフォーマットで出力。たまにワーニングが出るファイルがあるので 2>/dev/null でエラーは握り潰した。
sort -rn で、数値を見て降順ソート。-k 2 部分は参照する列の指定。前述の identify コマンドのフォーマットに従って、
-k 2なら%B→ ファイルサイズが大きい順-k 3なら%w→ 画像の幅 px が大きい順-k 4なら%h→ 画像の高さ px が大きい順
に出力できるので、調べたい内容に合わせて指定する。最後の head は、結果件数が多過ぎるのでテキトーにトップテンとかトップ20とかで絞り込む感じ。
作業前後でどのくらいファイルサイズが小さく出来たかなーというのを調べるために、Git の直前のコミットからファイルサイズを算出する方法を探した。
$ git ls-tree -rl HEAD | sort -rn -k 4 | head -n20
git ls-tree というコマンドがあった。-r を付けると、カレントディレクトリ配下を再帰的に検索してくれる。-l を付けるとファイルサイズ込みの長い形式で出力できる。コミットを指定するため HEAD と書いているが、もう一つ前のコミットが見たければ HEAD^ などとすれば良い。
あとはよしなに、ファイルサイズの降順 (大きい順) でソートしたければ sort コマンド、結果を絞り込みたければ head コマンドをパイプする感じ。
git ls-tree で直近のコミットのファイルサイズ一覧、find と identify で現在編集中のファイルサイズ一覧を出力できた。
結果的に Excel に結果を貼り付けて色々比較・分析したのだが、最初は diff コマンドで差分を見ようとして苦労していた。その中で、comm コマンドというモノを見付けた。2つのソート済みファイルの中から、「同一行」だけを抽出できるコマンドだった。
$ comm -1 -2 file-A.txt file-B.txt
結果的に、ビルド後のファイル群の全量でいくと 60MB 程度削減できた。このサイト全体の、ビルド後のファイルサイズ (gh-pages ブランチ内のファイルサイズ・.git/ などは除く純粋なサイトのアセット) は、現時点で 440MB 程度。…まぁこんなもんか。
20年近く運営してきたサイトで、ブログも色々書いてきたけど、全部で 440MB 程度なのかぁ。少なく感じるね。
$ find . -name '*.md' -or -name '*.html' | xargs wc -m
一方、こんな感じのコマンドでソースファイル側のページの文字数をカウントしてみたら、11,261,867文字と出た。ファイル数3,207個で、1,100万文字。HTML のテンプレート部分は除外しているものの、HTML ファイルはタグ、Markdown ファイルは強調構文やテーブル構文など、純粋な文章以外の文字列も含んでの算出となるが、逆にいえば、自分は少なくとも1,100万文字分くらいは、このサイトのためにタイプしてきたのか、と。削除したコンテンツもあるし、加筆修正や、試行錯誤した内容も含めればもっと書いてきたのだろう。
ファイルサイズで見ると「20年間・画像込みで 440MB？」と思うが、文字数で見れば「1,100万文字はタイプした」、「このサイトには3,207ページほどある」というのは、それなりの数字なのかなー。
「みんな自分のブログってどれくらい書いてる？」って質問して、こういう数字が出てくる人って、会社とか身近な人だと全然いないと思うので、思いの外少ない気もしているが、あまり過小評価し過ぎないようにしておこうかな。
ともかく、やりたかった画像圧縮は出来たのでおけおけ。
