---
title: "画像サイズパラメータ"
slug: "the-image-size-parameters"
abstract: "レスポンシブ画像に使える画像サイズパラメータの参考ドキュメント"
---
# 画像サイズパラメータ

React、Angular、Vue.js、React Nativeアプリケーション向けにJSSが提供するJSS NextImageまたはImageコンポーネントを使用する場合、画像リサイズパラメータをコンポーネントに設定できます。

一部の画像サイズパラメータはサイズ表示など、画像の側面に影響を与えます。その他は言語、バージョン、データベース、キャッシュ機能など、あらゆるメディアタイプに適用されます。

これらはHTML img要素のsrcset属性を設定するか、画像ソースURLにクエリ文字列パラメータとして付加するために使われます。

> !重要JSSはメディアURLのセキュリティハッシュをサポートしていないため、[これらのパラメータセットはサーバー上でホワイトリスト化](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/media-handler.html)する必要があります。

以下の表は、サポートされるパラメータを示しています:

キー

概要

w

幅はピクセル単位です。

h

高さ(ピクセル単位)。

mw

最大幅はピクセル単位で。

mh

ピクセル単位の最大高さ。

la

言語(デフォルトは文脈言語です)。

vs

バージョン(デフォルトで最新バージョン)。

db

データベース名(デフォルトはコンテキストデータベース)。

bc

背景色(デフォルトは黒)。

as

伸縮(as=1)を許容します。

sc

浮動小数点数(sc=.25 = 25%)でスケールします。

thn

サムネイル(thn=1)。

dmc

メディアキャッシュ(取得と保存の両方)を無効にします(dmc=1)。

## 例

以下の例は、さまざまなフレームワークでimageParamsプロパティをどのように活用できるかを示しています。

### ReactとNext.js

JSS React/Next.jsアプリケーションでは、Imageコンポーネントが使われています。

<Image
 field={props.fields.sample2}
 srcSet={{ mw: 300 }, { mw: 100 }}
 sizes="(min-width: 960px) 300px, 100px"
 className="img-fluid"
/>

JSS Next.jsアプリケーションでは、NextImageコンポーネントも使用できます。画像サイズパラメータを提供したい場合は、unoptimizedプロパティをtrueに設定する必要があります。例えば:

<NextImage
  field={props.fields.image}
  unoptimized={true}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"/>

### Vue.js

JSS Vue.js申請の場合:

<sc-image
 :media="fields.sample2"
 :srcSet="{ mw: 300 }, { mw: 100 }"
 sizes="(min-width: 960px) 300px, 100px"
 class="img-fluid"
/>

### 角

JSS Angularアプリケーションでは、パラメータを使って画像のsrcset属性を設定できます:

<img \*scImage="rendering.fields.sample2; attrs: srcSetImageAttributes"
 sizes="(min-width: 960px) 300px, 100px"
 class="img-fluid"  />

ここで、srcSetImageAttributesオブジェクトの構造は次の通りです:

srcSetImageAttributes = {
    srcSet: 
      { mw: 300 },
      { mw: 100 }
    
  };

また、画像サイズパラメータをメディアURLに付加するURLパラメータとして使うこともできます:

<img \*scImage="rendering.fields.sample2; editable: false; urlParams: scaledImageParams"
 height="50"
 width="94" />

ここで、scaledImageParamsオブジェクトの構造は次の通りです:

scaledImageParams = {
    mw: 100,
    mh: 50,
 };