先日、テーマを変えたのでブログのフロントページも変えたのですが、そこでどうしても気になったのが画像の「ぼけ」です。
特にスマホだと画像がぼけるのは気になりますよね。
私は以前から4Kに対応した素材サイトもやっているので、特に気になるのですが…
そこで、簡単なその対策方法をご紹介します。
これはプラグインがなくても出来る方法なので、初心者の方にもお勧めです。
まず、画像を準備する際は、表示させたい画像の倍のサイズを用意して下さい。
倍のサイズとは、縦横が2倍という意味です。
横500ピクセル×縦250ピクセルの画像を載せたいなら、その倍の1000×500ピクセルのサイズが必要です。
今回はこちらの画像でやってみます。
この画像をアップロードしたら、画像の編集で画像サイズを半分にします。
フルサイズ1000×500ピクセルなので、半分の500×250ピクセルにします。
幅か高さのどちらかを変えると、自動的にもう片方も変わります。
ここで重要なのはきっちり半分のサイズにする事です。
最後に右下の「更新」をクリックすればOKです。
実際に見てみると、上が500×250ピクセルの画像、下が1000×500ピクセルを500×250ピクセルにしたものです。
※500×250ピクセル
※1000×500ピクセルを500×250ピクセルで表示させたもの。
パソコンで見るとあまり変わらないかもしれませんが、スマホ等で見ると違うかと思います。
特に文字や真ん中のWordPressのロゴのふちなどがわかりやすいですね。
この様に、プラグインを使わなくても綺麗な画像を表示する事がWordPressでは出来ます。
ポイントは画像サイズをきっちり半分にする、です。
同じ様に、1/4でもいいですね。
（例）1000×500ピクセルの画像を250×125ピクセルで表示する等
例えば4K化するプラグイン「 WP Retina 2x」は自動的にこの作業をやってくれますが、それでも1/2、1/4にしないとぼけます（実証済み）
倍以上のサイズなら大丈夫！と言う人もいますが、検証しましたが1/3とかだとキレイに表示しません。
また、おおよそ2倍…とか言うのもイマイチでした。
綺麗な画像を表示させたい時は、半分か1/4にしましょう。
カスタマイズと言うほどの事でもありませんが、知っているだけで画像を綺麗に表示させる事が出来ます。
尚、このブログのサイドバーにあるカテゴリのグレーの画像は、実サイズ1160×160ピクセルの画像を290×45ピクセルと1/4で表示しているので8Kにも対応しています（今のところ使う事ないですが）
今後は4K化8K化が進むと思われます。
後になって画像を差し替えるとなると結構面倒なものです。
最初からやっておけば苦にはならないので、画像に拘りたい人にはお勧めです。
ワードプレスに困っていませんか？
初心者向けのワードプレス講座開講中！
