ブログで使う画像の画質が悪い原因【画像フォーマットの性質を理解すれば解決!】

チャオ(・∀・)♪

 

ブログで使う画像の画質が悪い。なぜ画質が落ちてしまうのか?

 

こんな疑問を持ったことはないですか?

 

この疑問を解決する鍵は、画像の拡張子(フォーマット)についての基本的な知識にあります。

 

用途に合わせた最適な拡張子で画像を保存することで、あなたのブログの画像は以前より見違えること間違いなし。

 

この記事を読んで手に入るスキル用途に合わせた最適な拡張子で画像を扱えるようになれる

 

 

写真なら.JPG(.JPEG)を選ぼう

 

.JPG(.JPEG)の最大のメリットは、なんと言っても「色数が多い」こと。

 

約1670万色を表現できるので、輪郭がくっきりしていない画像や連続して色が変化する画像(写真など)に強いです。そのような画像に関しては、後述の「.PNG」や「.GIF」よりもファイルサイズを小さくでき、かつ綺麗に表現できます。スマホで撮影した写真がJPGで保存されるのも納得ですね。

 

反対に、色数の少ない画像には向いていないです。例えば、文字や図形などが含まれている画像ですね。それらの画像をJPG形式で保存すると、文字や図形の輪郭がジャギってしまい、見た目が少し悪くなってしまいます。

 

また非可逆圧縮なため、圧縮や上書き保存する度に画質が劣化してしまうという短所も持っています。背景透過もできないので、編集にはすこぶる向いていないファイル形式だと言えますね。

 

結論.JPG(.JPEG)は色数の多い写真専用のフォーマットと言ってもいいレベル。非可逆圧縮だし背景透過もできないしで、画像の編集には向いていない。

 

 

文字や図形の画像なら.PNGを選ぼう

 

JPGが約1670万色という圧倒的な色数を表現できるのに対し、PNGはたった256色しか表現できないので色数が多くなりがちな写真には向いていません。というか、逆にJPGよりファイルサイズが大きくなってしまうという始末。

 

PNGは、輪郭がくっきりしている文字や図形などが含まれる画像や、色変化が少ない画像に適したファイル形式です。

 

また可逆圧縮なので、圧縮や上書き保存の度に画質が劣化することはありません。背景透過にも対応しているので、画像の編集に向いているファイル形式だと言えます。

 

結論PNGは文字や図形などの輪郭がくっきりしている画像に適している。圧縮や上書き保存によって画質が劣化することなく、背景透過もできるので、画像の編集に強い。色数の多い写真には使わない方が身のため。

 

 

ファイルサイズを極限まで小さくしたいなら.GIFを選ぼう

 

GIFもPNG同様、表現できる色数は256色とヤル気が感じられない仕様なので、色鮮やかな写真の保存には適していないファイル形式です。その代わりファイルサイズが小さく、可逆圧縮で背景透過にも対応しているので、使い勝手は.PNGとかなり近いです。

 

GIFと言えばやはり、アニメーション表示できるという点が一番の長所でしょう。

 

 

.PNGと同じ色数で表現しますが、グラデーションの表現はPNGと比べると劣るという点からも、GIFの存在価値はGIFアニメにあると言えます。

 

GIFアニメの作成方法についてはGIFの作成&圧縮にオススメの無料ツールの記事にて解説しているので、良かったら読んでみてください。

 

結論PNGとほぼ同じ使い方ができるが、グラデーションの表現はPNGの方が勝るので、GIFはアニメーションを表現したい時に使うのがおすすめ。

 

 

PNG、GIF、JPGそれぞれのメリットを兼ね備えた最強形式「WebP」

 

WebP(ウェッピー)とは、あのGoogle社が開発したWebに対応している次世代の画像ファイル形式です。

 

PNG、GIF、JPGそれぞれの短所を排除し、長所だけを取り込んだ正に最強の画像ファイル形式です。

 

  • ファイルサイズの圧縮率が高い
  • 可逆圧縮と非可逆圧縮を選択して保存可能
  • 背景透過に対応
  • アニメーションが作成可能

 

ファイル形式としてはどこを取っても申し分ない性能なのですが、「主要ブラウザであるiOS Safariに対応していない」という大きな課題がありました。しかしそれは過去の話で、iOS14のアップデートによってようやくSafariがWebPに対応するようになりました。

 

今後はWebPでの画像配信が標準となる流れなので、サイトで使う画像フォーマットは全てWebPとしたいところです。

 

画像圧縮プラグイン「EWWW Image Optimizern」では、WebPに対応しているブラウザには自動的にWebP画像で配信するという便利な機能を搭載しています。EWWW Image Optimizernの設定方法や機能解説について書いた記事があるので、そちらも参考にしてみてくださいね。

 

EWWW Image Optimizernの設定方法&機能解説【ver.6.0.3】

 

 

まとめ

 

基本的な画像のフォーマット(拡張子)の性質を理解して、適切に使い分けできると色々捗ります。何でもかんでもJPGで保存するのは、今日が最後です。…反省します。

 

それでは、ここまで読んでいただきありがとうございました。

チャオ(・∀・)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です