WebP/AVIF画像がXで表示されない？アイキャッチと本文で使い分ける最適解

X（Twitter）のタイムラインでブログ記事のアイキャッチ画像が表示されずに困っている様子と、WebPとAVIFを使い分けて解決するイメージ図 ブログ運営
本サイトはプロモーションが含まれています

ブログの表示速度を改善するため、次世代画像フォーマットのWebPやAVIFを導入する方が増えています。しかし、「どの画像にどの形式を使うべきか？」という疑問を持つ方も多いのではないでしょうか。

本記事では、実際の検証結果に基づき、ブログで次世代画像フォーマットを使用する際の最もシンプルで効果的な戦略を解説します。

結論：最適な画像戦略→アイキャッチWebP、本文AVIF

先に結論をお伝えします。最もシンプルで効果的な戦略は以下の通りです。

【アイキャッチ画像】
WebP形式を使用
 ↓
・Xで確実に表示される（検証済み）
・JPEGより25-35%軽量
・OGP用画像を別途用意する手間が不要

【記事本文の画像】
AVIF形式を使用
 ↓
・WebPよりさらに50%軽量
・最大限の表示速度向上
・読者体験の最適化

なぜこの使い分けが最適なのか、順を追って解説していきます。

WebPとAVIFの基礎知識

まずは、それぞれの画像フォーマットの特徴を理解しましょう。

WebP（ウェッピー）

開発： Google（2010年リリース）

特徴：

  • JPEGやPNGより25-35%軽量
  • 可逆圧縮と非可逆圧縮の両方に対応
  • 透過背景にも対応
  • アニメーションにも対応

ブラウザ対応状況（2026年1月現在）：

  • Chrome: すべてのバージョンで対応
  • Firefox: すべての最新バージョンで対応
  • Safari: iOS 14以降、macOS Big Sur以降で対応
  • Edge: すべてのバージョンで対応

対応率： 主要ブラウザで95%以上

AVIF（エーブイアイエフ）

開発： Alliance for Open Media（2019年リリース）

特徴：

  • WebPよりさらに50%程度軽量（同画質比較）
  • HDR（ハイダイナミックレンジ）対応
  • 広色域対応
  • より高い圧縮効率

ブラウザ対応状況（2026年1月現在）：

  • Chrome: バージョン85以降（2020年8月〜）
  • Firefox: バージョン93以降（2021年10月〜）
  • Safari: iOS 16/macOS Ventura以降（2022年9月〜）
  • Edge: バージョン121以降（2024年1月〜）

対応率： 主要ブラウザで90%以上

圧縮率の比較

同じ画質で比較した場合のファイルサイズ：

JPEG (100%基準)      : 300KB
 ↓ 25-35%削減
WebP                 : 200KB
 ↓ さらに50%削減
AVIF                 : 100KB

AVIFは圧倒的な軽量化を実現できますが、後述する問題があります。

SNSでの表示問題：AVIFの落とし穴

次世代画像フォーマットを使う上で、最大の落とし穴はSNSでの表示問題です。

問題の発見

AVIFをブログのアイキャッチ画像に設定し、記事をX（旧Twitter）でシェアすると、以下の現象が起きます。

  • ✅ ブログ上では画像が正常に表示される
  • ❌ XでURLをシェアすると、アイキャッチ画像が表示されない（グレーの画像アイコンになる）
  • ✅ Chrome、Safari、Firefoxなど主要ブラウザでは問題なく閲覧できる

なぜこの問題が起きるのか？

この問題の根本原因は、ブラウザとSNSのOGPクローラー（リンク情報を取得するBot）で対応している画像形式が異なることにあります。

ブラウザの場合：

  • ユーザーが直接ウェブサイトにアクセス
  • 最新のブラウザは次世代画像フォーマットを広くサポート
  • WebP、AVIFも問題なく表示される

SNSシェアの場合：

  • SNSのクローラーがURLの情報を自動取得
  • クローラーは保守的な画像形式のみをサポート
  • AVIFは認識できない

2つの異なる経路

XやFacebookでは、画像の扱いに2つの異なる経路があります。

① 直接アップロードの場合：

ユーザーが画像をアップロード
 ↓
SNSの投稿システムが処理
 ↓
