そんな悩みが解決できる記事を書きました。

本記事では、WordPressブログにおけるWebP対応手順を中心に解説します。

意外と簡単にできますので、サイト速度を改善したい方はこの記事を参考にやってみて下さいね。

WebPの対応手順だけ知りたい方は、2章からご覧くださいね。
さっそく解説していきます。

Webとは？

WebP（ウェッピー）とは、Googleが開発した次世代の画像フォーマットのこと。

ファイルの拡張子は、「.webp」となります。

WebPの特徴：ファイルサイズの軽量化が図れること

WebPの最大の特徴は、ファイルサイズの軽量化が図れること。

軽量化によりサイトの表示速度を改善できれば、もちろんSEO対策にも繋がります。

ファイルサイズはどれくらい圧縮されるの？

JPEGファイルと比較して25~34%、PNGと比較して28%小さくなると言われています。

▼実際にJPEGとWebPの比較をしてみましたのでご覧ください。

画像の劣化はまったく分からないにも関わらず、ファイルサイズは80%程度も小さくなっています。

ウェッピーってすごいんだね！

WebPのデメリット：一部のブラウザで非対応

実はWebPには、IEなど一部非対応のブラウザがあります。

これがWebP導入を躊躇してしまう要因だったりします。

それじゃ導入はやめておこうかな…

いえいえ、これから紹介する方法であれば、WebP対応ブラウザならWebP、非対応ならこれまで同様JPGやPNGというような出し分けができますので、ぜひ参考にしてみてください。

さっそく次章より紹介していきます。

WordPressでのWebP対応手順３ステップ解説

WordPressブログであれば、「EWWW Image Optimizer」というプラグインを使えば、意外と簡単にWebP変換を導入できます。

さっそく手順を紹介していきます。

1. EWWW Image OptimizerのWebP変換設定
2. .htaccessを編集
3. 一括最適化

順に説明します。

EWWW Image OptimizerにてWebP変換設定

EWWW Image OptimizerにてWeb変換設定をしていきます。

まずは、EWWW Image Optimizerをインストールしましょう。

▼1.WordPress管理画面の「プラグイン」→「新規追加」より、EWWW Image Optimizerをインストール後、有効にします。

上図はすでにインストール＆有効にしていますが、はじめは「今すぐインストール」になっているはずです。

▼2.EWWW Image Optimizerの設定画面を開いたら、「WebP」というタブを開きます。
そこの「WebP変換」という項目にチェックを入れます。

最後に、変更を保存をクリックして保存ください。

▼3.すると、下図のような怪しげなコードが表示されると思います。それを丸ごとコピーしましょう！

これは、次の.htaccessファイルの編集の際に使用します。怪しいものではないのでご安心を。

【補足】EWWW Image Optimizerそのほかの設定

EWWW Image Optimizerは優秀な画像最適化プラグイン。せっかくなので、そのほかの設定も確認しておきましょう。

と言っても基本的に確認するのは以下の2点くらいです。

①▼基本タブの「メタデータを削除」にチェックを入れる。

②▼変換タブの「変換リンクを非表示」にチェックを入れる。

2つともデフォルトでチェックが入っていたかもしれませんが念のため。

他の項目はデフォルトのままで大丈夫です。

画像遅延読み込みの設定もありますが、そちらは後で紹介します。

.htaccessを編集

次に、サーバーの設定を変更する「.htaccess」ファイルを編集します。

▼1.まずはConoHa WINGにログイン後、「サイト管理」→「サイト設定」→「.htaccess設定」をクリック。

▼エックスサーバーであれば、サーバーパネルにログイン後、「.htaccess」をクリック。

▼.htaccess設定の右側の鉛筆マークを押せば編集できますので、先ほどコピーしたものを貼り付けましょう。
先頭に貼り付けておけばOKかと（元々コードがある場合は、間に追加したりしないように！）。

これで、WebP対応ブラウザならWebP、非対応ならこれまで同様jpgやpngというような出し分けができるようになります。

▼この時点でEWWW Image Optimizerの画面で「PNG」と表示されていたのが、緑色で「WebP」に変わっているはずなので確認してみてください（下図の右下）。

確認できたら、次に進みましょう。
（確認できなければ、設定を間違えた可能性がありますので見直してみてください。）

一括最適化

EWWW Image Optimizerの一括最適化機能を使って、既にサイト内にある画像ファイルをWebP化していきましょう。

▼1.WordPressの管理画面より、「メディア」→「一括最適化」をクリック。

▼2.「最適化されていない画像をスキャンする」を押せば最適化できますが、圧縮は他のプラグインなどで実施済みだよって方は、「WebPのみ」にチェックをいれてから実行してもいいでしょう。

