WordPressにアップした画像がぼやけるのを直す

2017/09/17

ちょっと前にWordPressでのブログ、サイトを書いていたことはあったのですが、レスポンシブルなんて無かった時代だったので、画像はデザイン的な大きさだけ気にしてPC表示しかなかったし、作っては貼るだけでした。

久しぶりにWordPressを触ってみて違和感を感じたのは「画像がぼける」という現象です。折角、見やすいように画像制作してみても元の画像よりすぐ見てわかる程度に画像がぼやけてしまいます。細かい線とか意味ある部分が確認できずに画像添付の意味が無い場合もありました。そこで原因と対策を調べてみました。

画像がぼやける原因を探る

WordPressにデフォルトのままの設定で記事を投稿していったら、どうも画像が不鮮明に少しぼやけてしまいます。Open Live Writerで投稿した記事をローカルに表示させて画像をsharpにして再度投稿できますが、当初の画像とはどうしても違う感じになってしまいます。シェードをかける設定になっているんだろうか?と思いましたが、そうでも無さそうな気がします。我慢しようかと思いましたが、やはり細かな部分の説明の際に細いラインが途切れ途切れになったり不便です。Open Live WriterかWordPressか、どっちの設定でこうなるんでしょうか?って悩みましたが、調べた結果、WordPressに原因があるようです。

WordPressでは画像を数種類自動作成する

デフォルトではWordPressに画像をアップロードすると、レスポンシブに対応しているせいなのか別に数種類違った大きさの画像を作るようです。その参照先が小さい方になってしまっているようです。引き延ばして表示されていることになるので画像がぼけてしまったというわけです。オリジナルより気のせいか小さく表示している時もぼける感じもあります。

表示幅、表示画像によって切り替えてくれるレスポンシブル対応WordPressも、その画像の必要な鮮明度については把握できなくて問題がある場合もあるようです。自動で画像サイズの違ういくつかの種類を作ってくれて、表示サイズによって自動で選択してくれて便利ですけど、その選択を間違うと引き延ばして(あるいは縮めて)ボケるということですか。

対策

 

Open Live Writerなどで画像投稿時に指定する

xserverwordpress250
例えば↑の画像が700ピクセルの画像ですけどアップロード時に「Original」として700ピクセルでアップロードしています。この画像投稿時にSmall、Medium、Large、Originalなのか指定できることと、テーマの表示横幅と元のOriginal画像の横幅がキーみたいです。あくまでも経験値です。

テーマの記事部分の横幅を把握して画像はそのサイズにできるだけ調節する

見やすさも考慮して画像の大きさを横幅の大きさ近くに一定させると、それほどボケません。いろんな大きさの画像をアップロードしていってぼやけない大きさを把握したら、その大きさに統一するのもいいかもしれません。テーマによって横幅は違ってどこが最適なサイズかは個々で違うでしょう。
cssを読み込んだり、制作者に尋ねても良いですが、ブラウザで目一杯大きく表示させてみてキャプチャー画像をとって、定規メモリのあるFireworks ccで読み込んで計測できます。
xserverwordpress249

私のテーマの横幅はおおよそ740pixです。

ラージサイズを数値記入してそれ以上の大きい画像をWordPressに作らせない

一番考えられるのは小さい画像をPC用に引き延ばされてしまうとぼけるので、一番大きな画像を表示するPC表示の場合としてあらかじめ必要十分な大きさのラージサイズ画像を作ってラージサイズとしてアップロードするか、記事幅より少しだけ小さめの画像を「Original」指定してOpen Live Writerでアップロードすると比較的ぼやけは小さくなります。Large、Originalとどちらが良いのか明確な答えはわかりませんが、PC横幅最大値に合わせたOriginal画像を「Original」として指定して投稿することかな?と今は判断しています。

オリジナル画像を表示指定する

私の環境では、わりとマシな画像にする方法として「オリジナル」として画像をアップロードすることです。PC横幅の最大値近い数値の画像を制作してアップするとこちらを表示してくれる感じです。スマホで見ても画像縮小してそれほど不鮮明にはなっていません。

記事をアップロードしたらそこの画像表示を確認する、ぼけていたら指定を変える

これはあたり前ですけどね。テーマを変えたりカスタマイズして幅を変更したら要注意です。

テーマによって、あるいはカスタマイズしたときにはその表示幅によってどの画像を選んでいるのかで変わってくるようです。できるだけ最適な幅の画像をアップロードしたほうが良いでしょう。かなり小さいアイコンのような画像については引き延ばされることなくそこまでぼけた画像になることはあまり無いようです。まだWordPressテーマのCSSカスタマイズまでは行っていないし、横幅を変更した画像をアップしてみて研究調査とかまでは行っていないのですが、形が整ってきたら調べてみたいと思います。

Posted by クチコミ探し