放置していたツケ。前々からずっと気になっていたんですが、記事一覧のサムネイル、なんとなく輪郭がぼんやりしてるというか、ちょっとピントが甘いような見え方をしていました。「まあこんなものかな」で流していたんですが、さすがに気になって腰を据えて調べてみることにしました。
メディア設定を変えても、何も変わらない
最初の一手は空振りでした。WordPressの「メディア設定」を開くと、画像サイズの「中サイズ」の幅がデフォルトの300pxのままになっていました。記事一覧のサムネイルはこの中サイズを使っているので、まずはここを600pxまで上げてみることにしました。数値を変更して保存、記事一覧を開き直して確認……したんですが、見た目は1ミリも変わりませんでした。
一通り手は尽くしました。まさに手詰まり。キャッシュを疑って強制リロードしたり、設定が本当に保存されているかコマンドラインから直接確認したり(ちゃんと600になっていました)、一通り試したものの状況は変わらず。数値上は正しく変更されているのに、表示に反映されないという、地味に厄介な状態でした。ブラウザ側の表示崩れなら見た目からある程度あたりがつけられるんですが、今回は「数値は合っている、でも結果が変わらない」というパターンだったので、どこから手をつければいいのか最初は見当がつきませんでした。
「新しい設定は、過去の画像には効かない」という仕様
仕様はシンプルでした。調べていくと、WordPressのメディア設定は「今後アップロードする画像」にしか適用されない、という当たり前といえば当たり前の仕様に行き当たりました。中サイズの生成自体は、画像をアップロードしたそのタイミングで一度だけ行われて、生成された画像ファイルがそのまま使い回されます。なので、後から設定の数値をいくら変えても、すでにアップロード済みの画像に対しては何も起こらない、というわけです。
盲点はここでした。言われてみれば当たり前なんですが、「設定を変えたら反映されるはず」という思い込みがあったので、原因に気づくまで地味に時間を溶かしました。既存の画像に新しいサイズを反映させるには、wp media regenerateコマンドで、登録済みの全メディアに対してサムネイル類を生成し直す必要がありました。実行してみると、記事一覧のサムネイルは確かにひと回りシャープな見た目に変わりました。
それでもまだ、ちょっとだけ甘い
まだ何かが引っかかりました。一件落着かと思いきや、以前よりはマシになったものの、まだうっすら甘さが残っているような気がしていました。気のせいかとも思ったんですが、念のためサーバー側の画像処理の仕組みを確認してみることにしました。
原因はサーバー側でした。WordPressは画像のリサイズ処理に、サーバーの環境に応じてImagickかGDのどちらかを使います。WordPress自身に「今どちらを使っているか」を聞く関数があったので、それを使って確認してみると、今借りているサーバーにはImagickの拡張が入っておらず、GDだけが使える状態でした。ImagickとGDはどちらも画像処理ライブラリなんですが、リサイズ時の補間アルゴリズムの質に差があって、一般的にGDの方がやや甘め(悪く言えばぼやけ気味)の結果になりやすいと言われています。今回の「なんとなくぼんやりして見える」という違和感は、この差が地味に効いていたようです。
予想外の展開でした。正直、ここまでは「設定値の話だろう」くらいに軽く考えていたので、まさかサーバー側の拡張の有無というインフラ寄りの話にたどり着くとは思っていませんでした。表面的には同じ「画像がぼやけている」という症状でも、掘り下げていくと原因のレイヤーが全然違う場所にある、というのを実感した瞬間でした。
サーバー側の制約は、割り切るしかない
ここは割り切りどころでした。潔く受け入れます。Imagickを使えるようにするにはサーバー側のPHP拡張のインストールが必要で、契約しているレンタルサーバーのプラン次第では自分でどうにかできる話ではありません。今回は「サーバーの制約としていったん受け入れる」ことにして、その代わり、アイキャッチ画像を作る段階であらかじめ十分な解像度で書き出しておくことで、リサイズ時の劣化がなるべく目立たないようにする方向で対応することにしました。全部を完璧に解決しようとせず、直せるところと、環境ごと受け入れるしかないところを切り分けるのも大事だなと思った出来事でした。
まとめ
原因は二段構え。サムネイルがぼやけて見える原因は、(1)メディア設定を変えても既存の画像には遡って反映されない、(2)サーバーがGD止まりでImagickほどのリサイズ品質は出ない、の2段構えでした。1つ目はwp media regenerateで解決できましたが、2つ目はサーバー環境の制約なので、素材側の解像度で工夫してカバーする形に落ち着いています。
教訓はシンプルです。今回に限らず、「設定を変えたのに反映されない」系の不具合は、だいたい原因が2つ以上重なっていることが多い気がしています。1つ直して満足せず、それでもまだ違和感が残るなら、その違和感を無視しないで最後まで追いかけてみる。地味ですが、そのひと手間があるかどうかで、仕上がりの納得感はけっこう変わってくるなと思いました。
この記事が参考になったら、応援クリックをお願いします