僕はチェックを入れて実行しました。

▼3.最後に、下図の最適化のボタンをクリックします。

▼4.最適化が始まります。完了するまでしばらく待ちましょう。

僕は1時間くらいかかりましたね。

完了すれば以上で終了です。

WebP変換確認

実際にWebP化できているか確認してみましょう。

自分のサイトに行って、F12を押して検証ツールを開きます。

▼Networkタブに行って、「Img」を選択。「Disable cache」にもチェックを入れておくと、キャッシュの読み込みを無効化してくれるので、こちらにもチェックを入れておきましょう。

Typeの欄に「webp」と表示されていればWebPに変換できています！

また、IEで開くとJPGやPNGのままちゃんと表示されているので確認してみてくださいね。

EWWW Image Optimizerなら画像遅延読み込みにも対応可能

▼EWWW Image Optimizerの設定で下図の赤枠にチェックを入れれば、画像遅延読み込みも対応可能です。

上記の設定を行えば、

• A3 Lazy Load
• Autoptimizeの画像遅延設定

などは不要になります。

僕はチェックを入れて、Autoptimizeの画像遅延設定を解除しましたが、このあたりのプラグインの良し悪しは検証しておりませんので、お好みでお願いします。

Compress JPEG & PNG imagesプラグインを導入している方へ

同じ画像圧縮プラグインとして有名な「Compress JPEG & PNG images」を使用している方も多いのではないでしょうか。

しかし、WebPにしたほうが圧縮率が高いですよね～。

なので今後はEWWW Image Optimizerを使っていこうと思います。（パンダ君ごめんなさいね。）

WebP対応手順３ステップ解説 まとめ

いかがでしたでしょうか。意外と簡単にできたのではないでしょうか。

僕のサイトはPageSpeedInsightsのスコア自体はあまり変わりませんでしたが、人によっては大きく改善されるかもしれませんね。

WebP対応でスコアが大きく改善されたよって方は、Twitter（@KoaraCom）までご連絡いただけると助かります。

当サイトではPageSpeedInsightsの項目を基準に、あなたのサイト速度を改善できる施策を多数用意しております。

その他にも簡単に取り組める施策がありますので、サイトが重くて気になる方はトライしてみてください。
>>サイト速度を改善する施策一覧を見てみる。

ちょっと待った！

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

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

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

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

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

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

画像の最適化とは？

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

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

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

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

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

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

Webページを構成する要素のうち、画像のファイルサイズは大きなウェイトを占めますので、読み込み速度が改善される可能性はじゅうぶんありますよ。

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

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

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

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

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

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

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

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

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

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

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

ステップ１：リサイズしよう

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

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

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

ところで、ブログ記事の横幅サイズなんて知らないんですけど？？

Chromeブラウザの検証ツールを使えばかんたんに分かりますよ。

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

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

おお！これは使える！

調べるのが面倒でしたら、大体700～800pxくらいにしておけば、たいていのブログ記事に対応できるかと。

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

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

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

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

豆知識その２：JPGとPNGについて

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

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

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

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

ステップ２：圧縮しよう

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

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

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

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

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

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

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

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

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

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

実際、意味のない装飾画像であれば記入不要です。

ただ、判断に困りそうなら基本的にalt属性には、画像の説明を必ず記入すると覚えておいても問題ないでしょう。

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

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

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

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

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

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

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

メディアライブラリに記入した内容より、こちらで記入した内容のほうが優先されます。

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

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

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

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

こちらは発展です。

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

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

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

2020年7月30日

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

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

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

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

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

2020年8月1日

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

2020年7月30日

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

2020年8月1日

そんな要望に応える記事を書きました。

なるほど。
それなら「Bulk Resize Photos」というツールがおすすめですよ。

ブロガーの方なら記事に画像を載せるために、1枚だけじゃなく何枚もリサイズする必要がありますよね。

そんなときにこのツールはとっても便利なんです。

本記事では、「Bulk Resize Photos」の特徴と使い方について解説していきます。

リサイズツールをお探しの方は、本記事を読んでぜひ使ってみてください。

さっそく解説していきます。

画像リサイズツール「Bulk Resize Photos」の使い方

お先に使い方の説明をしてしまいましょう。

Bulk Resize Photosにアクセスします。

リサイズしたい画像をドラッグ＆ドロップ、または「画像を選択します」より、画像を追加します。
複数追加可能です。

以下の中から機能を選択して使用します。
僕がよく使うものには、★マークをつけています。

