【画像最適化】WordPressに画像を掲載するまでの手順を解説

サイト速度改善
ブロガーさん

さーてと、ブログに載せる画像はこれで決まりだな。
あとはこれをそのままWordPressにアップロードして完成~♪

コアラ

ちょっと待った!

ファイルサイズが大きいままの画像をブログに載せ続けると、ページの読み込み速度がもろに悪化しますよ!

それに、画像を最適化しないと、Googleの検索エンジンにも評価されませんからね。

ブロガーさん

そうなの??
では記事に画像を掲載するまでの手順を教えてください!

本記事では、WordPressのブログ記事に画像を掲載するまでの手順を3ステップで解説していきます。

この記事の内容を実践して頂ければ、SEO対策効果も期待できるので、検索順位も上がる可能性がありますよ。

コアラ

ご存知のかたも、チェックリスト代わりに読んでみてくださいね。
さっそく解説していきます。

画像の最適化とは?

画像の最適化とは

ブロガーさんにとっての画像の最適化とは、リサイズや圧縮などをおこなうことで、画像を適切なファイルサイズでブログに配置することです。

画像の最適化で得られる効果

画像の最適化により、以下の効果が得られます。

  1. Webページの読み込み速度が改善される
  2. Googleの検索エンジンにも評価される

Webページの読み込み速度が改善される

画像を最適化することで、画像のファイルサイズが縮小します。
その結果、Webページの読み込み速度が改善されます。

Webページを読み込む際、コンテンツ全体のサイズが小さいほうが速く読み込めるからですね。
コアラ
Webページを構成する要素のうち、画像のファイルサイズは大きなウェイトを占めますので、読み込み速度が改善される可能性はじゅうぶんありますよ。

Googleの検索エンジンにも評価される

画像を最適化することで、Googleの検索エンジンにも評価されます。

実は、Googleはあなたのサイトコンテンツを評価する際、ページの読み込み速度も評価指標の一つに入れています。

なので、画像の最適化によりSEO対策効果につながり、検索順位も上がる可能性がありますよ。

最適化を行わないとどうなるの?

それはまさに、ブログを始めた当初の僕ですね…

何も知識のなかった僕は、気にせずそのまま画像をブログにアップロード!

すると、サイト全体がみるみるうちに重くなってしまったんですよね…

Google提供の速度計測ができるPageSpeedInaightsにおいて、スコアが30を下回るくらいでしたね。
※個人が改善できるスコアの目安は60くらいです。

コアラ

あなたもこうなる前に、早めに最適化の手順をマスターしておきましょう。

【画像最適化】WordPressに画像を掲載するまでの手順【3ステップ】

【画像最適化】WordPressに画像を掲載するまでの手順【3ステップ】

画像の最適化を行い、WordPressに画像を掲載するまでの手順は以下の3ステップでできます。

  1. リサイズしよう
  2. 圧縮しよう
  3. alt属性に画像の説明を記載しよう

ステップ1:リサイズしよう

ステップ1:リサイズしよう
リサイズとは?

画像のサイズ(大きさ)を拡大・縮小して変更すること。
縮小させるとファイルサイズが軽くなり、速度改善につながります。

リサイズツールは、今回は僕も使っているBulk Resize Photosを使います。

これを使って、あなたのブログ記事の横幅サイズに合わせてあげれば、一番無駄がないファイルサイズとなるでしょう。

▼僕の場合は、ブログ記事の横幅の最大が728pxなので、画像の横幅も大体それくらいになるようにリサイズします。

ブログ記事の横幅の最大である728pxに合わせてリサイズ
ブロガーさん
ところで、ブログ記事の横幅サイズなんて知らないんですけど??
コアラ
Chromeブラウザの検証ツールを使えばかんたんに分かりますよ。

▼Windowsなら、あなたのブログ記事を開いてから、右クリック→検証を選択後、下図の赤枠のアイコンをクリックします。

Chromeの検証ツール

▼記事のタイトルにでも矢印キーを合わせれば横幅のサイズが分かります。

ブロガーさん
おお!これは使える!
コアラ
調べるのが面倒でしたら、大体700~800pxくらいにしておけば、たいていのブログ記事に対応できるかと。

豆知識その1:アイキャッチ画像サイズについて

アイキャッチ画像だけは、少し大きめの1200×630pxがいいようです。


これは、SNSの中でも一番サイズの大きいFacebookに掲載するサイズに合わせるためです。

コアラ
ちなみに、このサイズをTwitterに適用すると、上下が15pxずつ見切れる計算になります。
頭の片隅にでも覚えておくとよいかも。

豆知識その2:JPGとPNGについて

画像の拡張子でよく見かけるJPGとPNGの違いについて、ご存知ですか?

