「ブログの表示速度が遅い…」と悩んでいるなら、原因の9割は画像の重さです。
どれだけCSSやJavaScriptを最適化しても、1枚数メガバイトもあるJPEGやPNG画像を何枚も貼っていては、あっという間にサイトは重くなってしまいます。
そこで今回は、Googleが推奨する次世代の超軽量画像フォーマット「WebP(ウェッピー)」を活用して、サイトを劇的に高速化する実務テクニックを解説します。
WebP(ウェッピー)とは?なぜ必要なの?
WebPは、Googleが開発したWeb表示に特化した画像フォーマットです。最大の特徴は、「画質をほとんど落とさずに、ファイルサイズをJPEGやPNGの半分以下に圧縮できる」という圧倒的な軽量さにあります。
- 超軽量: JPEGより約25〜34%、PNGより約26%も軽い。
- 背景透過もOK: PNGのように背景を透明にできる。
- SEOに強い: GoogleのCore Web Vitals(表示速度スコア)が大幅に向上する。
現在ではすべての主要ブラウザ(Chrome、Safari、Edge、最新スマホなど)がWebPに対応しており、次世代の標準フォーマットになっています。
完璧ではない?WebPの3つのデメリットと注意点
圧倒的な軽さを誇るWebPですが、実はまだ「完全に万能」というわけではありません。導入前に以下のデメリットを必ず知っておきましょう。
- 古い環境では画像が表示されない: IE(インターネットエクスプローラー)や、古いバージョンのmacOS / iOS(Safari)などではWebPが表示されず、画像が真っ白になることがあります。
- PCの画像編集ソフトで開けないことがある: ブログからダウンロードしたWebP画像を、少し古いPhotoshopなどのソフトで編集しようとしても、非対応エラーで開けないケースがあります。
- OGP画像(SNSのサムネイル)でエラーになる場合がある: X(旧Twitter)などで記事をシェアした際のサムネイル画像(OGP)に直接WebPを指定すると、正しく表示されない外部サービスがまだ存在します。
「じゃあ、まだWebPは使わない方がいいの?」と思うかもしれませんが、ご安心ください。これらのデメリットを全て打ち消す方法があります。
過去の画像を「WebP」に一括変換する方法
WebPのデメリットを回避しつつ、安全に一括変換するには、軽量で優秀なプラグイン「Converter for Media」を使うのが現代のWeb制作のセオリーです。
このプラグインは、元のJPEG/PNGファイルをそのまま残し、「WebP版のコピー」を裏側で自動生成してくれます。
そして、「WebPに対応している最新のスマホやPCにはWebPを表示し、対応していない古いブラウザには元のJPEG/PNGを表示する(フォールバック処理)」という高度な振り分けを全自動で行ってくれます。
※OGP画像も元のJPEG/PNGが使われるため、SNSでサムネイルが表示されないトラブルも起きません。
一括変換の3ステップ
- プラグインの新規追加から Converter for Media を検索し、インストール・有効化する。
- 設定画面を開き、変換対象に「メディアライブラリ」がチェックされていることを確認する。
- 画面下部の「一括最適化を開始」ボタンをクリックして待つだけ!
これで、過去の記事に使われていた重い画像がすべて軽量なWebPに置き換わり、サイトの表示速度が爆上がりします。万が一プラグインを停止しても、元の画像が消えることはないため非常に安全です。
【プロの裏技】これからのアップロードをWebPに強制する
個人ブログであれば上記のプラグインに任せるのが一番安全ですが、Web制作の実務(クライアントへの納品時など)では、「そもそも最初からWebP以外の重い画像をアップロードさせない」という厳しい制限をかけることもあります。
以下のコードを functions.php に追加すると、WebP以外の画像をアップロードした際にエラーを出し、強制的にWebPを使わせることができます。
/* =========================================
画像のアップロードをWebPのみに制限する
========================================= */
add_filter('wp_handle_upload_prefilter', 'restrict_upload_to_webp_only');
function restrict_upload_to_webp_only( $file ) {
// 許可する拡張子(MIMEタイプ)をWebPのみに設定
$allowed_mimes = array('image/webp');
$file_type = wp_check_filetype($file['name'], $allowed_mimes);
// アップロードされたファイルが画像であり、かつWebPでない場合はエラーを返す
if ( strpos($file['type'], 'image') !== false && ! $file_type['ext'] ) {
$file['error'] = 'サイト軽量化のため、画像は「WebP(.webp)」形式に変換してからアップロードしてください。';
}
return $file;
}
まとめ:画像軽量化は最大のSEO対策!
サイトの表示速度は、読者の離脱率やGoogleの検索順位に直結します。
WebPにはまだ細かいデメリットもありますが、「基本のアップロードはJPEG/PNGで行い、表示だけをプラグインにWebP化させる」という運用方法をとれば、リスクゼロで恩恵だけを受け取ることができます。
驚くほどサクサク動くようになるので、ぜひ今日から実践してみてください!
