どうも！かぱ吉（@kapa_log)です！
ブログに記事を書くときには画像を入れることも多いですよね。
記事内に何も画像がないとしても、ブログ記事の先頭にはアイキャッチ画像（この記事の↑の画像もアイキャッチ画像です）を入れたりします。
このブログの画像、ただ何も考えずそのままアップしていませんか？
実はそれ、ちょっともったいないことをしているかもしれません…。
今回はブログに画像をアップする時の画像サイズやファイル形式、ファイル名、代替テキスト（alt属性）に関するものなど、覚えておいてほしいブログに画像を貼る時の基本をご紹介します。
Contents
ブログに画像を貼る時に注目する4つのポイント！
画像を使う時に注目してほしいのは次の4つ。
- 画像タイトル
- 代替テキスト（alt属性）
- 画像サイズ
- ファイル形式
この4つに関して解説しておきます。
また、いじらなくていいのですが、ついでなのでワードプレスの画像画面で出てくる
- キャプション
- 説明
この2つに関してもどんなものか？という解説をしておきますね。
画像タイトルはどんな感じで入れればいい？
まずは画像タイトルから。
そのまんま、画像のタイトルを入れればOKです。
難しく考える必要はないですね。
空の画像だったら「空」とか。
山の画像だったら「山」とか。
シンプルに考えればいいし、多少適当でも問題ないです。
ただ、一応画像にマウスカーソルを合わせた時に出てくる吹き出し（ツールチップ）にこのタイトルに入れた言葉が出てくることがあります。
使っているワードプレステーマによってはツールチップが出ないこともあります。というか出ないテーマのほうが多いと思います
なので全然関係ないタイトルはやめましょうね。
ただ、お伝えする代替テキストと違ってそれほど記事への影響はありません。
代替テキスト(alt）はかなり大事！絶対に設定すべし
タイトルはぶっちゃけ適当につければいいですが、代替テキスト(alt）はすごーく大事！
もし画像が表示されなかった時、代替テキストに設定した言葉が表示されます。
画像が表示されない時ってあるの？って思うかもしれませんが、僕も結構外でスマホでネット見てて、電波状況が悪くて画像が見れないってこと、結構ありますよ。
また、Webページの音声読み上げ機能を使った時、画像の部分は代替テキストに設定したものを読み上げます。
このように読者の使いやすさ（＝ユーザビリティ）を考えた時に代替テキストはものすごく大事です。
ユーザビリティが上がる、ということはブログの評価も上がる。
回り回ってアクセスも増える、ということですからね。
代替テキストは記事評価にもつながる！
読者の使いやすさの他にもう一つ大きな意味があります。
それはグーグル様もこの代替テキストに入力した言葉をブログ評価の大きなポイントにしているということ。
実際グーグルの公式でも『わかりやすい代替テキストを使用する』という見だしを一つ作ってまでちゃんと代替テキストに言葉を入れるように推奨していますしね。
で、このグーグルの公式ページの中に代替テキストの入れ方に関する良い例と悪い例の見本があります。
この見本をわかりやすく解説しますね。
次の画像を見てください。
犬のダルメシアンが床で寝ていますね。
この時代替テキストはどのようなものがいいでしょうか？
まず悪い例から。
代替テキスト=
（補足：代替テキストが空欄）
代替テキスト=子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌
（補足：キーワードを羅列しただけなうえに関係ないキーワードもある）
このようにそもそも代替テキストを書かないとか、画像と関係ないキーワードをやたらと詰め込む…といったものは、悪い代替テキストになります。
一方で良い例としては…
代替テキスト=犬
（補足：画像の部分的な情報を伝えている）
さらに良い例：
代替テキスト=床で寝ているダルメシアンの犬
（補足：何をしている画像か文字テキストだけで伝えている）
良い例では、代替テキストでどんな画像か、というのを説明するというのがポイントです。
『犬』という説明だけでも一応表して入るのですが、『床で寝ているダルメシアンの犬』と書けば、より丁寧でどんな画像かわかりますね。
このように代替テキストは『画像が表示されなくても何を伝えているかわかる』という感じで入れるのが大事！
少しでもアピールしようとキーワードを羅列したりすると、逆に評価を下げちゃいますよー！
画像検索からアクセスがあることも！
代替テキストを設定しておくとちょっとしたおまけもあります。
それは画像検索の結果に自分のブログの画像が出ること。
そして、その画像経由で記事へのアクセスがあったりします。
ぶっちゃけ、それほどグイーンとアクセスが増えるわけではないですが、こんなおまけもあるよ！ということで。
少ないとはいえ、少しでもアクセスが増えるならやっておいて損はないですよ。
jpgとpngはどっちがいい？
ファイル形式の話もしておきます。
『.jpg』とか『.png』ってやつですね。
結論から言うと…。
『基本的にはjpgだけど、ファイルが重くなければpngでも全然OK』です。
基本的に画像のファイル形式はjpgかpngが主流です。
たまにgifというのもありますが、普通に画像を扱っている限りはほとんど出てきません。
で、jpgとpng。
ブログに貼るにはどっちがいいか、なんですけど、一応特徴をすご－－－くざっくり言うと。
- jpg…画質はやや悪い。サイズはやや軽い。
- png…画質はやや良い。サイズはやや重い。
という感じです。
で、画質に関しては『やや』という言い方をしたのですが、これはぶっちゃけどちらのファイル形式でも普通に見る分には画質の違いなんて分からないからです。
少なくともブログをやるうえで、pngの画質じゃなきゃダメ！ってことはほとんどないでしょう。
なので、基本的に画像のサイズを軽くしてページそのものを軽くしたほうが良いです。
ということでjpgで画像を貼るのが基本です。
もしpngの画像がある場合はjpgに変換できるサイトもあります。
ただ…。
先ほど触れた通り、別にpngでもサイズが軽ければ、全然OKです。
サイズが軽いってどれくらい？
サイズが軽い、重いは感覚的なものになりますし、画像サイズにもよるのですが…。
僕的には50KB前後ならOKかな、という感じ。
100KB超えてなければ許容してます。
ちなみに、先ほどのツールチップを紹介した画像はpng形式ですが、31KBです。
こんな感じなので、pngにしちゃったから絶対ダメ、って訳じゃないですし、仮にjpgで100KB越えちゃってたとしても、全部jpgにして上げ直したりする必要はないです。
ただ、どちらかといえば軽さ優先でjpgの方が良いことが多い、というのは覚えておきましょうね。
画像の大きさはどれくらいが適切？
画像の大きさは『絶対にこのサイズ！』っていうものはありません。
記事の内容によっても大きく見せたい画像もあるでしょうしね。
僕の場合はどうしているかというと…。
基本的に横幅は最大640pxにするようにしています。
これでパソコンでブログを見た場合、ちょうど記事の横幅ピッタリに収まるからです。
一応、それ以上でも自動で縮小してくれるのですが、大きなサイズだとそれだけ容量も大きくなっちゃいますからね。
自分で調整できる部分まで調整しておきましょう。
ただ、もちろん全ての画像サイズを横幅640pxに合わせているわけではありません。
この辺は実際に記事のプレビューで見ながら調整してます。
今は画像を自動調整してくれるテンプレートも多いけど、そのまま画像をアップするとサイズが大きくなっちゃうよ。
必要な大きさにリサイズしてからアップするのがおススメだ！
キャプション・説明の使い方
ワードプレスの画像画面にある『キャプション』と『説明』は使わなくてもいい機能です。
が、せっかくなので一応どんな機能か説明しておきます。
『キャプション』は画像の下に簡単な説明文を載せることができます。
こんな感じ。
画像の下に『ふかふかの草』という文字があると思いますが、これがキャプションに入れた文字です。
なるほどー…。『説明』は？
で、『説明』は自分用メモみたいな感じです。
ここに何かを書いてもどこかに何かが表示されたりすることはありません。
画像に対して何か覚えておきたいこととか自分の中で整理するために使うといいでしょう。
まとめ：画像にもそれなりに気を遣おう！
ブログに画像を貼る時に意識しておいてほしいポイントを4つ紹介しました。
特に一番大事なのは代替テキスト。
読者のためにもなりますし、ブログ記事の評価にもつながりますし、画像検索結果に表示される可能性も高まります。
代替テキストは『画像が表示されなくても文字だけで何を伝えているかわかる』という感じで書くのがポイントです。
画像サイズやサイズ、タイトルなんかもそんなに手間はかからないので、ちゃちゃっと適切な感じにしておきましょう。
細かい部分ですが、結構大事ですよー！
