始める
デモソースの使い方

デモソースの使い方

imgixデモソースは、新しいユーザーが最初のストレージソース(Amazon S3バケット、Google Cloud Storageなど)を接続する前に、製品の主要な画像レンダリングパラメータをテストすることを可能にします。

デモソースへのアクセス

アカウントを作成すると、imgixダッシュボードの「アセット」タブをクリックするか、こちら (opens in a new tab)をクリックしてデモソースにアクセスできます。

デモソース

プリロードされた画像アセットの探索

デモソース内には、imgixのレンダリングパラメータを使用して変換する準備ができたプリロードされた画像アセットのコレクションがあります。これらの画像は次の2つの方法で編集できます:

  • 画像編集インターフェースを介して
  • 画像URLを直接変更することによって

画像編集インターフェースの使用

画像編集インターフェースを使用すると、プラットフォーム内で簡単に画像を変更および強化できます。

画像編集モードに入る

  • 写真をダブルクリックします。
  • 右側のパネルに表示される「編集」タブをクリックします。

編集タブ

編集タブには、直接画像に適用できるimgixの主要なパラメータがいくつか表示されます。

画像編集によるimgixパラメータの適用

画像エディターでimgixパラメータを利用して、画像を簡単にカスタマイズおよび強化します。

アスペクト比を変更して画像サイズを編集する

オリジナルの写真

アスペクト比を使用する前の画像例

アスペクト比を1:1に変更する

アスペクト比を使用した後の画像例

ファイル形式の変更

ドロップダウンメニューからfm (opens in a new tab)(フォーマット)パラメータのファイル形式を選択します。画像のファイルサイズ情報を確認して、各ファイル形式が画像のサイズにどのように影響するかを確認できます。

フォーマットパラメータを使用した後の画像例

‘auto’パラメータの適用

画像の焦点のトリミング

focal point crop (opens in a new tab)機能は、画像のトリミング時に関心のあるポイントを指定することを可能にします。水平(fp-x)、垂直(fp-y)、およびズーム(fp-z)の値を指定します。

例:子犬全体をフレーム内に収めた1:1のアスペクト比にトリミングする

焦点のトリミングを使用した画像例

次に「画像のサイズ変更」セクションで1:1のアスペクト比を選択します。

画像のサイズ変更パラメータを使用した画像例

AI機能の使用

AI機能を使用すると、生成塗りつぶし (opens in a new tab)背景除去 (opens in a new tab)、および超解像度 (opens in a new tab)など、プラットフォームが簡単かつ正確に画像を強化します。

生成塗りつぶし

キャンバスサイズを拡大し、AI生成のイメージで空白を埋めます。 例:「水たまり」というプロンプトを使用して、画像に水たまりを追加します:

AIパラメータを使用する前の画像例

次に「トリミングと塗りつぶし」セクションで、「塗りモード」をドロップダウンメニューから選択します。拡張されたキャンバスがぼかされているのがわかります。

AIパラメータを使用する前のトリミング画像例

次に「生成塗りつぶし」機能をオンにします。拡張されたキャンバス領域が、この写真に適したピクセルで埋められます。

AIパラメータを使用した画像例

「水たまり」のようなテキストプロンプトを使用して、特定の要素を画像に追加します。生成には数秒かかる場合があります。

水たまりを追加したAIパラメータを使用した画像例

背景除去

クリック一つで背景を削除。

背景を削除する前の画像例
背景を削除した後の画像例

背景置換

背景置換は、画像の背景をテキストプロンプトを使用してインテリジェントに削除および置換する生成AI機能です。

「背景置換」機能をオンにして、プロンプトを入力するだけで完了します。

Image example before the background is replaced
Image example after the background is replaced

超解像度

超解像度は、0.25MB以下の画像を元のサイズの最大4倍まで拡大し、画質を維持するAIソリューションです。拡大は、生成AIを使用して画像の解像度を上げる際に画像のディテールを改善することで実現されます。

注意: サンプル画像が既に高解像度であるため、デモではスーパー解像度機能が意図した通りに動作しません。拡大の例については、スーパー解像度のドキュメント (opens in a new tab)をご覧いただくか、アカウントマネージャーにデモを依頼してください。

画像URLを通じた画像の編集

imgixでは、画像に適用できる150以上のレンダリングパラメータにアクセスできます。これらの他のパラメータを画像URLに追加して試すことができます。

画像URLへのアクセス

画像エディターで画像を開き、「共有」をクリックし、「URLをコピー」をクリックします。

URLをエクスポートする方法を示す画像例

URLパラメータを使用した画像の変換

新しいブラウザタブにURLを貼り付け、画像URLにパラメータを適用し始めます。

サイズ調整パラメータを持つURLを示す画像例

例:半径65の重みとライムグリーンの色で境界を追加する

ライムグリーンの境界線

例:ライムグリーンの境界に加えて、背景置換パラメータbg-replace=floral wallpaperを追加する。

背景置換

自分のビジュアルメディアアセットを使用してimgixを始める方法について詳しくは、クイックスタートガイド (opens in a new tab)をご覧ください。