テクニック WordPress カスタマイズ

画像を綺麗に表示させるには画像サイズが重要

2017/08/26

先日、テーマを変えたのでブログのフロントページも変えたのですが、そこでどうしても気になったのが画像の「ぼけ」です。

特にスマホだと画像がぼけるのは気になりますよね。
私は以前から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/4にしましょう。

カスタマイズと言うほどの事でもありませんが、知っているだけで画像を綺麗に表示させる事が出来ます。

尚、このブログのサイドバーにあるカテゴリの画像は、実サイズ1160×160ピクセルの画像を290×45ピクセルと1/4で表示しているので8Kにも対応しています(今のところ使う事ないですが)

-テクニック, WordPress, カスタマイズ

AGA 成長因子