記事
サイトのメディアを速度と Core Web Vitals のために最適化する
画像と動画は通常、ウェブページの総容量の60～80パーセントを占めます。これを正しく扱うことが、読み込み速度、Core Web Vitals のスコア、検索順位に対してできる最も効果の高い一手です。良い知らせは、どれも専用ソフトやサーバーを必要とせず、ファイルが端末を離れる必要もないことです。
何よりもまず正しい形式を選ぶ
形式の選択は、どんな品質スライダーよりも重要です。ウェブページの写真には WebP が適した既定値です。同じ見た目の品質で JPEG より25～35パーセント小さく、現代のあらゆるブラウザが対応しています。AVIF はさらに進んで JPEG より最大50パーセント優れた圧縮をしますが、エンコードが遅くなります。一度だけ圧縮するヒーロー画像や商品写真には AVIF を、バッチ処理するものや素早く必要なものには WebP を使いましょう。PNG は可逆の精度や透過背景が必要な場合にのみ向いています。ロゴ、アイコン、イラストには SVG が唯一の理にかなった選択肢です。あらゆるサイズに拡大縮小でき、ラスター化した同等品が数百キロバイトになるところを数キロバイトで済むことも多いからです。
見た目の画質を落とさずに画像を圧縮する
まずは実際の表示寸法にリサイズしましょう。横1280ピクセルで表示されるヒーロー画像に4000ピクセル分のデータは要りません。先にリサイズし、その後で圧縮します。写真では WebP や JPEG の品質80が、一般的な閲覧者が違いに気づき始める現実的な下限なので、75～85を狙い、公開前に最大ズームで出力を確認しましょう。文字や単色のベタ塗りを含むグラフィックには、非可逆形式がにじませてしまう鋭さを PNG 可逆や SVG が保ちます。このサイトの画像圧縮ツールはこれらすべての形式を扱い、完全にブラウザ内で動作し、専用のデスクトップツールと同じアルゴリズムを適用します。
動画をアップロードせずにウェブ向けに変換する
背景ループや埋め込み動画は、ウェブメディアの最適化が見落とされがちな場所です。H.264 の MP4 はどこでも再生できますが、VP9 の WebM は同じ品質で20～40パーセント小さく、これは回線が限られたモバイル利用者にとって重要です。現実的な進め方は、一度 WebM に変換し、video 要素で優先ソースとして配信し、MP4 をフォールバックとして残すことです。ここの動画コンバーターは WebAssembly にコンパイルした FFmpeg を使います。変換はブラウザ内で実行され、何もアップロードされず、端末に十分なメモリがあればどんなサイズのファイルでも扱えます。インラインの背景動画には、エンコード前に無駄な秒を切り落とす動画トリマーも検討しましょう。再生時間こそファイルサイズを最も左右する要因です。
インラインのアセット: base64 と SVG
ごく小さな画像、アイコン、ファビコンを base64 文字列として HTML や CSS に直接埋め込むと、アセットごとに1往復のネットワーク通信を省けます。これはロゴのスプライトや読み込みインジケーターのように、すべてのページに現れる約2KB未満のアセットに向いています。base64 はバイナリより33パーセント大きくエンコードされ、ブラウザはファイル参照はキャッシュしてもインラインデータは独立してキャッシュしないため、より大きなアセットは別ファイルのままにすべきです。SVG 最適化ツールは、書き出された SVG から見た目の出力に触れずにエディター由来の不要な記述を取り除きます。画像から base64 への変換ツールは、貼り付ければすぐ使えるデータ URI をブラウザ内で生成します。
この記事で紹介するツール
よくある質問
画像の圧縮は検索順位に影響しますか？
Google は Core Web Vitals を順位付けのシグナルとして使っており、Largest Contentful Paint はほとんどの場合、画像か動画のポスターです。ヒーロー画像が1秒未満で読み込まれるページは、3秒かかるページより良いスコアになります。圧縮と正しい形式はこの指標に直接影響するので、画像の最適化には測定可能な SEO 効果があります。効果が最も大きいのはモバイルで、回線が遅く、重い画像のペナルティも大きくなります。
ウェブサービスではなくローカルでメディアを処理する理由は？
ほとんどのオンラインメディアツールは、ファイルをリモートサーバーにアップロードする必要があり、時間がかかり、帯域を消費し、自分の管理外のインフラにファイルのコピーが存在することを意味します。このサイトのツールは完全にブラウザ内で動作します。画像も動画も端末上で処理され、出力は直接ダウンロードされます。アカウントもアップロードの待ち時間もなく、ファイルに関するものがサーバーに送られることは一切ありません。