せっかく良い記事なのに画像がぼやけている…という残念なブログに会うことがあります。
あなたのブログがそうならないために、WordPress 初心者さんでも最低限しておいた方が良い画像の処理の仕方についてまとめました。
それでは早速、ファイル形式の違いから説明していきましょう。
ファイル形式って何？
画像の保存方法はいくつかあるのですが、ここでは代表的な３つの方法についてご紹介します。それぞれの特性を踏まえた上で、最適な保存方法を選択できるようになりましょう。
GIF
最大 8 bit（256色）まで使用可能。イラストやアイコンなど輪郭のはっきりした画像やアニメーション向き。
JPEG
24 bit（1677万色）まで扱うことができる。グラデーションのように色調が連続して変化する画像に適しているので、写真を保存するのにお勧め。PNGのように容量が膨大になることはない。
PNG
グラフィック、文字を多く含む画像、ロゴなど、写真以外を保存するのにオススメ！！
デメリットは、高画質のためファイルの容量が大きくなってしまうこと。メリットは、くっきりしたラインの文字などを扱いやすく、拡大しても質が落ちない。透過画像も使用できること。
8 bit か 24 bit を選択できる場合は、24 bit で保存することをお勧めします。
[su_note note_color=”#f7fafa”]
- PNG-8・・・GIF と同じ256色を扱うことができる
- PNG-24・・・JPEG と同じフルカラー1677万色を扱うことができる
[/su_note]
素材をダウンロードする時は、大きめのサイズで！！
画像を拡大して使用すると、画質は確実に劣化してしまいます。
素材サイトを利用する場合は、大きめのサイズでダウンロードするようにしましょう。（ Retina対応は２倍の幅が必要です。）
ブログに掲載するときは、適切なサイズに縮小してから使用するようにします。
ただし、キャプチャー画像を縮小してはいけません！！ わずかでも縮小するとラインがぼやけてしまうからです。
キャプチャー画像の場合は、縮小せずに使用するようにしましょう。
適切なサイズに変更しよう
大きめのサイズでダウンロードした画像をそのまま使用すると、容量が大きすぎて読み込み速度が遅くなってしまい、Googleなどの検索順位にも悪影響を及ぼします。
ここでは、画像のサイズを小さくする方法、解像度を下げる方法について説明します。
1. サイズを小さくする
使用したい箇所に合わせたサイズに縮小しましょう。その際、縦横比は変更しないようにして下さい。
下記のサイトを参考に、小さくしてみましょう。
[su_box title=”参考サイト：shutterstok” box_color=”#f7fafa” title_color=”#000000″]
[/su_box]
WordPress に掲載するのに最適な画像サイズとは、ブログの横幅になります。
このブログで使用している MAG のアイキャッチ画像の横幅は 790px、記事内に挿入する画像の横幅は 690px です。
クリックで拡大表示させたい画像は、大きいサイズのままアップロードします。
画像のサイズはテーマによって異なります。今後テーマを変更する可能性があるのなら、少し大きめのサイズにしておくと良いかもしれません。
2. 解像度を下げる
私も愛用しているパンダのキャラクターがかわいい TinyPNG がお勧めです。
無料で使用でき、PNG 形式や JPG 形式で保存した画像の解像度を簡単に下げることができます。
使い方については、こちらの記事で詳しく解説しています。
[clink url=”http://integritydesign.jp/tinypng/”]
Photoshop をお持ちでしたら『web 用に保存』を選べば、画像サイズから解像度まで一気に変更できますね。
代替テキスト（ alt ）はとっても重要
代替テキストは、訪問者に直接見えるものではありませんが、検索エンジンにとっては重要な情報です。なぜなら、検索エンジンは画像を読み取ることができないからです。
また、音声ソフトを利用している視覚障害者の方にも、非常に大切な情報となります。
なんらかの障害で画像がうまく表示されない場合も、代替テキスト（ alt ）に文言を入力しておけば下の画像のように表示されます
SEO の観点からも、アクセシビリティの向上の為にも、代替テキスト（ alt ）は必ず入力するようにしましょう。
まとめ
こちらでは、初めて WordPress に触れる方でも、最低限しておいた方が良い画像の処理の仕方についてまとめました。
[su_note note_color=”#f7fafa”]
- ファイル形式の違いを理解して、画像に合った方法で保存する
- 画像は大きめのものを用意して、小さいサイズに加工する
（ Retina対応 は２倍の幅が必要） - 代替テキスト（ alt ）は必ず入力する
[/su_note]
少しでもあなたのブログ作りのお役に立てれば幸いです。