WordPressについての備忘録。
ブログ記事に画像を掲載した際に、画像自体に問題がなくてもぼやけてしまうことがあります。これが気になって色々試してみたところ、（少なくとも僕の環境では）次のようなことが分かりました。
- 記事本文横幅より長い画像は（理屈の上で）どうやってもぼやけざるを得ない
- ぼやけを完全になくしたければ、横幅以下のサイズでもぼやけていない画像を載せるしかない
- 写真は縮小してもそこまで問題ないが、文字はぼやけが目立つ
結論としては、記事本文幅より大きな画像を、見え方を全く変えずに表示する方法はないと判断しました（当然といえば当然ではあるのですが）。
もしぼやけさせたくないなら、記事本文幅より小さく、なおかつぼやけていない画像を用意する必要があります。それでもぼやけたらプラグインやCSSのせいだと思いますが、それはこの記事で扱う問題とは論旨がそれるので触れません。
以下の環境も論旨と直接関係ありませんが一応↓
- WordPress 6.4.3
- SANGO 3.8.7
- 画像圧縮プラグイン TinyPNG
- 記事本文の横幅 715px
2024年3月現在、当ブログの記事本文横幅は715pxです。すると、横幅716px以上の画像をそのまま載せると、理屈の上では多少は本来より小さく表示され、情報量は減ります。僕が気になった画像のぼやけ問題の本質はここにあると考えています。
例えば、10MB分のデータと全く同じものを、5MB分のデータで表すというのは理屈上不可能です。それと同じで、画像を圧縮しようがしまいが、WPのメディア設定で大中小フルサイズの使い分けをしようが、横幅以上の画像を載せたら当然見え方は変わるわけです。
具体的な例を２つほど考えてみます。
1920*1080の一般的なPC用モニターで閲覧している場合を考えます。（スマホの場合は解像度もサイドバーの有無も違うので注意）
こちらが横1280pxの写真をフルサイズでそのまま載せたものです。クリックするとオリジナル画像が表示されます。
記事本文幅は715pxなので、1280pxの画像をフルサイズで載せても、表示する際にはブラウザ上で強制的に715pxに縮小されます。
ここで重要なのは、本来の大きさから小さくなったとしても、こういった写真であれば見え方に大きな違いはないということです。
確かに画像が小さくなるとディテールは感じづらくなるものの、例えばこの写真であれば「kindleと箱がある」ということは分かりますし、実際これ書いている僕自身が「この画像はこういう見え方で問題ない」と思えています。
一方で、テキストが主体となる画像だと見え方はかなり違ってきます。
まずこちらが、とあるソフトの画面をそのままキャプチャしたもので、幅は1066pxあります。記事内には同じくフルサイズで掲載しています。クリックすると元のサイズで開けます。
次に、上記の画像を700pxに縮小してからWPにアップロードし、フルサイズで掲載したものがこちら。
いずれにせよ記事本文幅715pxに収まるようにブログ表示段階で縮小されるので、情報量は減ります。その結果、テキストが明らかにつぶれてしまいました。
アップロード前に小さくしても、記事表示時に小さくなっても、結局テキストがつぶれて見づらくなるのは変わりありません。先ほどのkindleの写真であれば小さくなっても問題なかったにも関わらず、テキスト主体の画像となると大きな違和感が出てきます。
ちなみに、1066pxの画像は、見た目はつぶれていてもクリックして画像を開けばもとのきれいな状態で見られます。一方、最初から700pxに縮小した画像はそれ以上大きくしようがないので、クリックしてもつぶれたままです。これは大きな違いです。
ここで、最初の画像の一部を切り取り、幅595pxの新しい画像を作ってみます。
これはあくまでオリジナルをそのまま切り取ったものです。それを記事本文幅より小さい画像として載せているので、これならテキストがつぶれません。
ブログ画像の掲載の仕方にも流派があると思いますが、僕としては次のようにするのがいいのではと判断しました。
（記事本文幅715pxを前提として）
- アップロード時にぼやけていない状態で、なおかつ圧縮プラグインで明らかに劣化させないのは大前提。
- モノが主体となる写真は本文幅より大きくてもフルサイズでそのまま載せてよい。ただ大きすぎても容量を食うだけなので、写真・カメラブログとかでないならせいぜい800~1000pxほどに縮小したものをWPにアップロードするので十分と思う。
僕の場合は、よほど特殊な写真を除いては長辺800pxにしたものをアップロードして、フルサイズでそのまま掲載している。 - テキストがある程度意味を持つ画像の場合、テキストを全く潰したくないなら、記事本文幅より小さい画像をにする必要がある。必要な箇所だけ切り取るとか。
一応クリックさえすれば原寸大で表示は出来るので、記事本文幅を超える画像をアップすることに意味がないわけではない。
この手の問題を当初は記事本文幅をCSSで変えるというのも浮かびました。ただブログの記事幅といっても長く出来てせいぜい800pxとかで、それ以上長くするとけっこう特殊なサイトみたいな印象を与えます。なので、僕が求めるブログ状態という点で考えると、問題の本質はそこではないなと思いました。
また、スマホで見ると話はけっこう変わってきます。スマホの横幅は大体1080px以上あるはずです。さらに、当ブログをスマホで開くとサイドバーがなくなるので、横幅は1000pxくらい使えることになります。すると、幅1000pxくらいのテキスト主体の大きな画像も一応劣化なしで表示できることにはなります（ただし画面自体が物理的に小さいので、文字が小さすぎて見づらくはある）。ただ僕のブログはPCで作業することが前提のノウハウやその備忘録がけっこう多いので、そういう記事がスマホできれいに見えてもあんまり意味はありません。
ブログのメディアの扱いに正解も不正解もありませんが、今のところ個人的にはこういう方法が一応の落とし所かなと考えています。