内部で互換性のある形式に自動変換
 ↓
✅ AVIF画像も正常に投稿できる

② リンクシェア（OGP）の場合：

ユーザーがURLをシェア
 ↓
クローラーがURLから画像情報を取得
 ↓
この処理では画像変換が行われない
 ↓
❌ AVIFは認識されず表示されない

つまり、アイキャッチ画像にAVIFを使うと、OGP用に別途JPEG/PNG画像を用意する必要があるということです。

実証結果：WebPはXで表示される

ここで重要な実証結果があります。

検証内容

アイキャッチ画像をWebP形式に設定し、XでURLをシェアしたところ：

結果：✅ 画像が正常に表示された

Xの公式対応状況

Xの公式ドキュメントによると、OGP画像としてサポートされている形式は：

  • ✅ JPEG（JPG）
  • ✅ PNG
  • ✅ WebP（公式にサポート）
  • ✅ GIF（静止画として）
  • ❌ AVIF（未対応）
  • ❌ SVG（未対応）

WebPは公式にサポートされており、実際の検証でも問題なく表示されることが確認されました。

これが意味すること

この検証結果により、以下のことが明らかになりました。

  1. アイキャッチにWebPを使えば、OGP用画像を別途用意する必要がない
  2. JPEGより軽量化できる上、SNSでも確実に表示される
  3. 運用がシンプルになる

なぜ「アイキャッチはWebP、本文はAVIF」が最適か

この戦略が最適である理由を、具体的に解説します。

理由1：運用がシンプル

従来の「アイキャッチもAVIF」戦略の問題点：

アイキャッチ画像をAVIFに設定
 ↓
XでシェアするとOGP画像が表示されない
 ↓
Cocoonの「SNS画像」に別途JPEG/PNGを設定
 ↓
画像を2つ管理する必要がある（手間）

推奨する「アイキャッチはWebP」戦略：

アイキャッチ画像をWebPに設定
 ↓
ブログでもXでも正常に表示される
 ↓
OGP用画像の設定は不要
 ↓
画像管理がシンプル（手間なし）

理由2：パフォーマンスも十分

アイキャッチをWebPにすることで失われるパフォーマンスは限定的です。

アイキャッチ画像（1枚）の場合：

JPEG (1200×630px) : 150KB
WebP             : 100KB ← 50KB削減
AVIF             :  50KB ← さらに50KB削減

確かにAVIFの方が軽量ですが、1枚あたり50KBの差です。

一方、記事本文には通常複数の画像があります。

記事本文の画像（5枚）の場合：

WebP使用時: 100KB × 5枚 = 500KB
AVIF使用時:  50KB × 5枚 = 250KB
削減量: 250KB

本文画像をAVIFにすることで得られる軽量化効果の方がはるかに大きいのです。

理由3：互換性を確保

WebPは次世代フォーマットの中で最も成熟しています。

対応SNS：

  • ✅ X（Twitter）- 公式サポート
  • ✅ Facebook – 実質的にサポート
  • ✅ LinkedIn – 2024年12月からサポート
  • ✅ Discord、Slack – サポート

ブラウザ対応率： 95%以上

一方、AVIFは：

  • ❌ ほとんどのSNSで未対応
  • ✅ ブラウザ対応率は90%以上

理由4：読者体験を最大化

この戦略により、すべてのユーザーに最適な体験を提供できます。

ブログ訪問者：

  • アイキャッチ：WebP（十分に軽量）
  • 本文画像：AVIF（最高レベルの軽量化）
  • → 高速な表示速度

SNS経由の訪問者：

  • X、Facebookなどでアイキャッチが確実に表示される
  • → クリック率の向上
  • → トラフィックの増加

戦略の全体像

【アイキャッチ画像】WebP
 ├─ SNSで確実に表示（拡散力を維持）
 ├─ JPEGより25-35%軽量（パフォーマンス向上）
 └─ OGP用画像不要（運用シンプル）

【記事本文の画像】AVIF
 ├─ WebPよりさらに50%軽量（最高レベルの軽量化）
 ├─ 複数枚で大きな効果（500KB→250KBなど）
 └─ SNS関係なし（表示速度だけ考慮）

具体的な実装方法

では、この戦略を実際にどう実装するか、具体的な方法を解説します。

