ma(18)8通常、Cloudinaryは最高のユーザ体験を補完する2つのことを行うために使用されます。サイト読み込みに時間がかかるほど、再び戻ってくる訪問者の数が減ることはもう何度も証明されています。Cloudinaryのデジタルメディア(デジタル資産)を最適化するツールは、開発者でもコンテンツの作成者でも、シンプルで、直感的、そして効果的だと感じることでしょう。本記事では、Cloudinaryを使用してページ読み込み時間を確実に減らし、サイト訪問者を満足させるための10のポイントをご紹介します。Transformation)を生成します。生成済みおよびキャッシュされた後続のリクエストと比較すると、その最初のリクエストは常により時間がかかります。読み込み時間は、元のファイルサイズ、要求されたサイズ、適用された効果などの他の要因に依存します。)を生成してみませんか?方法は次の2つのいずれかがあります。アップロードプリセットの使用。Asyncを有効にして、アップロードの呼び出し自体の一部としてではなく、バックグラウンドで変換を実行させるのが良いでしょう。メソッドを使用します。次の例を参照してください。cloudinary.Upload(uploadParams);その2:指定したサイズで画像や動画を配信する開発者の中には、オリジナルの画像をページに読み込んでから、CSSを使用してクライアント側でサイズを変更する場合がありますが、これは回避した方が良いでしょう。大きなアセットを読み込ませることでページの読み込み時間が長くなるだけでなく、自分たちとユーザーの両方の帯域幅を浪費することになるからです。CSSのサイズ変更では画像の肝心な焦点が失われてしまうかもしれません。タグをHTMLに組み込んで、変換された画像や動画をサイトに埋め込みましょう。メソッドのシンプルな呼び出しで行えます。:crop=>"scale")次のようなHTMLコードが生成されます。src=”https://res.cloudinary.com/demo/image/upload/w_300,h_100,c_scale/sample.jpg”>他の言語では以下の通りです。cloudinary)その3:f_autoを適用して、自動的に最適なフォーマットにして画像を配信する画像を最適に表示するための要件は、ブラウザによって異なります。Chromeでレンダリングする時は、JPGの代わりにWebPバージョンを配信することでさらに圧縮された画像を配信できる場合があります。Cloudinaryを使用すれば、そのような要件を満たすのは簡単です。Cloudinaryは、画像をリエクストしているブラウザを検出し、自動的に最適な形式へ画像を変換するか、形式の最適化が不要な場合はそのまま配信します。使用すると、どの形式がリクエストされるかによって1つの画像につき最大4つの変換(元の形式、webp、awebp、wdp)が生成される可能性があります。画像への適用は、例えば以下のようにとてもシンプルです。:crop=>"scale")※他の言語については、オリジナル記事から確認してください。適用することで、Cloudinaryは自動的に画像を分析し、最終的には品質とファイル圧縮レベルだけでなく、エンコード設定まで最適なバージョンで配信します。この時、見た目の品質の違いは発生しません。適用された画像URLの例を次に示します。:quality=>"auto")※他の言語については、オリジナル記事から確認してください。KBその5:画像に変換を適用して最適化する変換を画像に適用すると、Cloudinaryはメタデータの除去などの付随するタスクを実行することにより、画像をさらに最適化します。手作業でやる必要はありません。指定でき、Cloudinaryが最適なアルゴリズムを適用します。品質レベルを指定することもできます。デフォルトは80で、ユーザインターフェースではこのように、非常に明快です。その6:CloudinaryのAIベースのスマートクロッピング機能を活用して画像を切り取るCloudinaryのスマートクロッピング機能は、オブジェクトに応じたクロッピングのアドオンで利用可能です。これを使うと、サポートされるカテゴリやオブジェクトの一覧から、画像の中でどこに焦点を当てるか選ぶことができ、さらにそこから変換を適用することができます。画像の焦点として設定できるオブジェクトにはハンドバッグ、ケーキ、バイクなどがあり、またはオブジェクトカテゴリとして電子、電化製品、スポーツなどを指定することもできます。違いをご覧いただけます。g_auto:bicycleその7:画像の遅延読み込み用に低品質の代替画像を生成する高品質の画像を表示させると、多くの場合はページの読み込み時間が長くなり、ユーザーが遠ざかることになり得ます。そのような状況を緩和するには、画像の読み込み遅延の場合に、Cloudinaryを使用して低品質の代替画像(LQIP)を生成することで、帯域幅と読み込み時間を抑えます。この方法では、ビューポートに入ってこない限り、高品質の画像を読み込みしません。以下に2つの例を示します。