Frontend Academy · レッスン

画像の最適化：遅延読み込みと WebP 形式

画像に loading=lazy を追加し、最新の WebP と AVIF 形式を配信し、srcset と sizes でレスポンシブ画像を使い、レイアウトシフトを防ぐため明示的な幅と高さを設定します。

「画像の最適化：遅延読み込みと WebP 形式」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

画像がページ容量の大部分を占める

Webページの容量の中央値は約2MBで、そのおよそ半分を画像が占めます。画像の最適化は、パフォーマンスに最も大きな効果をもたらす作業です。

最新の形式：WebPとAVIF

WebPは、同等の品質のJPEGより25～35%小さく、すべての最新ブラウザーでサポートされています。AVIFはさらに小さくできます（50%削減）が、エンコードに時間がかかります。両方をフォールバック付きで使用します。

picture要素

<picture>を使い、対応していればAVIF、次にWebP、最後のフォールバックとしてJPEGを配信します。

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

ネイティブの遅延読み込み

スクロールせずに見えない位置にある画像にはloading="lazy"を追加します。ブラウザーが画像がビューポートに近づくまで読み込みを遅延するため、JavaScriptは必要ありません。

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

srcsetとsizesによるレスポンシブ画像

小さな画面には小さな画像を配信します。srcsetには幅とともに候補画像を列挙し、sizesでは各ブレークポイントで画像が表示される幅をブラウザーに伝えます。

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

widthとheightを明示的に設定する理由

ブラウザーはwidth／height属性に基づいてスペースを確保するため、画像の到着時にレイアウトがシフトするのを防げます。最新のブラウザーは、これらの属性からアスペクト比を自動的に計算します。

decoding="async"

decoding="async"を追加すると、ブラウザーがメインスレッド以外で画像をデコードできるようになり、メインスレッドが他のコンテンツを描画できるようになります。

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

画像CDN

画像CDN（Cloudinary、imgix、Vercel Image Optimization、Cloudflare Images）は、画像のサイズ変更、WebP／AVIFへの変換、圧縮、エッジキャッシュからの配信をオンザフライで行います。

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Next.js Imageコンポーネント

Next.jsの<Image>は、レスポンシブなsrcset、WebP変換、遅延読み込み、ぼかしプレースホルダーを標準で処理します。

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

JPEGとPNGの圧縮

WebPに切り替えられない場合でも、少なくとも圧縮しましょう。単発の画像にはSquoosh（squoosh.app）、一括処理にはImageOptim、ビルドスクリプトにはsharpを使用します。

アイコンとロゴにはSVGを使う

アイコン、ロゴ、その他のベクターアートにはSVGを使用します。SVGはどのサイズにもきれいに拡大縮小でき、非常に小さく、CSSでスタイルを設定できます。小さなSVGはインライン化して、追加のHTTPリクエストを避けます。

クイックチェック

画像がビューポートに近づくまで読み込みを遅延するようブラウザーに伝えるHTML属性はどれですか？

まとめ：画像の最適化

picture要素を使って最新の形式（AVIF、WebP）を配信します。スクロールせずに見えない位置にはloading="lazy"、ヒーロー画像にはfetchpriority="high"を追加します。明示的なwidth／heightを設定してCLSを防ぎます。レスポンシブ画像にはsrcset／sizesを使用します。画像CDNが変換を自動化します。Next.js Imageがすべてを処理します。アイコンにはSVGを使用します。

よくある質問

「画像の最適化：遅延読み込みと WebP 形式」レッスンは無料ですか？

はい。「画像の最適化：遅延読み込みと WebP 形式」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「画像の最適化：遅延読み込みと WebP 形式」で何を学びますか？

画像に loading=lazy を追加し、最新の WebP と AVIF 形式を配信し、srcset と sizes でレスポンシブ画像を使い、レイアウトシフトを防ぐため明示的な幅と高さを設定します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「画像の最適化：遅延読み込みと WebP 形式」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る