• 規模 ★
  画像サイズを%指定でリサイズできます。
• ファイルサイズ
  指定したファイルサイズ以下にリサイズできます。
• 正確な寸法 ★
  高さと幅を指定した寸法でリサイズできます。
• 幅
  幅を指定した寸法でリサイズ。高さは幅のリサイズ分に応じてリサイズしてくれます。
• 高さ
  高さを指定した寸法でリサイズ。幅は高さのリサイズ分に応じてリサイズしてくれます。
• 最長の辺
  最長の辺を指定した寸法でリサイズできます。

あとは、「スタートリサイズ」をクリックすれば、PCのダウンロードフォルダにリサイズした画像がダウンロードされます。

画像リサイズツール「Bulk Resize Photos」の特徴

1. まとめてリサイズできる
2. 設定が保存できる
3. 100%リサイズでファイルサイズの圧縮可能

順に解説します。

まとめてリサイズできる（150個まで）

画像をたくさん追加して、まとめてリサイズできるのが超絶に便利ですね。

ブログに掲載する画像って、たいていは1枚だけではないですし、記事中の画像サイズは同じで良かったりします。

なので、まとめてサッとリサイズしたいときにもBulk Resize Photosは重宝しますね。

設定が保存できる

リサイズの設定画面で設定した内容をお気に入りに保存すれば、次回からはいちいち設定しなくてもリサイズできます。

やり方は簡単でして、下図の①のボタンをクリックするか、Chromeなら②のお気に入りボタンより、この画面をお気に入りに登録すればOK。

よく使う設定をお気に入りに登録しておきましょう。

100%リサイズでファイルサイズの圧縮可能

リサイズツールと言いつつ、画像サイズの圧縮にも使えます。

圧縮とは、画質は若干悪くなりますが、ファイルサイズを小さくすることができます。

使用場面としては、アイキャッチに用いる画像ですね。

アイキャッチは、「Canva」というアプリをよく使っています。

Canvaでアイキャッチ画像を作成するとき、画像サイズは指定済みのため、リサイズする必要はないのですが、規模のサイズ指定を100%にすることで圧縮にも使用できるってわけです。

【番外編】他におすすめのツールは？

Google発のWebアプリ「Squoosh」もおすすめですね（これ、なんて読むんでしょう？）。

このアプリの最大の特徴は、リサイズ、圧縮中の画像の劣化具合を、元画像と比較しながら自由に調整できるところ。

普段は「Bulk Resize Photos」で。
しっかり調整したい画像に限っては、「Squoosh」を使うとよいでしょう。

セキュリティ面は問題ないか？

セキュリティ面は問題ないと言えます。

なので、外部のサーバーにアップロードされたりすることはありません。

確かに、インターネット接続をしない状態でも利用できました。

セキュリティ面についても安心ですね。

ブロガーにおすすめの画像リサイズツール「Bulk Resize Photos」まとめ

最後に、「Bulk Resize Photos」の特徴をもう一度。

しっかり画像の最適化調整したい場合は、「Squoosh」もおすすめです。

とっても簡単そうなので、さっそく使ってみます。

そのほか、WordPressユーザーがブログに画像を掲載するまでの全手順を解説する記事を書いています。

期待してお待ちくださいね。

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

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

2020年7月30日

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

そんな悩みが解決できる記事を書きました。

オフスクリーン画像の遅延読み込みは、プラグインでかんたんに解決してしまうのがよいでしょう。

さっそく解説していきます。

オフスクリーン画像の遅延読み込みとは？

オフスクリーン画像の遅延読み込みとは、「スクロールしないと見えない領域の画像は後で読み込みましょう」というアドバイスになります。

ファーストビューを速く表示させよう

Webページは1ページのうち、画面スクロールしなくても見える領域とスクロールしないと見えない領域がありますよね。

Webページにアクセスしたときに、スクロールしないと見えない画像なんて、べつに後で読み込んでもいいわけです。

ところが、今回の警告であるオフスクリーン画像、つまりスクロールしないと見えない領域の画像を読み込んでいるせいで、肝心のファーストビューの範囲内にある表示が遅くなってしまっています。

オフスクリーン画像を遅延させることで、Webページをぱっと見で速く感じさせることもできるでしょう。

オフスクリーン画像の遅延読み込み 改善方法

オフスクリーン画像の遅延読み込みの改善は、画像遅延読み込み系プラグインでかんたんに解決してしまうのがよいでしょう。

よく紹介されている画像遅延読み込み系プラグイン

よく紹介されている画像遅延読み込み系プラグインはこちら。

• A3 Lazy Load
• BJ Lazy Load

