こんばんは！いぐあいんです。
ブログ始めてから9日目になりました。アップした記事はこれまでに４本で、今回の記事で5本目になります。
今回の記事では、記事に挿入する画像を綺麗にする方法を紹介します。
ここで言う「綺麗さ」とは、綺麗な風景画像とかそういう話ではなく、高画質であることを指します。
当たり前の内容かもしれませんが、記事にアップする画像がどうもぼやけていて綺麗でないと感じていて、ブログ初心者の私が色々と調べた内容なので、同じようなブログ始めて間もない方に役立てたら幸いです。
目次
高画質の画像を記事に挿入するポイント
高画質の画像挿入に必要なポイントを以下の３つです。
- 画像サイズ（画素数）の大きい画像を準備する
- 準備する画像の画像サイズが、WordPressの記事の横幅より小さい場合、画像編集ソフトなどを使って画像サイズを記事の横幅と同じになるようにリサイズする
- 画像をWordPressに挿入後、適切な画像サイズに設定する
各ポイントの詳細を詳細に解説していきます。
画像サイズ（画素数）の大きい画像を準備する
デジタルの世界では、画像サイズは縦横それぞれの画素数で表されます。
画像は突き詰めると小さな点（画素）の集合です。画像サイズとは、その画像が縦横それぞれ何個の画素から構成されているかで決まります。
画像サイズが大きいほど（つまりその画像が多くの画素から構成されているほど）、見た目はきめ細かになり、一般的に”高画質”と呼ばれる画像になります。
以下のサイトに画素数と画質の関係性がわかりやすく説明されているので、ここではその内容を引用させていただきます。
この通り、綺麗な画像をブログに挿入したければ、画像サイズが大きい画像を用意することが望ましいと言えます。
引用元：http://www.order-nobori.com/advertising_color_resolution.html
それでは、画像サイズが大きい画像はどうすれば用意できるでしょうか？
その答えは、デバイス（カメラやディスプレイ）の解像度を高い設定にすることで、画像サイズの大きい画像を取得することが出来ます。
例として、Windows10パソコンとスマホで、解像度を設定する画面を以下に示します。このようにデバイス設定で解像度を色々と変更可能です。
画質が悪いと感じる場合は、これらデバイス設定でより高い解像度が選べるか一度確認してみましょう。
但し近年においては、デバイス（ディスプレイ、カメラ）の技術進歩により、あまりデバイスの解像度を気にしなくても、画像サイズの大きい画像を当然のように取得できるので、問題になることはあまりないかと思います。
もし画像が不鮮明と感じる場合は、デバイス設定で画像サイズを小さくなっている可能性も考えられるので、カメラやディスプレイの設定見直しなどを行ってみましょう。
準備する画像の画像サイズが、WordPressの記事の横幅より小さい場合、画像編集ソフトなどを使って画像サイズを記事の横幅と同じになるようにリサイズする
長く難解な表題となってしまいましたが、どういう意味か解説していきますので、お付き合いください。
ここでは、以下の画像を記事に挿入するケースを考えます。
この画像は見ての通り、本記事の横幅よりも小さい画像です。
次に、この画像を記事の横幅と一致するまで拡大します。（見やすいように画像を大きく表示したい場合などにそのような操作をすることがあると思います）
画像サイズは、画像の端をクリックしてドラッグすると自由に縦横のサイズを変更できます。以下がWordPress上で画像サイズを拡大した状態です。
文字がぼやけたり、その周囲が若干滲んでいたりと、元に比べると画質の低さが目立つ画像となりました。
WordPress上の拡大処理では、画像を単純に縦横に引き伸ばしているため、元の画像に既にあった小さな粗さも拡大されて、このような結果になっています。
ここからは、この問題の対策方法を紹介します。
方法としては、WordPress上ではなく、画像編集ソフトで画像サイズの変更（リサイズ）処理を行います。
画像サイズを変更する点ではWordPress上での拡大とやっていることは同じですが、その拡大処理のやり方がWordPressと画像編集ソフトでは異なります。
WordPressでは単純に縦横に画像を拡大（引き伸ばす）するだけですが、画像処理に特化した画像編集ソフトでは、画像の粗さが目立たせない処理方式で拡大を行ってくれます。そのため、画像編集ソフトで事前に画像サイズをリサイズ（記事の横幅と同じサイズにする）した上で、記事に画像挿入すると少なからず綺麗な画像を挿入することができます。
以下が、画像編集ソフトでリサイズ後に挿入した画像です。記事の横幅と同じサイズにリサイズしているので、画像挿入すると最初からの以下の画像サイズとなっていて、WordPress上で拡大操作する必要はありません。
上の画像と比べて頂くと、画質がだいぶ良くなっていることが見て取れると思います。
画像編集ソフトは有料/無料で無数にあるので、この記事では特に詳しく触れませんが、今回私が使用した画像編集ソフトは「WinShot」というものです。画像キャプチャ機能に優れたフリーのソフトなので、どのソフトを使うか迷っている方は試しに是非使ってみてください。
画面キャプチャ時に自動で画像サイズを指定のサイズにリサイズしてくれる機能があるので、キャプチャ後に画像編集ソフトをいちいち開いてリサイズするという手間が省けるので、個人的にはイチオシです。
画像をWordPressに挿入後、適切な画像サイズに設定する（クラシックモードのブロックから画像挿入する場合のみ）
上述した２つの方法で、高画質の画像を挿入できたら無事解決と思われるかもしれませんが、実は１つ落とし穴があります。
知っていれば誰でも回避できるしょーもない落とし穴ですが、知らないとなんで？となってしまうので、WordPressを使ったブログ初心者の方はこの記事を見て、華麗に落とし穴を回避して頂ければと思います。
（私はつい昨日までこの落とし穴に嵌っていました。お恥ずかしい。。）
尚、この落とし穴はクラシックモードのブロックから画像挿入する場合のみ発生するので、クラシックモードのブロックを使っていない人は無視して大丈夫す。
ここでは、先ほど説明に使った、画像編集ソフトでリサイズした画像を使います。この画像は記事の横幅に合うようにリサイズした画像であることを思い出してください。
そのため、本来であれば、この画像を記事に挿入すると最初から記事の横幅に合った状態で挿入されます。
それでは実際にそうなるか、画像挿入して確認してみましょう。すると以下のように挿入されてしまいました。
あれ？記事の横幅に合わせた画像を挿入したはずなのに、画像サイズが小さくなってしまいました。こうなると、何度挿入をやり直しても、また画像サイズの大きい画像を用意し直しても、挿入したタイミングで画像サイズが必ず小さくなって挿入されてしまいます。
そして仕方なくWordPress上で画像を拡大すると、、、前述の通り単純に拡大されて粗の目立つ画像となってしまいます。
それではここからこの問題の解決方法を解説していきます。
まずはじめに、記事に画像を挿入する際のWordPressの動作を知ってください。実は、画像挿入時にWordPressはオリジナルの画像サイズの他に、以下の画像サイズの画像を自動で生成しています。
- フルサイズ：オリジナルの画像サイズ
- 中：オリジナルよりも小さい（半分くらいの）画像サイズ
- サムネイル：サムネイル画像用の正方形かつ小さい画像サイズ
- 会話風アイコン：会話風ブロックのアイコン画像に使える正方形かつ小さい画像サイズ（サムネイルより更に小さい）
上記の画像サイズの内、フルサイズで画像が挿入されれば期待通りの記事の横幅に合った画像サイズで画像が挿入されます。
しかし、クラシックモードで画像を挿入する場合は、サムネイルの画像サイズで挿入するのがデフォルト動作になっているため、今回取り上げた問題が起きてしまうのです。
そのため、画像挿入後に画像サイズをフルサイズに選び直せばこの問題は解決します。
それでは、画像サイズを選び直す方法を以下では画像付きで説明します。
１．画像をクリックして、上部表示されるメニューから、「編集」ボタンをクリックする
２．「画像詳細」画面が表示されたら、「設定を表示」-「サイズ」の項目をクリック
３．「サイズ」項目のプルダウンから、「フルサイズ」をクリックする
４．「画像詳細」画面の右下に表示されている「更新」ボタンをクリックする
画像挿入後に画像サイズを選択する方法は以上です。記事の横幅にあった画像に無事なったでしょうか。
一度この操作をしておけば、それ以降に画像挿入する際は、デフォルトで「フルサイズ」が選択された状態になるので、毎回操作する必要はありません。
まとめ
綺麗な画像を記事に挿入する方法を３つ解説しました。
挿入した画像の画質に満足していない方はこの記事を参考にしてみてください。
- 画像サイズ（画素数）の大きい画像を準備する
- 準備する画像の画像サイズが、WordPressの記事の横幅より小さい場合、画像編集ソフトなどを使って画像サイズを記事の横幅と同じになるようにリサイズする
- 画像をWordPressに挿入後、適切な画像サイズに設定する
尚、今回の記事では画像サイズを大きくして画質を向上させる方法を紹介しましたが、実は画像サイズが大きすぎると、サイト表示に時間がかかる、画像データがサーバ容量を圧迫すると言った別のデメリットが発生します。
そのため、画像サイズの大きい画像を用意したら、それをそのまま挿入せずに、見た目に影響のない範囲で画像圧縮するなどの対策を別途する必要があったりします。
画像圧縮の仕方やお勧めの画像圧縮ソフトなどについては別記事で紹介したいと思います。
それでは今回の記事はここまでです。
ば～い！
