ノウハウ ブログ運営

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

alt=ブログ 画像 高画質表示

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

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

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

 

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

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

画像が粗くなる原因

  • 3つの画像形式(拡張子)には特性があり、画像種類によって相性がある。
  • 画像を掲載するスペースに合わせた適正サイズに編集する必要がある。
  • 画像圧縮方法を間違えると、本来の画像素材を大きく損なう。

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

 

あきら
このくらい画像が荒くなってしまうのは仕方ないかな・・
かおり
キレイな画質のまま記事に掲載したい~!

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

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

 

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

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

 

JPEGに最適な画像形式

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

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

JPEG形式 画像サイズ640×400 容量77.1KB ※未圧縮
alt=jpeg 未圧縮

JPEG形式 画像サイズ640×400 容量38.3KB ※圧縮済
alt=jpeg 圧縮

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

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

 

画像サイズ1280×1280 容量401KB ※未圧縮

alt=jpeg 未圧縮2

画像サイズ1280×1280 容量109KB ※圧縮済

alt=jpeg 圧縮2

画像容量401KBに対して109KB(容量約69%減)しているものの違いが分かりますか?

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

 

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

画像サイズ983×449 容量121KB ※未圧縮
alt=テキスト JPEG圧縮

画像サイズ983×449 容量40.7KB ※圧縮済
alt=テキスト JPEG圧縮

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

 

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

JPEGファイルの特徴まとめ

  • 約1,677万色カラー色素で画像化できる。
  • 圧縮率が非常に高い。
  • 画像編集するたびに画質が劣化する。
  • 写真画像は「JPEGファイル」で保存する。

 

PNGに最適な画像形式

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

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

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

PNG形式 画像サイズ640×543 容量261KB ※未圧縮
alt=PNG 未圧縮

PNG形式 画像サイズ640×543 容量65KB ※圧縮済
alt=PNG 圧縮

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

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

 

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

PNG形式 画像サイズ981×439 容量295KB ※未圧縮
alt=テキスト PNG未圧縮

PNG形式 画像サイズ981×439 容量43.3KB ※圧縮済
alt=テキスト PNG圧縮

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

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

 

PNGファイルの特徴まとめ

  • 画像保存時はJPEGより容量が大きい。
  • 透過素材が多く、透過加工もできる。
  • 何度編集しても画質が劣化しない「可逆性圧縮」
  • イラストやテキスト画像は「PNGファイル」で保存する。
SHIN
JPEG・PNGそれぞれの特性と、画像によって保存するファイル形式の基本知識の次は「画像編集」についてお話していきます。

 

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

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

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

 

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

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

 

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

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

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

 

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

alt=Googleウェブストア

 

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

alt=Page Ruler

 

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

alt=Page Ruler1

 

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

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

 

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

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

 

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

alt=Windows ペイント

 

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

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

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

 

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

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

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

作業手順の注意

画像ファイルを先に圧縮してから編集すると、画像は圧縮前の容量に戻ってしまうので、編集を先にしてから最終作業で圧縮するようにしてください。

 

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

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

 

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

JPEG、PNG画像を圧縮して最適化するツールは「Optimizilla」一択【最強説】
JPEG・PNG画像を圧縮率最大にする無料ツール「Website Planet」

こんにちは。WordPressテーマ研究家SHINです。 ブログなどWebサイトを運営していると、必ず使うのが「画像」です。この画像、圧縮せずに記事などにそのまま使ってしまうと・・とんでもなく表示速度 ...

続きを見る

 

まとめ

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

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

 

ファイル形式に合う画像保存

  • 写真画像・・・JPEG拡張子で保存。
  • イラスト・テキスト画像・・・PNG拡張子で保存。

掲載エリア合わせて画像編集

  • 掲載エリア幅を超えるサイズは、自動で縮小されるため画質が粗くなる原因になる。
  • 掲載エリアを測るには、Google chromeブラウザ拡張機能「Page Ruler」がおすすめ。

画像の最終仕上げは圧縮

  • 圧縮処理は、画像編集の後に行なう。(画像編集前では無意味)
  • JPEG・PNG画像を圧縮するツールは「WEBSITE PLANET」が最強!

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

  • この記事を書いた人
  • 最新記事
しん

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-ノウハウ, ブログ運営
-