メインコンテンツへスキップ

ドキュメント

イメージ

遅延読み込み、レスポンシブイメージ、およびさまざまなイメージソースで背景イメージを使用します

イメージコンポーネントは、`<img>` 要素のブラウザ機能をエミュレートしますが、背景イメージ用です。これには、`loading="lazy"`、`srcset`、`sizes` 属性、および `<picture>` 要素の `<source>` 要素が含まれます。これにより、ページの読み込み時間が短縮され、ビューポートに入るときにのみ背景イメージが読み込まれるため、トラフィックが削減されます。最適化された背景イメージは、さまざまなデバイスの幅と高解像度（Retina）ディスプレイに対応するように配信されます。

使用方法

このコンポーネントを適用するには、`uk-img` と、背景イメージのイメージパスを含む `data-src` 属性を、`div` またはその他の要素に追加します。デフォルトでは、背景イメージは、スクロール時にビューポートに入ると遅延読み込みされます。

<div data-src="" uk-img>…</div>

  • 背景イメージ

  • <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=650&h=433&q=80" uk-img>
  <h1>Background Image</h1>
</div>

即時読み込み

最初の表示ビューポートで背景イメージの遅延読み込みを回避しながら、このコンポーネントの他の機能を使用するには、`uk-img` 属性に `loading="eager"` パラメータを追加します。

<div data-src="" uk-img="loading: eager">…</div>

  • 背景イメージ

  • <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=650&h=433&q=80" uk-img="loading: eager">
  <h1>Background Image</h1>
</div>

srcset

背景イメージに `srcset` 機能を使用するには、`data-srcset` 属性を追加するだけです。必要に応じて、`sizes` 属性をプレフィックスなしで追加します。

<div data-src="" data-srcset="" sizes="" uk-img>…</div>

  • 背景イメージ

  • <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover"
     data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>

ピクチャソース

`<source>` 要素を含む `<picture>` 要素と同様に、異なるイメージソースを使用するには、`srcset`、`media`、および `type` パラメータを含む `source` 属性を追加します。

<div sources="srcset: ____; media: ____" data-src="" uk-img>…</div>

<div sources="srcset: ____; type: ____" data-src="" uk-img>…</div>

  • 背景イメージ

  • <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=650&h=433&q=80; media: (min-width: 1200px)"
     data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=650&h=433&q=80"
     uk-img>
    <h1>Background Image</h1>
</div>

複数のイメージソースと、`srcset` を使用して各ソースの複数の解像度を提供できます。

<div sources="srcset: ____; media: ____" data-src="" data-srcset="" sizes="" uk-img>…</div>

  • 背景イメージ

  • <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=650&h=433&q=80 650w,
                      https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1300&h=866&q=80 1300w;
              media: (min-width: 1200px)"
     data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>

複数のソースは、JSON構文を使用して定義できます。

[
    {
        "srcset": "____",
        "media": "____"
    },
    {
        "srcset": "____",
        "type": "____"
    }
]

JSONはHTMLエンコードする必要があります。

<div sources="[{&quot;type&quot;: &quot;____&quot;,
                &quot;srcset&quot;: &quot;____&quot;
               },
               {&quot;type&quot;: &quot;____&quot;,
                &quot;srcset&quot;: &quot;____&quot;
               }]"
     data-src="" uk-img>…</div>

この例では、*WebP* や *AVIF* などの代替イメージ形式を提供します。

  • 背景イメージ

  • <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover"
     sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
                &quot;type&quot;: &quot;image\/avif&quot;
                },
                {&quot;srcset&quot;: &quot;images/image-type.webp&quot;,
                &quot;type&quot;: &quot;image\/webp&quot;
                }]"
        data-src="images/image-type.jpg"
        uk-img>
    <h1>Background Image</h1>
</div>

コンポーネントオプション

これらのオプションはすべて、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
dataSrc 文字列 イメージの `src` 属性。
sources 文字列 イメージのソース。このオプションは、背景イメージでのみ使用されます。ソース属性は、単一のソースの場合は `key: value;` 形式で、複数のソースの場合は JSON 形式で渡されます。
loading 文字列 lazy 遅延/即時読み込みを有効にします。最初の表示ビューポート内のイメージの場合は、`eager` に設定します。
margin 文字列 50% イメージとの交差を計算する前に、マージンがビューポートの境界ボックスに追加されます。値はpxまたは％単位である必要があります。
target 文字列 false イメージとの交差を計算するために境界ボックスが使用されるターゲットのリスト。デフォルトはイメージ自体です。

`dataSrc` は*プライマリ*オプションであり、属性値にそれが唯一のオプションである場合は、そのキーを省略できます。

JavaScript

JavaScript コンポーネントの詳細はこちら。

初期化

UIkit.img(element, options);

注意 イメージコンポーネントは、既に読み込まれたイメージの記録をセッションストレージに保持します。それが、イメージが既にキャッシュされているかどうかを判断する方法です。キャッシュされたイメージは、レンダリングのちらつきを防ぐために、遅延読み込みメカニズムなしですぐに読み込まれます。イメージコンポーネントをテストする前に、ブラウザのセッションストレージからこれらの記録をクリアしてください。