JPG
自然物、色がにぎやか、多様色に向いている。
PNG
人工物、使われる色の数が少ない、単色系に向いている。

写真や風景画などは、JPG。

色数の少ないアイコンは、PNGで。

コアラ
良く分からなければ、JPGにしておきましょう。

ステップ2:圧縮しよう

ステップ2:圧縮しよう
圧縮とは?

画像の圧縮とは、画像サイズはそのままに、画質の劣化は気にならない程度で抑えつつ、ファイルサイズだけを縮小させることです。

圧縮は、WordPressのプラグイン「Compress JPEG & PNG images」を使えばかんたんにできます。

Compress JPEG & PNG imagesプラグイン

設定方法について知りたい方は、こちらの記事が参考になります。
>>【画像圧縮】Compress JPEG & PNG images プラグインの設定と使い方

コアラ
一度設定しておくと、あとは自動で圧縮してくれますので導入しておきましょう。

これで圧縮の準備が整いました。

▼あとは、リサイズした画像をいつも通り、WordPressのメディアライブラリにドラッグ&ドロップしてアップロードします。
※圧縮は、プラグインが自動で行ってくれますのでご安心を!

メディアライブラリにドラッグ&ドロップ

Gutenbergエディタをお使いなら、投稿編集画面に直接ドラッグ&ドロップでもいけますね。

投稿画面に直接ドラッグ&ドロップ

画像ファイルサイズの最適化に関しては、リサイズ→圧縮の2ステップで終了です!

元々の画像のファイルサイズと比べると、明らかに軽くなっているはずです。

画像ファイルサイズの目安

特に画質にこだわりがなければ、アイキャッチ画像なら、200KB以内
その他の画像は、80KB以内くらいを目安にしてみてください。

ステップ3:alt属性に画像の説明を記載しよう

ステップ3:alt属性に画像の説明を記載しよう

alt属性ってご存知ですか?

alt属性は、画像を掲載する際のコードに付加するもので、グーグルの巡回ロボット君があなたの記事を評価する際に利用します。

逆に言うと、このalt属性がなければ、ロボットは画像に関してなんの評価もしてくれないのです。

なので、基本的にalt属性には、画像の説明を必ず記入しておくようにしましょう。

どこに記入すればいいの?

コードに直接記入する以外の方法だと、2パターンあります。

1つ目が、メディアライブラリから記入するパターン。

▼WordPressの管理画面より、メディアライブラリを開きます。

WordPressの管理画面より、メディアライブラリを開く

▼適当な画像を選択すると、下図の画面が出てきますので、そこの「代替テキスト」と言う欄に書き込めばOKです。

代替テキストにalt属性を記入
メディアライブラリから記入

2つ目が、投稿編集画面から記入するパターン

▼Gutenbergなら、挿入した画像をクリックして、画像設定のAltテキストという所に記入すればOK。

画像設定のAltテキスト
投稿編集画面の画像設定から記入
コアラ
メディアライブラリに記入した内容より、こちらで記入した内容のほうが優先されます。

▼これも検証ツールで確認すると、ちゃんと反映されていることが分かります。
(毎回確認する必要はないですからね)

alt属性に記入する内容について

記入する内容は、記事のキーワードの羅列ではなく、画像を説明する自然な言葉や文章がいいでしょう。

記事のキーワードの羅列はやめておきましょう。
※昔はここにキーワードを羅列しておくと上位表示された時代があったそうですが、今はロボットも賢くなり、キーワードの羅列は無意味な行為となっているようです。

【発展】画像を遅延読み込みさせよう

画像を遅延読み込みさせよう

こちらは発展です。

Webページを開いたときに見えない画像を遅延読み込みさせることで、読み込み速度を改善することができます。

▼詳しくはこちらで解説しています。

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

【画像最適化】WordPressに画像を掲載するまでの手順を解説 まとめ

まとめ

画像の取り扱いを身につけておくだけで、Webページの読み込み速度が改善されるだけでなく、Googleにも評価される記事になります。

リサイズなど面倒ではありますが、のちのち困らないように、この記事で覚えたことを実践してみてくださいね。

コアラのまとめ

【画像最適化】WordPressに画像を掲載するまでの手順【3ステップ】

  1. リサイズしよう
    おすすめリサイズツールは、「Bulk Resize Photos
  2. 圧縮しよう
    おすすめプラグインは、「Compress JPEG & PNG images」
  3. alt属性に画像の説明を記載しよう
    Googleに評価されやすくなります。

あなたのサイトは大丈夫?
▼画像を最適化して、自サイトの読み込み速度を改善しましょう。

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

【超簡単】Chrome検証ツールでブログデザインを調べる方法

【超簡単】Chrome検証ツールでブログデザインを調べる方法