ステップ1：画像の準備

アイキャッチ用：

  • WebP形式で用意
  • 推奨サイズ：1200×630px（X用）
  • ファイルサイズ：5MB以下

（ちなみに私はCocoonのアイキャッチ推奨サイズ1280×720pxにしています。だって、ブログ用とSNS用で分けるのめんどくさいんだもん！大は小を兼ねるってことで、少々崩れてもいいので、1280×720pxにしています。）

記事本文用：

  • AVIF形式で用意
  • サイズは用途に応じて最適化

ステップ2：WordPressでの設定

アイキャッチ画像の設定：

  1. 記事編集画面の右サイドバー「アイキャッチ画像」をクリック
  2. WebP形式の画像をアップロード
  3. 設定完了

記事本文の画像：

  1. 通常通り画像ブロックを追加
  2. AVIF形式の画像をアップロード
  3. 設定完了

これだけです。 OGP用の特別な設定は不要です。

ステップ3：画像変換ツールの活用

既存の画像をWebPやAVIFに変換する必要があります。世の中には「Squoosh」などのツールもありますが、「画像をサーバーにアップロードしたくない（プライバシー重視）」「枚数制限なしで一気に変換したい」という思いから、ブラウザだけで動く変換ツールを自作しました。

特徴：

  • サーバーへのアップロードなし（WebAssembly技術でPC内で完結）
  • ドラッグ＆ドロップでWebP/AVIFを一発作成
  • もちろん無料
  • iPhone写真（HEIC）も直接変換可能
  • テーマ別プリセット（Cocoon、SWELL、SANGOなど）完備

WebP変換ツール（アイキャッチ用）：

ブログ画像用 WebP変換無料ツール | HEIC対応・登録不要
/* --- デザインシステム v10.2 (青テーマ・Tool First・リアルタイムプレビュー) --- */.b...
today-is-the-first-day.com
2025.11.30
  • 高速処理が特徴
  • 大量のスクショや図解を一括変換するのに最適

AVIF変換ツール（記事本文用）：

【無料】画像一括AVIF変換ツール｜HEIC対応・ブログ用リサイズ・透かし
ブラウザだけでJPEG/PNG/HEICをAVIFに一括変換・圧縮。サーバー送信なしで安心。SWELL/Cocoon推奨サイズへのリサイズ、透かし合成、ファイル名変更も対応。ブログ画像の準備を劇的に時短する無料ツールです。
today-is-the-first-day.com
2025.12.24
  • 最高レベルの圧縮率
  • アイキャッチなど目立つ画像を極限まで軽くしたい場合に最適

この記事の検証も、すべてこれらのツールで作った画像で行っています。ぜひ使ってみてください。

WordPressプラグインでの自動変換について

「Converter for Media」などのプラグインを使えば、アップロード時に自動変換することも可能です。

ただし、多くのプラグインは画像の種類別に形式を指定できないため、アイキャッチと本文で異なる形式を使い分けたい場合は、アップロード前に手動で変換することをお勧めします。

ステップ4：確認方法

Xでの表示確認：

  1. 記事を公開
  2. Xの投稿画面にURLを貼り付け
  3. プレビューで画像が表示されることを確認

表示速度の確認：

  • PageSpeed Insights
  • GTmetrix
  • Lighthouse

で、実際にどれだけ高速化されたか確認できます。

各SNSの対応状況（2026年版）

主要SNSのWebP/AVIF対応状況をまとめます。

X（旧Twitter）

公式サポート形式：

  • JPEG、PNG、WebP、GIF

未対応：

  • AVIF、SVG

推奨サイズ：

  • 1200×675px（16:9）または1200×628px
  • ファイルサイズ：5MB以下

実証結果：

  • ✅ WebPは問題なく表示される（検証済み）

Facebook

公式サポート形式：

  • JPEG、PNG、GIF

実質的にサポート：

  • WebP（公式ドキュメントには記載なし）
  • AVIF（Facebookのみ、直接アップロードはJPEGに自動変換される）

推奨サイズ：

  • 1200×630px
  • ファイルサイズ：8MB以下

注意： FacebookはAVIFをある程度サポートしていますが、WhatsAppではAVIFの色が正しく表示されない問題が報告されています。

LinkedIn

