Webサイトの表示速度、気になりませんか?Google PageSpeed Insightsでサイトを診断すると、必ずと言っていいほど「次世代フォーマットでの画像の配信」という項目が表示されます。
正直、この指摘を見て「また難しい専門用語が…」と思った方も多いのではないでしょうか。
でも安心してください。この記事では、次世代フォーマットでの画像配信について、初心者の方でも理解できるよう徹底的に解説します。実際にLandingHubでも多くのクライアント様から「表示速度を改善したい」というご相談をいただくのですが、この対応一つで大きな改善効果が得られるんです。
目次
そもそも「次世代フォーマットでの画像の配信」って何?
従来フォーマットと次世代フォーマットの違い
まず、現在多くのWebサイトで使用されている画像フォーマットを確認してみましょう。
従来の画像フォーマット
- JPEG(JPG):写真に適している
- PNG:透明度を表現できる
- GIF:アニメーション対応
これらは長年使われてきた信頼性の高いフォーマットですが、実はファイルサイズが大きいという問題があります。
次世代フォーマット
- WebP:Googleが開発した新しい画像形式
- JPEG 2000:JPEGの後継規格
- JPEG-XR:Microsoftが開発した高圧縮率フォーマット
次世代フォーマットは、従来のフォーマットと比べて大幅なファイルサイズの削減を実現しています。例えば、WebPではJPEGと比較して25-34%、PNGと比較して26%もファイルサイズを削減できるんです。
なぜ表示速度の改善が重要なのか
表示速度の改善が必要な理由は明確です。
1. ユーザーエクスペリエンスの向上
- 3秒以内に表示されないページは40%のユーザーが離脱
- 1秒の遅延でコンバージョン率が7%減少
2. SEO効果
- Googleは2018年より表示速度を検索ランキングの要因として明言
- Core Web Vitalsの指標として重要視
3. ビジネス成果への直接的な影響
- 表示速度1秒改善でコンバージョン率が2%向上
- 直帰率の大幅な改善
LandingHubのクライアント様でも、次世代フォーマット対応により平均で30-40%の表示速度改善を実現しています。
次世代フォーマットの種類と特徴を詳しく解説
1. WebP(ウェッピー)- 最も実用的な選択肢
WebPは、現在最も採用すべき次世代フォーマットです。
WebPの特徴
- JPEGより25-34%小さいファイルサイズ
- PNGより26%小さいファイルサイズ
- 透明度(アルファチャンネル)にも対応
- アニメーション機能も搭載
対応ブラウザ
- Chrome、Firefox、Safari、Edge(最新版)
- Internet Explorer 11以下は非対応
- モバイルブラウザもほぼ対応済み
実用性 現在のブラウザシェアを考慮すると、WebP対応により約95%のユーザーが恩恵を受けられます。
2. JPEG 2000 – 高品質だが限定的
JPEG 2000は高い画質を保ちながら圧縮できる優秀なフォーマットですが…
特徴
- 可逆圧縮に対応
- 高い表現力
- 処理負荷が大きい
対応ブラウザ
- Safari、iOS Safari(ver.5以降)のみ
実用性 Apple製品のみの対応なので、現実的な選択肢としては優先度が低いです。
3. JPEG-XR – Windows環境特化
Microsoft開発のフォーマットで、高い圧縮率を実現しています。
特徴
- 高い圧縮率
- 豊富な色彩情報
- 可逆圧縮対応
対応ブラウザ
- Internet Explorer、Microsoft Edge
実用性 Windows環境に特化しているため、汎用性に欠けます。
結論:WebPを中心とした対応戦略が最適
3つの次世代フォーマットを比較した結果、WebPを中心とした対応が最も現実的で効果的です。
WebPの実装方法を完全解説
方法1: pictureタグを使用した対応
この方法は、対応ブラウザにはWebP、非対応ブラウザには従来フォーマットを表示する最も確実な方法です。
Copy<picture>
<source type="image/webp" srcset="sample.webp">
<img src="sample.jpg" alt="サンプル画像">
</picture>
レスポンシブデザインにも対応した記述例:
Copy<picture>
<source type="image/webp" media="(max-width: 767px)" srcset="sample_sp.webp">
<source type="image/webp" media="(min-width: 768px)" srcset="sample_pc.webp">
<source media="(max-width: 767px)" srcset="sample_sp.jpg">
<img src="sample_pc.jpg" alt="サンプル画像" width="1200" height="600">
</picture>
方法2: .htaccessによる自動振り分け
すでに稼働中のサイトで、全てのimgタグを書き換えることが困難な場合は、この方法が有効です。
Copy# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{SCRIPT_FILENAME}.webp -f
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=_image_request
</IfModule>
重要なポイント
- WebPファイルは「sample.jpg.webp」という命名規則で保存
- 「sample.webp」ではなく「sample.jpg.webp」であることに注意
方法3: WordPressプラグインでの対応
WordPressサイトの場合、プラグインを使用することで簡単に対応できます。
おすすめプラグイン:WebP Converter for Media
- プラグインをインストール
- 設定→WebP Converterを選択
- 画像品質を75-90%に設定(お好みで調整)
- 対応ディレクトリに「/uploads」「/plugins」「/themes」をチェック
- 「Regenerate All」を実行
エラーが発生した場合の対処法
- パーマリンク設定を「基本」以外に変更
- 別ブラウザで管理画面にログインして再実行
- REST APIの動作確認
WebP画像の作成方法
1. Adobe Photoshopを使用
Photoshop 2021(バージョン22.0)以降では、WebP形式での保存が標準対応しています。
手順
- ファイル→書き出し→書き出し形式を選択
- フォーマットから「WebP」を選択
- 品質を75-90%に設定
- 書き出し実行
2. オンラインツール「Squoosh」の活用
Googleが提供する無料のWebツールです。
使い方
- https://squoosh.app/ にアクセス
- 画像をドラッグ&ドロップ
- 右側の形式を「WebP」に変更
- 品質を調整(左右比較可能)
- ダウンロード
Squooshの優れた点
- 変換前後の画質を同時比較
- リアルタイムでファイルサイズを確認
- 最適な圧縮率を視覚的に決定
3. コマンドラインツール「squoosh-cli」
大量の画像を一括変換したい場合は、コマンドラインツールが効率的です。
インストール方法
Copynpm install -g @squoosh/cli
使用方法
Copysquoosh-cli --webp '{"quality": 75}' images/*.jpg
実際の効果測定と改善事例
改善前後の比較データ
LandingHubで実際に対応したクライアント様の事例をご紹介します。
A社(ECサイト)の事例
- 対応前:PageSpeed Insights 33点(モバイル)
- 対応後:PageSpeed Insights 78点(モバイル)
- 改善効果:表示速度2.3秒短縮、コンバージョン率15%向上
B社(コーポレートサイト)の事例
- 対応前:PageSpeed Insights 42点(モバイル)
- 対応後:PageSpeed Insights 85点(モバイル)
- 改善効果:直帰率23%改善、平均滞在時間1.8倍
測定すべき指標
1. Core Web Vitals
- LCP(Largest Contentful Paint):2.5秒以内
- FID(First Input Delay):100ミリ秒以内
- CLS(Cumulative Layout Shift):0.1以内
2. その他の重要指標
- First Contentful Paint(FCP)
- Time to Interactive(TTI)
- Total Blocking Time(TBT)
次世代フォーマット対応の注意点と課題
1. ブラウザサポートの確認
WebPの対応状況は年々改善していますが、完全ではありません。
対応状況(2025年現在)
- Chrome:全バージョン対応
- Firefox:65以降対応
- Safari:14以降対応
- Edge:全バージョン対応
- IE:非対応
2. ファイルサイズの最適化
WebP変換時の品質設定は慎重に行う必要があります。
推奨品質設定
- 写真:75-85%
- イラスト・ロゴ:85-95%
- 圧縮効果を重視:60-75%
3. SEO観点での考慮点
画像のalt属性 WebP対応時も、alt属性の設定は必須です。
画像サイトマップ 新しい画像URLは検索エンジンに適切に伝える必要があります。
その他の画像最適化手法
次世代フォーマット対応だけでなく、総合的な画像最適化も重要です。
1. 画像の遅延読み込み(Lazy Loading)
Copy<img src="sample.jpg" loading="lazy" alt="サンプル画像">
2. 適切な画像サイズの設定
Copy<img src="sample.jpg" width="800" height="600" alt="サンプル画像">
3. 無駄な画像の削除
- 装飾目的のみの画像は可能な限りCSSで代替
- 重複している画像の統一
- 必要性の低い画像の削除
4. CDN(Content Delivery Network)の活用
画像配信を高速化するため、CDNの利用も効果的です。
実装チェックリスト
事前準備
- 現在の画像フォーマット・サイズを確認
- PageSpeed Insightsでベンチマーク測定
- 対象ブラウザのシェア確認
実装作業
- WebP変換ツールの選定
- 変換品質の決定
- 実装方法の選択(picture/htaccess/プラグイン)
- テスト環境での動作確認
実装後確認
- 各ブラウザでの表示確認
- PageSpeed Insightsでの改善確認
- 画像の表示品質確認
- エラーログの確認
まとめ:次世代フォーマット対応で得られる圧倒的なメリット
次世代フォーマットでの画像配信は、一見技術的で難しそうに見えますが、実際に対応してみると驚くほどの効果を実感できます。
得られるメリット
- 表示速度の大幅改善:平均30-40%の速度向上
- SEO効果:検索順位の向上
- ユーザーエクスペリエンスの向上:直帰率の改善
- コンバージョン率の向上:売上・問い合わせ増加
- サーバー負荷の軽減:帯域使用量の削減
実装の優先順位
- WebP対応を最優先
- 品質設定の最適化
- 遅延読み込みの併用
- 他の最適化手法との組み合わせ
正直なところ、最初は「また面倒な作業が増えた…」と思うかもしれません。でも、実際に対応してPageSpeed Insightsのスコアが劇的に改善した時の達成感は格別です。何より、ユーザーの体験が向上し、ビジネス成果に直結する施策として、投資対効果は非常に高いと言えます。
LandingHubでは、このような表示速度改善をはじめとした総合的なWebサイト最適化サービスを提供しています。「自分で対応するのは不安」「もっと本格的な最適化を検討したい」という方は、ぜひご相談ください。