ブログに掲載する画像を高画質でキレイに表示するコツとは？

ブログで写真・イラスト・テキスト・アニメーションなど画像ファイルを使う機会が多いものの、画像圧縮や適正サイズへ編集して「いざ！」と記事へ貼ると・・画像が粗くなってしまう経験ありますよね？

とことんユーザーファースト志向にとって悶々としてしまう問題の一つですよね。

こんにちは。WordPressテーマ研究家SHINです。

ブログで使用する画像形式（拡張子）は、主に「JPEG」「PNG」「GIF」の3パターンが多いと思いますが、この記事では「JPEG」「PNG」のみに特化して解説しています。

そこで掲載画像を作成するのに注意したいのは以下3点。

この3点すべてクリアし、1つでも誤ると画像が粗くなったり重くなったりする原因になります。

あきら

このくらい画像が荒くなってしまうのは仕方ないかな・・

かおり

キレイな画質のまま記事に掲載したい～！

って妥協したり困ったりしているなら、画像が粗くなる3つの原因をぜひチェックしてみてください。正しい知識と画像編集作業のコツをつかむだけで改善できます。

画像本来の素材を高画質で掲載していきましょう。

画像形式（拡張子）の特性を知っておこう

画像はアニメーションを除いて写真やイラスト、テキストなど形式が違うファイルがありますが、画像形式には保存する過程で非常に重要な「相性」があるので、まずここを知っておく必要があります。

JPEGに最適な画像形式

「JPEG」は、約1,677万色カラー色素で画像化できることと、圧縮率が非常に高いという大きく2つの特性がある反面、画像を編集するたびに「画質が劣化」していくという特徴もあります。

つまりJPEGは、カラー数を豊富に採用している「写真画像」を保存するのに適した拡張子です。まずは下のサンプル画像を見比べてみてください。

約50％画像容量を圧縮した画像を見比べても分からないレベルですよね。主にこの画像サイズレベルであれば、画像容量が半減しても大丈夫。

ではもう一つ見比べてみて下さい。

画像容量401KBに対して109KB（容量約69％減）しているものの違いが分かりますか？

目を凝らしてよ～く見ると、眉下あたりの肌のキメが少しぼやけてる程度でしか判別できないレベルと思います。つまり、写真画像は「JPEG形式でファイル保存」しましょう。

ちなみにテキスト画像をJPEG形式で保存して圧縮してしまうと・・画質が著しく劣化します。

画像容量を約3分の一まで圧縮したものの、明らかに画像に「ノイズ」があるのを確認できますよね。

またJPEGファイルは圧縮率が高いため、画像サイズが大きかったり大量の画像を使わない限り、あまり容量を気にすることもないところがメリット。

PNGに最適な画像形式

「PNG」は画像容量が大きい点、透過加工ができるというポイントと、何度編集しても画質が劣化しない「可逆性圧縮」という特性があります。

ですので、何度も画像編集を繰り返す場合やテキスト画像・ロゴ画像・イラスト画像は、保存のたびに劣化するJPEGと違ってPNG拡張子が最適です。

こちらもサンプルで原画と圧縮後を見てください。

PNG形式はJPEG形式と違って、もともと保存時のファイル容量が大きい。（JPEG画像とほぼサイズ変わらず184KBも大きくなる）

ただ圧縮すれば、JPEG画像ファイルと比較しても大きな差はなくなります。（JPEG圧縮後とファイルサイズは約27KB差のみ）

もう一つサンプル。先ほどのテキスト画像をPNGファイル形式で保存して、さらに圧縮したものがこちら。

先ほどJPEG形式で保存した画像と比較して、明らかに高画質というか「ノイズ」がなくキレイに保存されているのが分かると思います。

ちなみに未圧縮画像で「295KB」あった容量が、圧縮によって「43.3KB」（圧縮率85％）まで引き下げられますので、画像容量はサイズ・掲載枚数が多くなる以外は気にしないレベルで大丈夫。

SHIN

JPEG・PNGそれぞれの特性と、画像によって保存するファイル形式の基本知識の次は「画像編集」についてお話していきます。

掲載場所に合わせて画像を適正サイズに編集

画像を掲載する場所を決めたら、その掲載場所に画像サイズを合わせることも、画像を粗くさせない重要なポイントの一つ。

現代のWordPressテーマは、ほとんどレスポンシブ対応で表示してくれるので、画像サイズが記事の掲載サイズに収まらなくても勝手に適正なサイズに調整してくれますが、ここに落とし穴があります。

レスポンシブで縮小した画像は、本来のサイズを強制的に小さくしているので「画質が粗くなってしまう」わけです。掲載スペースより小さい画像サイズなら問題ないものの、大きいサイズになると粗くなります。

そこで、まず「掲載エリアを測る方法」から見ていきます。

画像を掲載スペースを測る方法

Google chromeブラウザの拡張機能で「Page Ruler」という便利なものがあります。

1カラム、2カラム、サイドバー、記事の横幅などあらゆる横幅・縦幅を計測できる非常に便利な拡張機能です。早速使い方を見ていきましょう。

step
1Googleウェブストアへアクセスし、ストア検索内へ「Page Ruler」と入力して検索します。

step
2表示された「Page Ruler」をChromeに追加すると、ブラウザのタブに「ものさし」のようなアイコンが追加されますので、さっそく開いてみます。

step
3画面に十字マークが出現するので、計測したい長さをマウスで地点同士繋ぎ合わせると、タブ下に計測値が表示されます。また「px数値」なので、画像サイズにそのまま当て込めます。

SHIN

このツールさえあれば、掲載表示する横幅や縦幅もサクッと計測できるので、画像サイズを編集するのに非常に便利！ぜひ活用してください。

次は、掲載エリアに合わせた画像編集です。

ペイントソフトを使って画像サイズを編集

ここでは、一番使いやすいOSのWindowsにデフォルトでインストールされている「ペイント」を使って、画像サイズを編集する方法を簡単に解説していきます。

step
1Windowsのスタートアイコンを開き、プログラムとファイル検索内へ「ペイント」と入力すると、ペイントソフトが表示されるので、このアイコンを開きます。

step
2編集する画像を貼り付けやドラッグで入れたら、選択から画像を切り取る部分を選択すると、下へ切り取った画像サイズが表示されるので、この数値を確認しながら適正なサイズに変更できます。

SHIN

画像編集ソフトで適正な画像サイズに編集するなら、一番手軽で簡単なペイントはおすすめです。

次は最後の仕上げ「圧縮」をしていきます。

画像圧縮ツールで高画質かつ軽量化

ここまでファイル形式に合う拡張子で画像を保存して、掲載場所エリアに合わせた画像サイズに編集まで行ないましたね。

仕上げは、画像を軽量化させるために「画像ファイルを圧縮」します。

ファイル形式「JPEG」「PNG」2種類の拡張子を、高画質を保ちながら圧縮率はトップクラス（僕の中では最強ですが）のツールは・・ズバリ"WEBSITE PLANET"です。

画像圧縮はこの無料ツール1つだけでOK。

この画像圧縮無料ツール「WEBSITE PLANET」は、基本的な使い方と圧倒的圧縮パフォーマンスをレビューにしていますので、ぜひこちらを参考に。

まとめ

ブログで掲載する画像を高画質で表示するコツの解説いかがでしたか？

もう一度おさらいしていきます。

ブログには「高画質画像」を掲載していきましょう。