HTML/CSSの入門学習では、画像といえば「とりあえずpng」か「とりあえずjpg」が当たり前でした。多くの学習教材でもpngが中心で、webpはほぼ登場しません。

でも実務に入ってみると、話が変わってきます。PageSpeed Insightsで「次世代フォーマットの画像を使ってください」という指摘が出て、「あれ、webpって何？」となった方も多いのではないでしょうか。

この記事を読めば、webpをサイトに正しく実装できるようになります。<picture>タグを使った実装コードもそのまま使える形で紹介するので、今日から実務で使い始めることができます。

この記事で分かること
  • jpg・png・webpそれぞれの特徴と、場面ごとの使い分け基準が分かる
  • <picture>タグを使ったwebpの実装方法を理解できる
  • 実務で画像形式を選ぶ判断基準と、最適化のポイントを押さえられる
目次
  1. なぜwebpが選ばれるのか？各形式の特徴と比較
  2. 実務での画像形式の使い方｜webpを基本に、使えない場面だけ他を使う
  3. webpがSEOに効く理由｜PageSpeed Insightsと表示速度の関係
  4. <picture>タグでwebpを実装する｜実務で使うための核心
  5. webp実装をさらに完成させるその他のポイント
  6. よくある質問（FAQ）
  7. まとめ

なぜwebpが選ばれるのか？各形式の特徴と比較

まず各形式の特徴を整理した上で、「なぜ今webpが主流になりつつあるのか」を理解しておきましょう。

jpg（jpeg）

写真やグラデーションのある画像に向いている形式です。圧縮率が高く、ファイルサイズを小さくしやすいのが特徴です。

ただし、jpgは「不可逆圧縮」という仕組みを使っているため、圧縮するたびに画質が少しずつ劣化します。また、透過（背景を透明にする）には対応していません。

png

透過に対応している形式です。ロゴやイラスト、テキストを含む画像など、鮮明さが求められる用途に向いています。

jpgと違って「可逆圧縮」のため、画質の劣化がありません。その分、ファイルサイズがjpgより大きくなりやすい点には注意が必要です。

コーディング学習ではpngを使うことが多く、透過対応で汎用性が高い一方、ファイルサイズが大きくなりがちなのが実務での課題になります。

webp — 今後の標準はこれ

Googleが開発した次世代フォーマットです。jpgとpngの両方の良いところを兼ね備えており、透過にも対応しています。

最大の特徴は軽量さです。jpgに比べて約25〜35%、pngに比べてさらに高い圧縮率でファイルサイズを削減できます。主要ブラウザ（Chrome、Firefox、Safari、Edge）での対応も進んでおり、現在の対応率は96%以上。実務でwebpを採用する理由は十分にあります。

gif・svg

gifはアニメーションに対応しているフォーマットです。ただし色数の制限があるため、現代では簡単なアニメーションはCSSやJavaScriptで実装するケースも増えています。

svgはベクター形式で、どのサイズに拡大・縮小しても鮮明さを保てます。アイコンやロゴの実装に特に向いています。

比較早見表

形式ファイルサイズ透過アニメーションブラウザ対応主な用途
jpg小〜中非対応非対応全対応写真・バナー
png中〜大対応非対応全対応ロゴ・イラスト・透過が必要な画像
webp小対応対応主要ブラウザ対応（96%+）写真・ロゴ全般（jpgやpngの代替として）
gif中部分対応対応全対応簡単なアニメーション
svg非常に小対応対応全対応アイコン・ロゴ・図解

形式の特徴が整理できたところで、「実際にどれをどう使えばいいか」を確認しましょう。

実務での画像形式の使い方｜webpを基本に、使えない場面だけ他を使う

「とりあえずpng」という時代から、実務では「とりあえずwebp」という考え方へ移行しつつあります。基本的にはwebpを使い、webpが使えない・不向きな場面だけ他の形式を選ぶ、というスタンスが実践的です。

写真・メイン画像・バナー → webp（非対応ブラウザの代替にjpg）

写真や背景画像など、サイズが大きくなりがちな画像には迷わずwebpを使います。古いブラウザへの対応は、後述する<picture>タグで行います。

ロゴ・アイコン → svg を優先、次点でwebp（透過あり）

ロゴはサイズを問わず鮮明に表示したいため、svgが最適です。svgが使えない場合はwebp（透過対応）、それでも難しければpngを選びましょう。

OGP・SNSシェア用画像 → jpg

SNSプラットフォームはwebpに対応していない場合があります。互換性の高いjpgを選ぶのが安全です。これは「webpが使えない場面」の代表例です。

アニメーション → gifまたはCSSアニメーション

ループするアニメーション画像が必要な場合はgifを使います。ただし表現の幅を広げたい場合は、CSSやJavaScriptでのアニメーション実装も検討してみてください。

「webpを使いたいけれど、古いブラウザでも正しく表示したい」——その答えが<picture>タグです。

webpがSEOに効く理由｜PageSpeed Insightsと表示速度の関係

webpを採用すべき理由は「軽いから」だけではありません。サイトのSEO評価とも密接に関係しています。