確かに上記が鉄板かと。

ただ、タイトルに書いちゃってますが、当ブログでもよく紹介している「Autoptimizeプラグイン」でも実現できますよ。

Autoptimizeプラグインでできること

• CSSやJavaScriptコードを圧縮してくれる
• 画像を遅延読み込みしてくれる

やり方はAutoptimizeの設定で、下図赤枠のチェックを入れるだけ。

簡単ですね。

Autoptimizeプラグインの難点

Autoptimizeの難点をあげるなら、画像遅延読み込みに関する細かい設定ができないということ。

例えば、400px手前で読み込み開始！

などの設定は、A3 lazy loadではできますが、Autoptimizeではできないです。

このあたりは実際に表示を必ず確認してみて、

• レイアウトが崩れていないか（プラグインとの相性の確認）
• 体感的な表示速度に問題ないか
• スクロールしたときに違和感はないか

などを考慮してお好きなほうを導入してみてください。

ユーザーにとってストレスを感じるほど遅延読み込みしていたら本末転倒ですからね。

あと、両方採用する場合は、Autoptimizeの画像遅延読み込み設定は解除しておいてくださいね。

▼そのほかAutoptimizeプラグインの設定に関してはこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

オフスクリーン画像の遅延読み込み まとめ

導入後に、PageSpeedInsightsにて警告が消えているか確認してみましょう。

無事合格していますね。

以上、オフスクリーン画像の遅延読み込みの改善方法でした。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

そんな要望に応える記事を書きました。

Autoptimizeは、お手軽にサイトの速度改善を行いたいときに使える便利なプラグインで当サイトでも使用しています。

本記事では、Autoptimizeの設定方法を画像付きで解説します。

設定後の注意点についても触れていますので、参考にしてみてください。

さっそく解説していきます。

Autoptimizeプラグイン｜インストール手順

WordPressの管理画面より「プラグイン」→「新規追加」をクリックします。

「Autoptimize」と入力して検索すると、下図のように出てきます。

上図左側のほうですね。

僕はすでにインストール済みなので表示されませんが、「今すぐインストール」をクリックします。

Autoptimzeプラグイン｜設定方法

「設定」→「Autoptimize」をクリックします。

設定画面が現れますので順にみていきます。

JSの設定

上図のとおりにチェックします。

補足説明が必要そうな箇所だけ解説しておきます。

AutoptimizeからJSを除外

最適化から除外するJavaScriptファイルを記載します。

デフォルトの設定どおりで構いません。

CSSオプション

上図のとおりにチェックします。

インライン化とは？

すべてのCSSをインライン化にチェックを入れていますが、あとで必ず表示が崩れたり、CSSが反映されずに文字がチラついたりしていないか確認してください。

表示が崩れる場合はチェックを外してください。

AutoptimizeからCSSを除外

最適化から除外したいCSSファイルを記載します。

admin-bar.min.css, dashicons.min.cssは、WordPressの管理画面で使用されるものです。

削除してもデザインが崩れたりしなかったので、そのまま削除しておきました。

HTMLオプション、CDNオプション

上図のとおりでOK。

その他オプション

上図のとおりでOK。

ひとつチェックが外れている箇所も、チェックしておいても大丈夫かと。

画像

上図のとおりでOK。

Lazy-load images?

チェックを入れておくと、画像の遅延読み込みに対応できます。

遅延させるのに速度改善するの？

と思うかもしれませんが、ページを表示したい際にスクロールしないと見えない領域がありますよね。

ページを表示した際に画像をすべて読み込むのではなく、見えない領域に関してはあとで読み込むことで、ユーザー体験を損ねることなく速度改善が期待できます。

追加

上図のとおりでOK。

Googleフォント

フォントの読み込みが制御できるライブラリ。

何も理由がなければこれを選んでおくと良いです。

ほかのチェック項目については現在調査中です。

絵文字を削除

絵文字が不要なら削除で。

最後に表示の確認を！

変更を保存をクリックしたら、自サイトを何度か更新してレイアウトが崩れていないか表示を確認してください。

PageSpeedInsightsでスコアを確認してみてもよいでしょう。

僕はこのAutoptimizeだけでスコアが20以上上がりました。

【注意】Autoptimizeのキャッシュの警告が来たら、削除してください

Autoptimizeのキャッシュのサイズが増えすぎると、削除してくださいという警告メールが届くそうです。

対処法としては、定期的に削除するか、警告メールが届いたり、上図が真っ赤に表示されているときは、「キャッシュを削除」よりキャッシュを削除してください。

以上、Autoptimizeの設定方法についてでした。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日