反応のネットワークとデバイスの制約に応じて画像を最適化する

ネットワーク接続テクノロジーは、インターネットの誕生以来、アースシェーキングの変更を受けています。ダイヤルアップインターネットアクセスの時代に長い間入札しており、スマートフォンを使用してモバイルネットワークで高解像度のビデオを見ることができます。しかし、すべてのモバイルネットワーク接続が同じであるわけではありません - 古い世代ネットワーク（3G、2Gなど）が依然として支配的であり、2020年の世界の接続のほぼ半分がこのタイプのネットワークに属します。

残念ながら、古いネットワークを排除するプロセスは非常に遅く、世界中の多くの人々がまだ遅いページの読み込みの問題に直面しています。

最新のWebサイトは、多くの写真とアニメーションを備えたリソース集約型になりました。低パフォーマンスデバイスと不安定なネットワーク接続を使用している訪問者の場合、通常のWebページは完全にロードするのに1分かかる場合があります。これは主に、開発者がユーザーハードウェアやネットワーク条件を扱うときにバイナリの決定を下す傾向があるためです。デバイスはデスクトップカテゴリまたはスマートフォンカテゴリに属します。接続ステータスは、オンラインまたはオフラインのいずれかです。実際、ユーザーの環境は、多くの場合、より詳細で複雑です。

もっと良くできますか？

ローエンドデバイスと不安定なネットワーク接続を使用するユーザーの間のギャップを埋める方法は？まず、次の2つのプロパティを調べて、特定の状況を迅速に評価する必要があります。

• navigator.deviceMemory
• navigator.connection

これに基づいて、提供する画質を調整することを決定できます。ただし、JamstackのWebサイトやアプリケーションにはサーバー側でレンダリングされていることに問題があります。 navigatorオブジェクトやその他のブラウザAPIは、レンダリングフェーズでは使用できません。この問題を解決する一般的な方法は、多くのレスポンシブ画像マーカーを追加することですが、これは重大な問題点、つまり非効率的なスケーリングをもたらします。 ImageEngineのような画像CDNは、要求されたリソースに即座に自動的にインテリジェントな調整を行うことにより、すべての重い持ち上げを処理するため、この問題やレスポンシブ画像に関連する他の落とし穴を回避するのに役立ちます。

ユーザーネットワークの制限に適応するという点では、接続タイプを検出でき、画像CDNは接続品質に応じて圧縮率を変更するように指示されます。これをReactに実装する方法は次のとおりです。

 Reactをインポート、{useState、useeffect} from 'React'

const useconnectionType =（defaultConnectionType）=> {

  const supported = navigator？.connection？effectiveType
    ？真実
    ： 間違い

  const [connectionType、setNetworkStatus] = uesestate（
    サポートされています
      ？ navigator.connection.effectiveType
      ：defaultConnectionType
  ））

  effect（（）=> {
    if（issupported）{
      const {connection} = navigator
      const updateConnectionType =（）=> {
        setnetworkstatus（connection.effectiveType）
      }

      connection.addeventlistener（ 'change'、updateConnectionType）

      return（）=> {
        Connection.RemoveEventListener（ 'change'、updateConnectionType）
      }
    }
  }、[]）

  return [connectionType、setNetworkStatus]
}

const imagecdnhost = 'images.foo.com'

関数ConnectionAwarEcomponent（）{

  const [connectionType] = useconnectionType（）

  CompressionLevel = 0とします

  switch（connectionType）{
    ケース「slow-2g」：
      CompressionLevel = 65
      壊す
    ケース「2G」：
      CompressionLevel = 50
      壊す
    ケース '3g'：
      CompressionLevel = 30
      壊す
    ケース「4G」：
      CompressionLevel = 0
      壊す
  }

  戻る （
    <div>
      {/*専用の指示を使用して、可変圧縮を適用します*/}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="反応のネットワークとデバイスの制約に応じて画像を最適化する" >
    </div>
  ））
}

さらに一歩進んで、非常に遅いネットワークを持つユーザーにぼやけた画像を提供し、オンデマンドで高解像度バージョンをダウンロードするオプションを提供できます。または、パフォーマンススコアリングシステムを設計し、システムに基づいて送信されたコンテンツを調整します。

一方、「高速」4G接続を使用しているユーザーは、ローミング状態のWebサイトにアクセスする可能性があるため、必ずしもデータの保存を気にしないことを意味するわけではありません。 Webサイトでクライアントのプロンプトを有効にすることで、サイトの所有者はデータ保存フラグの存在を検出し、ユーザーの好みに適応するために必要な手順を実行できます。

より高速な画像の理由

中cpu、適切な量のメモリ、および低レベルの接続は、架空の制限ではありません。彼らは、世界中の何億人ものユーザーに影響を与える可能性のある実際のユーザーエクスペリエンスチャレンジをもたらします。一部の企業は、ネットワーク状態に基づいてNetflixやSpotify調整ストリーミング品質などのストリーミングサービスなど、製品を包括的なエクスペリエンスに組み込み始めています。

インターネットがまだ人気がない未発達の分野では、ターゲット市場ではないかもしれません。一方、先進国の農村地域のユーザーにウェブサイトのフルバージョンが提供されている場合、不快な体験を経験する可能性があります。いくつかの小さな調整を受けて、送信/表示されたコンテンツをユーザーにもっとよく調整できます。

ImageEngineのような画像CDNを使用すると、イメージの最適化プロセスを簡素化し、ネットワーク制限のクライアントプロンプトに自動的に応答できます。その結果、ネットワークが制約した訪問者にとってより良い体験と、開発者にとってエレガントなワークフローになります。

以上が反応のネットワークとデバイスの制約に応じて画像を最適化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。