サポート形式：

  • JPEG、PNG、GIF
  • WebP（2024年12月から公式サポート）

推奨サイズ：

  • 1200×627px

その他のSNS

Discord、Slack：

  • WebP：✅ サポート
  • AVIF：未確認

WhatsApp：

  • WebP：✅ サポート
  • AVIF：色が正しく表示されない報告あり

対応状況まとめ表

SNSJPEGPNGWebPAVIF
X (Twitter)✅✅✅❌
Facebook✅✅✅※△※
LinkedIn✅✅✅❌
Discord✅✅✅❓
Slack✅✅✅❓

※ 公式ドキュメントには記載なし
△ Facebookのみ部分的にサポート、WhatsAppは非推奨

よくある質問

Q1: 既存の記事のアイキャッチも全部WebPに変換すべきですか？

A: 優先度に応じて対応すれば十分です。

優先度高：

  • よくシェアされる人気記事
  • 新規に公開する記事
  • アクセス数の多い記事

優先度低：

  • ほとんどシェアされない記事
  • アーカイブ記事

完璧を目指す必要はありません。新規記事から適用し、余裕があれば過去記事を順次対応していけば良いでしょう。

Q2: 本文画像もすべてAVIFにすべきですか？

A: 写真や複雑な画像はAVIF、シンプルな図やロゴはPNGが適しています。

AVIFが適している：

  • 写真
  • 複雑なグラデーション
  • スクリーンショット

PNGが適している：

  • ロゴ
  • アイコン
  • 透過背景が必要な画像
  • テキスト主体の図

画像の性質に応じて使い分けましょう。

Q3: サーバー容量への影響は？

A: AVIFやWebPを使うことで、容量が削減されます。

変換前（すべてJPEG）：

アイキャッチ: 150KB × 100記事 = 15MB
本文画像: 200KB × 500枚 = 100MB
合計: 115MB

変換後（アイキャッチWebP、本文AVIF）：

アイキャッチ: 100KB × 100記事 = 10MB
本文画像: 100KB × 500枚 = 50MB
合計: 60MB

削減量：55MB（約48%削減）

Q4: 古いブラウザへの対応は？

A: WordPressや画像配信プラグインが自動的にフォールバックしてくれます。

HTMLの<picture>タグを使う場合：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明">
</picture>

このように記述すれば、ブラウザが自動的に対応している形式を選択します。

WordPressの場合：

  • 多くの画像最適化プラグインが自動的にフォールバック処理を行います
  • 特別な設定は不要な場合がほとんどです

Q5: AVIFが将来的に主流になったら戦略を変えるべき？

A: はい、SNSがAVIFに対応したら、すべてAVIFに統一できます。

現在（2026年）：

  • アイキャッチ：WebP
  • 本文：AVIF

将来（SNSがAVIF対応後）：

  • アイキャッチ：AVIF
  • 本文：AVIF

ただし、SNSの対応には2-3年はかかると予想されます。当面は現在の戦略が最適解です。

Q6: WebPで問題が起きた場合は？

A: 以下をチェックしてください。

  1. サーバーのContent-Typeヘッダー
    • WebP画像を配信する際、Content-Type: image/webpが必要
    • .htaccessやnginx設定を確認
  2. ファイルサイズ
    • Xの上限は5MB
    • 大きすぎる場合は圧縮
  3. 画像のURL
    • 絶対URLで指定されているか
    • HTTPSで配信されているか

それでも問題が解決しない場合は、そのアイキャッチのみJPEGにすることも選択肢です。

まとめ

推奨する画像戦略

┌─────────────────────┐
│ アイキャッチ画像       │
│   → WebP形式       　│
└─────────────────────┘
  ✅ SNSで確実に表示
  ✅ JPEGより25-35%軽量
  ✅ OGP設定不要でシンプル

┌─────────────────────┐
│ 記事本文の画像　　　　　│
│   → AVIF形式　　　　  │
└─────────────────────┘
  ✅ 最高レベルの軽量化
  ✅ 複数枚で大きな効果
  ✅ 表示速度を最大化