PageSpeed Insightsの「次世代フォーマット」指摘を解消できる

Googleが提供するPageSpeed Insightsで「次世代フォーマットの画像を使ってください（next-gen images）」という指摘を見たことがある方は多いのではないでしょうか。これは、jpgやpngではなく、webp・avifといった新しいフォーマットに変換することを推奨しているメッセージです。

webpに変換することで、この指摘を直接解消できます。

Core Web VitalsのLCPを改善できる

Googleの検索順位を左右する指標のひとつに「Core Web Vitals（コアウェブバイタル）」があります。その中の「LCP（Largest Contentful Paint）」は、ページ内で最も大きな画像やテキストが表示されるまでの時間を測るものです。

ファーストビューに大きな画像を使っている場合、その画像のファイルサイズがLCPに直接影響します。webpでファイルサイズを削減することで、LCPの改善につながりやすくなります。

ファイルサイズの削減効果

同じ品質の画像をwebpに変換すると、jpgに比べて約25〜35%、pngに比べてさらに高い圧縮率でサイズを減らせます。画像が多いサイトほど、この効果は大きく現れます。

「なんとなく使っていた画像形式」を見直すだけで、パフォーマンスが改善されることも多いです。ぜひ取り入れてみてください。

<picture>タグでwebpを実装する｜実務で使うための核心

ここが、この記事の一番重要なセクションです。

<picture>タグを使えば、「webp対応ブラウザにはwebpを、非対応ブラウザにはpngやjpgを」と自動で出し分けられます。これを覚えておくことで、「webpを使いたいけれど対応ブラウザが心配」という問題を完全に解決できます。

<picture>タグの基本構文

<!-- webp対応ブラウザにはwebpを、非対応にはpngを表示 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="画像の説明" width="800" height="600">
</picture>

ポイントをまとめます。

  • <source> の type="image/webp" でwebpを優先して読み込む
  • <img> はフォールバック（代替）として機能する。webp非対応ブラウザでは<img>のsrcが読み込まれる
  • alt 属性は <img> 側にのみ記述する（<source>には不要）
  • width と height は必ず両方指定する（CLS対策のため。後述）

この構成で、webp対応ブラウザにはwebpを、そうでないブラウザにはpngを自動的に届けることができます。

レスポンシブ対応と組み合わせる

<picture>タグはレスポンシブ画像との組み合わせにも対応しています。media 属性でブレークポイントを指定し、画面幅に応じて最適な画像を出し分けることができます。

<!-- レスポンシブ対応 + webp最適化を組み合わせた例 -->
<picture>
  <!-- 画面幅768px以上にはPC用webp -->
  <source media="(min-width: 768px)" srcset="image-pc.webp" type="image/webp">
  <!-- 画面幅768px以上の非対応ブラウザ向けpng -->
  <source media="(min-width: 768px)" srcset="image-pc.png">
  <!-- SP用webp -->
  <source srcset="image-sp.webp" type="image/webp">
  <!-- SP用フォールバック -->
  <img src="image-sp.png" alt="画像の説明" width="375" height="250">
</picture>

<source> タグは上から順に評価されます。条件に合う最初の<source>が使われるので、記述の順番が重要です。PCとSPで画像サイズや構図を切り替えたい場合に、このパターンがよく使われます。

CSSでのwebp背景画像対応（補足）

<picture>タグはHTMLの<img>要素に適用できますが、CSSの background-image では使えません。背景画像にwebpを使いたい場合は、別のアプローチが必要です。

image-set() を使う方法（モダンブラウザ推奨）

CSS の image-set() 関数を使うと、ブラウザが対応しているフォーマットを自動で選んで表示してくれます。HTMLの <picture> タグに近い発想で、「webpが使えるブラウザにはwebpを、使えないブラウザにはpngを」という出し分けをCSS単体で実現できます。

.hero {
  background: image-set(
    url('../img/hero.webp') type("image/webp"),
    url('../img/hero.png') type("image/png")
  ) no-repeat top center / cover;
}

コードのポイントを整理します。

  • image-set()：複数の画像候補を渡すことで、ブラウザが対応フォーマットを自動で選択してくれます
  • type("image/webp")：type() でフォーマットを明示することで、ブラウザが何の形式かを判断できます。上に書いたフォーマットほど優先されるため、webpを先に指定しておきます
  • フォールバックの順番：webpの次にpngを記述しておくことで、webp非対応の環境でもpngが表示されます

Chrome・Firefox・Safari・Edge といったモダンブラウザはいずれも image-set() に対応しているため、多くの実務環境でこの書き方を採用できます。

IE非対応について

image-set() はIE（Internet Explorer）には対応していません。IE対応が必要な場合は、JavaScriptでwebp対応を検出してHTMLクラスを切り替える「JSクラス方式」と呼ばれる手法が使われることがあります。ただし、IE11のサポートは2022年6月に終了しており、現在の案件でIE対応が求められるケースは少なくなっています。

<picture>タグを使いこなせると、画像の最適化の幅が大きく広がります。続いて、実装時に押さえておきたいその他のポイントも確認しておきましょう。

