WordPressで最低限おさえておきたい画像処理について

せっかく良い記事なのに画像がぼやけている…という残念なブログを目にすることがあります。

あなたのブログがそうならないよう WordPress 初心者さんでも最低限おさえておきたい画像処理の方法についてまとめました。

ファイル形式って何？

まずは、画像を保存する際に最適なファイル形式を選択できるようになりましょう。

画像を保存する際に選ぶファイル形式はいくつかあるのですが、ここでは代表的な３つの形式をご紹介します。

1. GIF

最大 8 bit（256色）まで使用可能。イラストやアイコンなど輪郭のはっきりした画像やアニメーション向き。

2. JPEG

24 bit（1677万色）まで扱うことができる。グラデーションのように色調が連続して変化する画像に適しているので、写真を保存するのにお勧め。次に説明する「PNG」のように容量が膨大になることはない。

3. PNG

グラフィック、文字を多く含む画像、ロゴなど、写真以外を保存するのにオススメ！！

メリットは、くっきりしたラインの文字などを扱いやすく、拡大しても質が落ちない。透過画像も使用できること。デメリットは、高画質のためファイルの容量が大きくなってしまうこと。

PNG-8 か PNG-24 を選択できる場合は、PNG-24 で保存することをお勧めします。

素材をダウンロードする時は、大きめのサイズで！！

画像を拡大して使用すると、画質は確実に劣化します。

素材サイトを利用する際には、必要なサイズよりも大きめのサイズでダウンロードするようにしましょう。（ Retina対応には２倍の幅が必要です。）

ブログに掲載するときは、適切なサイズに縮小してから使用します。

ただし、キャプチャー画像を縮小してはいけません！ 少しでも縮小するとラインがぼやけてしまうからです。

適切なサイズに変更しよう

大きめのサイズでダウンロードした画像をそのまま使用すると、容量が大きすぎて読み込み速度が遅くなり、Googleなどの検索順位にも悪影響が及びます。

そうならないように、画像は必ず適切なサイズに変更してから使用するようにしましょう。

ここでは、① 画像のサイズを小さくする方法と、② 解像度を下げる方法について説明します。

① サイズを小さくする

使用したい箇所に合わせたサイズに縮小します。その際、縦横比は変更しないようにします。

下記のサイトを参考に、小さくしてみましょう。

写真のサイズを変更する方法

JPEGのサイズを小さくする方法

WordPress に掲載するのに最適な画像サイズは、ブログの横幅と同じサイズです。

お使いのブログのテーマや設定によって、最適な画像サイズは異なります。今後テーマを変更する可能性がある場合は、少し大きめのサイズにしておくと良いかもしれませんね。

画像がクリックされた際に、拡大表示するようにしたい場合は、大きいサイズのままアップロードします。

② 解像度を下げる

私も愛用しているパンダのキャラクターがかわいい TinyPNG を使えば、簡単に解像度を下げることができます。無料で使える上に、PNG 形式とJPG 形式のどちらにも対応しているので使いやすいです。

使い方については、こちらの記事で詳しく解説しています。

もし、Photoshop をお持ちでしたら『Web用に保存』を選べば、画像サイズから解像度まで一気に変更することもできますよ！

代替テキスト（ alt ）はSEO的にも重要

代替テキスト（alt）とは、画像を具体的に説明する文字情報です。

代替テキストは、基本的に訪問者に直接見えるものではありませんが、検索エンジンにとってはとても重要な情報です。なぜなら、検索エンジンは画像を読み取ることができない、つまりなんの画像か理解することができないからです。

また、音声ソフトを利用している視覚障害者の方にも非常に大切な情報で、アクセシビリティの向上にもつながります。

さらに、なんらかの障害で画像がうまく表示されない時、うまく読み込めない時にも、代替テキスト（alt）は重要な役割を果たします。

例えば、先ほど使用したTinyPNG（）の画像ですが・・・

うまく表示されなかった場合、下（）の画像のように代替テキスト（ alt ）に設定した文言が表示されることになります。

ということで、代替テキスト（alt）はSEO的にも、アクセシビリティ的にもとっても重要な情報なのです。

代替テキスト（alt）には、「机の上にのっているパソコン」とか「郵便受けに差し込まれた新聞」とか、その画像がどういう画像なのか具体的に分かるように必ず入力するようにしましょう。

まとめ

こちらでは、初めて WordPress に触れる方でも、最低限おさえておきたい画像処理の方法についてまとめました。

少しでもあなたのブログ作りのお役に立てれば幸いです。