画像最適化チェッカー
URLを入力するだけでページ内の画像を一括検査し、ファイルサイズ・フォーマット・lazy loading・width/height属性をスコアリングします。
URLを入力するとページ内の画像を解析し、サイズ・フォーマット・lazy loading・width/height属性を検査します
URLを入力して画像の最適化状況をチェックしましょう
ファイルサイズ・次世代フォーマット・lazy loading・width/height属性を検査します
画像の最適化がなぜ重要か
Webページのデータ量の約50%は画像が占めており、画像の最適化はページ表示速度に直結します。 GoogleのCore Web Vitals（LCP: Largest Contentful Paint、CLS: Cumulative Layout Shift）のスコア改善には画像の最適化が不可欠です。
次世代フォーマット（WebP/AVIF）への変換、適切なサイズ指定、lazy loadingの設定により、 ページの読み込み時間を大幅に短縮し、ユーザー体験とSEOの両面で効果を発揮します。
検査項目
| 項目 | 影響 | 推奨 |
|---|---|---|
| ファイルサイズ | LCP（ページ表示速度） | 200KB以下。圧縮ツールやCDN画像最適化を活用 |
| 画像フォーマット | ファイルサイズ削減 | WebP/AVIFに変換。JPEG/PNGより30〜50%小さくなる |
| width/height属性 | CLS（レイアウトシフト防止） | imgタグにwidth/heightを明示してアスペクト比を確保 |
| lazy loading | 初期ロード時間の短縮 | ファーストビュー外の画像にloading="lazy"を設定 |
| alt属性 | SEO・アクセシビリティ | すべての情報画像にalt属性を設定 |
次世代画像フォーマット
| 形式 | 圧縮率 | ブラウザ対応 |
|---|---|---|
| WebP | JPEGより25〜35%小さい | 主要ブラウザすべて対応（IE以外） |
| AVIF | JPEGより50%小さい | Chrome, Firefox, Safari 16.4+対応 |
| JPEG | （基準） | すべてのブラウザ対応 |
| PNG | JPEGより大きい（可逆圧縮） | すべてのブラウザ対応。透過必要時に使用 |
画像最適化の実践手順
- フォーマット変換: JPEG/PNGをWebPに変換して30〜50%のファイルサイズ削減。画像フォーマット変換で一括変換可能
- サイズ調整: 表示サイズに合わせて画像をリサイズ。画像リサイズツールで適切な寸法に調整
- width/height属性の追加:
<img>タグにwidthとheightを明示してCLSを防止 - lazy loadingの設定: ファーストビュー外の画像に
loading="lazy"を追加。LCP画像には設定しない - alt属性の設定: すべての情報画像にalt属性を設定。alt属性チェッカーで一括確認可能
活用シーン
- PageSpeed Insights改善: 「次世代フォーマットでの画像の配信」「適切なサイズの画像」の監査対応。ページ速度チェッカーで改善効果を確認
- CLS改善: width/height属性が未設定の画像を特定し、レイアウトシフトを防止する
- ページ速度の最適化: ファイルサイズが大きい画像を特定し、圧縮・フォーマット変換の対象を決める
- Web制作の納品前チェック: クライアントへの納品前に画像最適化の状況をエビデンスとして提示する
このツールの使い方
- チェックしたいWebサイトのURLを入力して「チェック」ボタンを押します
- ページ内の画像タグが自動解析され、各画像の最適化状況が一覧表示されます
- 次世代フォーマット使用率・lazy loading率・width/height設定率がスコアとして表示されます
- フィルター機能で要改善の画像だけを絞り込み、CSV形式でエクスポートもできます
ツールの仕様・制限事項
- HTMLの最初の1MBまでを解析し、最大100個の画像タグを検出します
- ファイルサイズの取得は最初の30画像に対してHEADリクエストを送信します
- data: URIの埋め込み画像はスキップされます
- CSS背景画像（
background-image）は検出対象外です - リダイレクトは最大5回まで追従します
- レスポンスのタイムアウトは10秒（HTML取得）+ 8秒（画像サイズ取得）です
- 入力されたURLの情報はサーバーに保存されません
関連記事
よくある質問
- Q. WebPとAVIFのどちらを使うべきですか？
- WebPは主要ブラウザすべて（IE除く）で対応しており、JPEGより25〜35%小さくなります。AVIFはさらに高圧縮（JPEGの50%）ですが、Safari 16.4以降でないと非対応です。最大の互換性にはWebP、最大の圧縮率にはAVIFを選択し、<picture>タグでフォールバック設定するのが理想的です。
- Q. width/height属性がないとなぜ問題なのですか？
- width/height属性がない画像は、ブラウザが画像をダウンロードするまでサイズが確定せず、レイアウトが急に変わる「レイアウトシフト（CLS）」が発生します。CLS（Cumulative Layout Shift）はCore Web Vitalsの指標の1つで、SEOにも影響します。
- Q. ファーストビューの画像にもlazy loadingは必要ですか？
- いいえ。ファーストビュー（スクロールせずに見える範囲）の画像にはlazy loadingを設定しないでください。LCP（Largest Contentful Paint）の画像にlazy loadingを設定すると、かえって表示が遅くなります。このツールでは最初の2画像はlazy loading未設定でも警告しません。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。