この戦略のメリット

  1. 運用がシンプル
    • OGP用画像を別途用意する必要なし
    • 画像管理が簡単
  2. パフォーマンスも良好
    • 全体として十分な軽量化
    • 表示速度の大幅向上
  3. 互換性を確保
    • すべての主要SNSで動作
    • トラブルが少ない
  4. 拡散力を維持
    • SNSで画像が確実に表示される
    • クリック率を維持

実装の優先順位

今すぐ実施：

  1. 新規記事のアイキャッチをWebPに
  2. 新規記事の本文画像をAVIFに

余裕があれば実施：

  1. 人気記事のアイキャッチをWebPに変換
  2. 過去記事の本文画像をAVIFに変換

今後の展望

短期的（1-2年）：

  • WebPは完全に主流化
  • AVIFのブラウザ対応率がさらに向上
  • 現在の戦略が最適解であり続ける

中長期的（3-5年）：

  • SNSがAVIFに対応し始める
  • すべてAVIFに統一できる可能性
  • その時点で戦略を再評価

最後に

次世代画像フォーマットは、ブログの表示速度を劇的に改善できる素晴らしい技術です。

しかし、「とにかく最新技術を使えば良い」というわけではありません。SNSでの拡散も考慮し、バランスの取れた戦略を選ぶことが重要です。

「アイキャッチはWebP、本文はAVIF」という戦略は、実証結果に基づいた、現時点で最もシンプルかつ効果的な解決策です。

ぜひ、あなたのブログでも試してみてください。表示速度の向上とSNS拡散力の両立を実感できるはずです。参考までに。それでは！

参考文献・情報源

公式ドキュメント

  1. X Developer Platform – Cards Markup
    • https://developer.x.com/en/docs/x-for-websites/cards/overview/markup
    • Xの公式Twitter Cards仕様書（WebPサポートを明記）
  2. Open Graph Protocol
    • https://ogp.me/
    • Open Graphプロトコルの公式仕様
  3. Can I Use – WebP
    • https://caniuse.com/webp
    • WebPのブラウザ対応状況（95%以上）
  4. Can I Use – AVIF
    • https://caniuse.com/avif
    • AVIFのブラウザ対応状況（90%以上）

技術情報・検証記事

  1. Ctrl Blog – “Can you use a WebP file as an Open Graph Protocol image?”
    • https://www.ctrl.blog/entry/webp-ogp.html
    • 各SNSのWebP/AVIF対応状況の詳細な検証
  2. joost.blog – “Can I safely use AVIF or WebP share images?”
    • https://joost.blog/use-avif-webp-share-images/
    • 2024年12月時点の最新対応状況（Yoast SEO創設者による検証）
  3. darekkay.com – “Open Graph images: Format compatibility across platforms”
    • https://darekkay.com/blog/open-graph-image-formats/
    • 実際のテスト結果に基づく各プラットフォームの対応状況
  4. WebKit Blog – “WebKit Features in Safari 16.0”
    • https://webkit.org/blog/13152/webkit-features-in-safari-16-0/
    • Safari 16でのAVIF対応に関する公式発表
  5. Wikipedia – AVIF
    • https://en.wikipedia.org/wiki/AVIF
    • AVIFの技術仕様と対応状況の包括的な情報
  6. Wikipedia – WebP
    • https://en.wikipedia.org/wiki/WebP
    • WebPの技術仕様と対応状況の包括的な情報

WordPress関連

  1. Rank Math – “Open Graph Meta Tags”
    • https://rankmath.com/kb/open-graph-meta-tags/
    • WordPressでのOGP設定の詳細ガイド

画像変換ツール

  1. WebP一括変換ツール（自作）
    • https://today-is-the-first-day.com/tools/blog-image-optimizer
    • ブラウザ完結型、プライバシー重視の無料ツール
  2. AVIF変換ツール（自作）
    • https://today-is-the-first-day.com/tools/avif-converter
    • WebAssembly技術を使用した高圧縮変換ツール

最終更新日： 2026年1月11日

検証環境：

  • WordPress 6.9以降
  • Cocoonテーマ
  • X (Twitter) OGP表示テスト実施済み

注意事項：

  • 本記事の情報は2026年1月11日時点のものです
  • 実際の検証結果に基づいた情報を提供していますが、環境によって結果が異なる場合があります
  • SNSやブラウザの対応状況は随時変更される可能性があります

スポンサーリンク

コメント