KenticoCloudでの画像変換のサポートはこちらです。それは何についてであり、なぜあなたは気にする必要がありますか？確認してみましょう。

ヘッドレスアプローチに既に精通している場合、その主な原則は、コンテンツの単一のソースを用意し、アプリケーションの設計に合わせてプレゼンテーション層で調整することであることがわかります。テキストに関する限り、それはかなり簡単です。しかし、画像はどうですか？

ほとんどのプロジェクトでは、何らかの方法で画像を調整する必要があります。 Webサイトの場合は、小さい画面用に最適化する必要があります。他のチャネルの場合は、コンテキストに合わせて変換する必要があります。典型的な状況は何ですか？そして、あなたはそれらにどのように対処すべきですか？これまでのところ、アセットライブラリに複数の画像バリアントをアップロードするだけです。ただし、これらの個別のサイロは、より良いソリューションを求めています...そしてそれはここにあります-APIを介してオンザフライで画像を変換します。ただし、実際の実装に関するヒントをいくつか紹介する前に、まず動機付けから始めましょう。

なぜ画像を変換する必要があるのですか？

単一の画像の変更されたバージョンを表示する理由はたくさんあるかもしれません。 Dancing Goatサンプルサイトを例として、最も一般的なケースを見てみましょう。ご覧のとおり、上部にヘッダーがあり、下部にいくつかの記事があります。

さまざまな画面幅のヘッダー画像

通常、ヘッダー画像をウィンドウの幅に合わせる必要があります。多くの場合、幅と高さの両方のサイズを変更するだけでなく、左右からトリミングする場合があります。この例では、コーヒー豆が見えるように画像を中央にトリミングするだけですが、顔など、画像内の任意のオブジェクトを拡大することができます。このトリミング手法は通常、アートディレクションと呼ばれます。

レスポンシブブレークポイントを設定して、メインオブジェクトを拡大した状態でカットアウトを表示します。しきい値に達すると、元の画像のトリミングされたバージョンが提供されます。

画像サムネイル

もう1つの一般的なケースは、画像の低解像度のバリエーションをサムネイルとして使用することです。サンプルプロジェクトを見ると、ホームページに画像のプレビュー付きの記事のリストがあります。リンクをクリックすると、高解像度の画像の詳細が表示されます。

複数のチャネル

これまで、Webサイトを例として使用して画像変換のデモを行ってきました。しかし、オムニチャネルについて考え始めるまで、その美しさを本当に理解できないかもしれません。さまざまな画面サイズのさまざまなデバイスに画像を配信する場合、通常、サイズ変更とトリミングが行われる複数のレイアウトを作成します。これは、たとえば、モバイルアプリの画像の詳細を選択しながら、デスクトップアプリケーションの風景全体を表示するのと同じように、アートディレクションが行われる別の例です。

どうやるか

これまで、主な要件について説明してきましたが、実際の実装に関する情報はあまり提供していません。より実用的な側面から見てみましょう。

開発者とコンテンツ編集者が協力する

画像変換はAPIを使用して行われるため、完全に開発者の指示の下にあり、コンテンツの寄稿者はそれについて心配する必要はありません。ただし、開発者は、コンテンツ編集者が適切な画像をアップロードすることを確認する必要があります。多くの場合、画像のサイズが重要になります。たとえば、画像をさらに変換するために画像の最小幅に依存したり、トリミングを使用するときに正確な寸法に依存したりする場合があります。また、APIを介して操作できる正しいファイル形式（これらはpng、gif、jpg、およびwebp）を確実に取得する必要があります。

これらの理由により、Kentico Cloudの画像変換には、コンテンツタイプのアセットおよびリッチテキスト要素の制限設定が付属しています。ファイルタイプを調整可能な画像のみに制限したり、幅と高さを制限したりできます。

読み込み時間と作業を節約

それで、複数の画像バリアントを実装するための他のオプションはありますか？絶対そうです。コンテンツエディタは、さまざまな画像バリアントをアセットライブラリに直接アップロードできますが、これにより、将来のメンテナンスのオーバーヘッドが増加します。 CSSだけを使用して画像のサイズを変更することもできますが、主な動機は通常、ユーザーの読み込み時間とデータを節約することです。したがって、適切な実装も重要です。 CSSまたはJavaScriptを使用してソース画像を動的に変更しようとした場合、元の画像はすでに読み込まれています。これが、HTMLがsrcset属性を提供する理由です。

もっとある...

このブログ投稿では、画像のサイズ変更とトリミングの観点から、主にレスポンシブデザインについて説明しました。もう1つの便利な機能は、Retinaディスプレイなど、ピクセル密度の高いディスプレイのユーザーエクスペリエンスを向上させるために、デバイスのピクセル比（DPR）を設定することです。 APIを使用して、画像の品質を変更したり、出力形式を変更したりすることもできます。サポートされているすべての機能の詳細については、 ドキュメントを参照してください。

画像変換を楽しんでいただき、ページの読み込み時間と帯域幅を最適化したプロジェクトを構築するのに役立つと思います。しかし、私たちは先を見据えているので、将来的には、スマートクロッピングやその他の自動化など、さらに多くの変換が利用できるようになる可能性があります。

今ではあなたの番です。それを試して、あなたの経験を私たちと共有してください！