トップWordpress> pngquantで階層下のサムネイル画像のみ圧縮した話

pngquantで階層下のサムネイル画像のみ圧縮した話

Wordpress

151104

手順が複雑で忘れそうなので今回Wordpressのuploadフォルダの中身の中で、150x150サイズのサムネイルのみpngquantを使って画像圧縮したのでやったことのメモなど。階層下の奥のファイルを自動で辿って…とするのにコマンドプロンプトさっぱりな私には分からないことが多くネットの情報に助けられた。

この謎のオジサン(お兄さん)はこちらの会話に豊富な教養と知識でめちゃ喰いこんでくるという新しい参加型の給仕を見せてくれたお店の秘蔵っ子(店長さん?)で手に持ってるのは棒付きのチョコ(おいしかった)

画像圧縮に至った背景

これまでWPのサムネイルで無駄なサイズのサムネイル(デフォルトの大中小とテーマの規定するthumb100:100x100)が生成されまくってたので一括整理とせっかくなら画像圧縮で表示の高速化を図りたかった。

Lazy Loadプラグインを使っているのでそこまでサムネイルのファイル容量に気を使うこともないのだけど小さいことに越したことないので。

Compress PNG for WPで普段アップロードするファイルは自動圧縮しているのだけど、月のファイル数制限を気にしてサムネイルまでは圧縮対象にしてこなかった経緯あり。普段使用しているサムネイルサイズはstinger5なのでthumb150(150x150)だけど圧縮前35kb圧縮後13kbくらい違う。誤差かもしれないけど一覧ページなどチリも積もればというのとダイアルアップ時代の癖で30kb越えるファイルはなんか大きい気がしてしまうこの時代遅れな脳みそ…。

手順1:無駄なサムネイルの削除・下準備

まず始める前にバックアップを取っていることと念のためローカル環境である程度試してみてから本番にいった。要らないサムネイルを削除し新しい150サイズのサムネイルを作製するのが目的。これは簡単で、force regenerate thumbnailsというプラグインを使うのみ。

これを走らせる前の下準備として、メディア設定のデフォルトのサムネイルを大中小全て「0」にし生成されないようにする。のと、テーマのfunctions.phpで規定されているthumb100を削除。

今回新しく生成する150x150サイズのサムネイルは上部中央から切り抜きを行いたかったので以下のページを参考にしstinger5テーマファイルのfunctions.phpの該当部分を下記のように書き換え。

add_image_size('thumb150',150,150,array('center','top'));

参考WordPress 画像をCropで中心以外のでのトリミングの方向を指定する | 9ineBB

神すぎる…WP開設からずっとしたかったことがいとも簡単に出来た。というのも、四コマ漫画のサムネイルは中央切り抜きされると微妙にオチ付近がクロップされるのと中央に枠線が入ってしまい視認性が悪く。以下、例。

中央切り抜き:8db0d1267ded326165ad553afff21ade-150x150上部中央切り抜き:8db0d1267ded326165ad553afff21ade-150x150

この枠線問題に悩まされていたので本当に助かった。感謝。

手順2:無駄なサムネイルの削除

生成されるサムネイルをthumb150のみの設定にした状態でforce regenerate thumbnailsを施行。今まで中途半端に生成されていた300pxだとか480pxだとかのサムネイルが自動で削除され、上部・中央から切り抜きされた新しいthumb150が生成されていく。

ファイル数が775イメージ(×サムネイル分)あったのと、途中で生成速度が0.6秒台から6秒台に伸びた影響あり20分ほどかかる。ファイル数400に達したあたりで急に伸びたのはサーバーのせい?スピード落ちたので焦ったら途中の空ファイル(0kbの画像ファイル)連続したあたりでまた速度が復活し(一時的に負荷が減ったせい?)さっぱりわからないままひとまず無事生成終了。

ファイル数が3000から1500に減り、容量は105Mbから52Mbへ(約半分)。

手順3:ローカルでpngquantを走らせ画像圧縮

これまた初めてのことで色々テストなどしてからの本番。やりたいことは以下。

  • uploadフォルダ配下のpng画像のうち、150x150サイズのサムネイルのみを画像圧縮
  • 圧縮した画像のみFTPソフトでアップロード(⇒手順4)

pngquantはCUIのため黒画面(コマンドプロンプト)で操作。IPアドレス調べる以外に使ったことないのでさっぱりわからず。色々調べてこのページを参考に辿りついたのがこちら。

for /r C:\test.com\img %p in (*150x150.png) do pngquant --ext .png --force %p

参考コマンドプロンプトで、サブディレクトリも参照するパスの書き方ってありますか?(14982)|teratail

通りすがりの神に助けられ無事圧縮。

サムネイルサイズしか圧縮してないこともあり容量変化としては52Mbから43Mbで10Mbほど。

圧縮した150サイズのサムネイルのみアップロード

フォルダの中身は画像ファイルと150サイズの切り抜きサムネイルが混在した状態。画像圧縮用に用意したフォルダにコピペした関係もあり作成日時が現在時刻になってしまったので「新しければ上書き」が使えず「サイズが異なる場合は上書き」を選びuploadフォルダごとアップロード。

余談その1:FFFTPはファイル数が増えると切断が多く全く上手く使えなかったのでFileZillaというFTPソフトを使用。

余談その2:すでにCompress png for WPで圧縮された元ファイルをpngquantで圧縮すると平均して2kbほどファイルサイズが増えてしまったのでサムネイルのみ圧縮するに至った。tinyPNGの中身と同じはずなのにこちらのほうが優秀ということ…??

余談その3:これまでに生成された300pxサイズやその他中サイズのサムネイルも微妙に使っていたので削除をする前に元ファイルへのリンクへ変更する作業あり。うまく自動化する術を思いつかなかったので地道に検索して手直し…さほど数はなく助かった。

今後のこと

サムネイルの整理と圧縮が出来たので今後はthumb150も圧縮対象に入れつつ(プラグインのメディア設定で出来る)不要サムネイルは作成しない方向で。thumb100って何に使ってたのか不明。stinger3時代の名残り?今回圧縮したのでthumb150の方がthumb100よりも軽いという事態に。pngquantありがとう。

冗長で読みにくい記事になってしまった…fc2もテンプレートの仕様が独特でいじるの疲れるからWordpressにするべきなんだろうけど…余力なし。今回の事の顛末は以上。9ineBBの中の人には本当に感謝…私もWPの中身読めるようになりたい。やりたいことをサクッとやれる凄さ…。

L’Osier|ロオジエ 銀座のレストラン

結局ロジェなのかロージェなのかわからなかったなあ。地下鉄の出口探してたらなんとなく暗黒班会議時代など思い出しトラウマ的にブルーになったりした都内散策であった。

トリュフがフリカケレベルの使用感で凄かったのと皆しっかり開業医してたのと個室のプライベート感、あと秘蔵っ子の食い込み感が印象に残った会だった。あと痩せようと思った。もっと気兼ねなく長くお出かけしたい…

関連記事