webp実装をさらに完成させるその他のポイント

<picture>タグ以外にも、画像の実装で気をつけたい点がいくつかあります。コードを書くときに意識するだけで、ページのパフォーマンスやSEO評価が改善されます。

width・heightを必ず指定する（CLS対策）

width と height を指定しておくと、ブラウザが画像を読み込む前から表示領域を確保できます。これにより、画像読み込み後にレイアウトがずれる「CLS（Cumulative Layout Shift）」を防ぐことができます。CLSもCore Web Vitalsの評価指標のひとつです。

loading=”lazy” で遅延読み込みを設定する

ファーストビューより下に配置される画像は loading="lazy" を指定しておくと、ページを開いた時点では読み込まれず、スクロールして表示が必要になったタイミングで読み込まれます。初期表示の速度改善につながります。

alt属性のSEO的な書き方

alt 属性は、画像が表示されなかった場合の代替テキストです。SEOの観点でも、画像の内容を正確に伝える文章を記述することが大切です。空にするとアクセシビリティの問題になるため、必ず記述するようにしましょう。ただし、過度にキーワードを詰め込むのは逆効果です。

ファイル名の付け方

ファイル名は英数字とハイフンで記述するのがおすすめです（例: hero-image.webp）。日本語や全角文字が含まれるとURLエンコードされて読みにくくなる場合があります。また、内容が伝わるファイル名にしておくとSEO的にも有利です。

webpへの変換ツールを活用する

webpへの変換には、以下のツールが便利です。

  • Squoosh（squoosh.app）：Googleが提供するブラウザ上で動く圧縮ツール。webp変換も対応。直感的に操作できておすすめです
  • TinyPNG（tinypng.com）：jpgやpngの圧縮に特化。ドラッグ＆ドロップで手軽に使えます

推奨コードの完成形

実装時にまとめてチェックできるよう、推奨のコード例を載せておきます。

<!-- 推奨: webp + フォールバック + width/height指定 + lazy loading + alt設定済み -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img
    src="hero.jpg"
    alt="フロントエンド開発の作業風景"
    width="1200"
    height="630"
    loading="lazy"
  >
</picture>

これらを意識するだけで、実装の品質が一段上がります。ぜひ次のコーディングから取り入れてみてください。

よくある質問（FAQ）

webpに対応していないブラウザへの対応はどうすればいいですか？

<picture> タグを使うと、対応ブラウザにはwebpを、非対応ブラウザにはpngやjpgを自動で出し分けられます。IEを含む古いブラウザへのフォールバックは <img> タグで指定するのがおすすめです。現在の主要ブラウザのwebp対応率は96%以上なので、ほとんどのケースでカバーできます。

pngのままでも問題ないですか？webpに変換しないといけませんか？

必須ではありませんが、パフォーマンスの観点からはwebpへの変換がおすすめです。pngはファイルサイズが大きくなりやすく、PageSpeed Insightsで「次世代フォーマットの使用」を指摘されることがあります。ブラウザ対応の懸念があれば <picture> タグでwebpとpngを両方用意する方法が取れます。

<picture> タグとCSSの background-image、どちらを優先すべきですか？

HTMLの <img> として表示する画像には <picture> タグを、背景として使う画像にはCSSの background-image を使うのが基本です。両者は役割が異なるため「どちらを優先する」というより、用途に応じて使い分けるかたちになります。背景画像のwebp対応は、現代的な開発であれば直接 url('bg.webp') と指定するだけで多くのブラウザに対応できます。

画像圧縮はどのタイミングで行うのがいいですか？

コーディング作業に入る前、素材を受け取った段階で変換・圧縮しておくとスムーズです。Squooshなどのツールを使い、「素材受領→webp変換→圧縮→実装」の流れをルーティン化しておくと作業効率が上がります。WordPressを使っている場合は、アップロード後にプラグインで一括変換する方法も取れます。

SVGはどんな場面で使うのがいいですか？

アイコンやロゴのように、さまざまなサイズで表示する画像にSVGがおすすめです。ベクター形式なので拡大・縮小しても鮮明さを保てます。ファイルサイズも軽量なことが多く、アイコンフォントの代替としても活用されています。写真やグラデーションのある複雑な画像にはSVGは向かないため、そちらはwebpやjpgを選ぶとよいでしょう。

まとめ

この記事では、webpを中心に据えた画像形式の使い方と、<picture>タグを使った実装方法を解説しました。

  • webpが今の実務での基本形式
  • jpg・pngはwebpが使えない場面のために残しておく
  • <picture>タグを使えば、webp対応ブラウザには軽量なwebpを、非対応ブラウザにはjpg/pngを自動で出し分けられる
  • Squooshでwebpに変換するフローを実務に組み込むと、画像最適化がルーティン化できる

学習から実務への移行という文脈で、pngが中心だった考え方から「webpをベースに、使えない場面だけ他の形式を選ぶ」という考え方にシフトしていきます。<picture>タグの基本構文を一度覚えてしまえば、あとはコピペして使い回せます。ぜひ今日から試してみてください。