React의 네트워크 및 장치 제약에 따라 이미지 최적화

네트워크 연결 기술은 인터넷이 탄생 한 이후 지구를 흔들리는 변화를 겪었습니다. 전화 접속 인터넷 액세스 시대에 작별 인사를 오랫동안 입찰했으며 이제는 스마트 폰을 사용하여 모바일 네트워크에서 고화질 비디오를 볼 수 있습니다. 그러나 모든 모바일 네트워크 연결이 동일하지는 않습니다. 이전 세대 네트워크 (3G, 2G 등)는 여전히 지배적이며 전 세계 연결의 거의 절반이 2020 년에 이러한 유형의 네트워크에 속합니다.

불행히도, 오래된 네트워크를 제거하는 과정은 매우 느립니다. 전 세계의 많은 사람들은 여전히 ​​홈 인터넷의 인기의 초기를 연상시키는 느린 페이지 로딩 문제에 직면 해 있습니다.

현대 웹 사이트는 많은 사진과 애니메이션으로 리소스 집약적이되었습니다. 저 성능 장치와 불안정한 네트워크 연결을 사용하는 방문자의 경우 일반 웹 페이지가 완전히로드하는 데 1 분이 걸릴 수 있습니다. 이는 주로 개발자가 사용자 하드웨어 및 네트워크 조건을 다룰 때 이진 결정을 내리는 경향이 있기 때문입니다. 장치는 데스크탑 범주 또는 스마트 폰 범주에 속합니다. 연결 상태는 온라인 또는 오프라인입니다. 실제로 사용자의 환경은 종종 더 상세하고 복잡합니다.

우리가 더 잘 할 수 있습니까?

저가형 장치와 불안정한 네트워크 연결을 사용하는 사용자 간의 격차를 해소하는 방법은 무엇입니까? 먼저 다음 두 가지 속성을 살펴보면 특정 상황을 신속하게 평가해야합니다.

• navigator.deviceMemory
• navigator.connection

이를 바탕으로 제공 할 이미지 품질을 조정하기로 결정할 수 있습니다. 그러나 서버 측에서 렌더링 된 Jamstack 웹 사이트 및 응용 프로그램의 경우 렌더링 단계에서 navigator 개체 및 기타 브라우저 API를 사용할 수 없습니다. 이 문제를 해결하는 일반적인 방법은 반응 형 이미지 마커를 많이 추가하는 것이지만, 이것은 상당한 진통 점 - 비효율적 인 스케일링을 가져옵니다. ImageEngine과 같은 이미지 CDN 은이 문제 및 반응 형 이미지와 관련된 기타 함정을 피하는 데 도움이 될 수 있습니다. 요청 된 리소스를 즉시 자동 지능형 조정하여 모든 무거운 리프팅을 처리하므로 모든 무거운 리프팅을 처리합니다.

사용자 네트워크 제한에 적응하는 측면에서 연결 유형을 감지 할 수 있으며 이미지 CDN은 연결 품질에 따라 압축 속도를 변경하도록 지시됩니다. React에서 이것을 구현하는 방법은 다음과 같습니다.

 import React, {usestate, useeffect}에서 'react'

const useconnectiontype = (defaultConnectionType) => {

  const issupported = navigator? .connection? .EffectiveType
    ? 진실
    : 거짓

  const [ConnectionType, setnetworkStatus] = usestate (
    issupported
      ? navigator.connection.effectivetype
      : defaultConnectionType
  ))

  useeffect (() => {
    if (issupported) {
      const {connection} = 네비게이터
      const updateConnectionType = () => {
        setnetworkstatus (connection.effectivetype)
      }

      Connection.AddeventListener ( 'Change', UpdateConnectionType)

      return () => {
        Connection.removeEventListener ( 'Change', UpdateConnectionType)
      }
    }
  }, [])

  반환 [ConnectionType, setnetworkStatus]
}

const imagecdnhost = 'images.foo.com'

함수 ConnectionAwareComponent () {

  const [ConnectionType] = useConnectionType ()

  compressionLevel = 0을하자

  스위치 (ConnectionType) {
    CASE 'slow-2g':
      압축 레벨 = 65
      부서지다
    CASE '2G':
      압축 레벨 = 50
      부서지다
    케이스 '3G':
      압축 레벨 = 30
      부서지다
    케이스 '4G':
      압축 레벨 = 0
      부서지다
  }

  반품 (
    <div>
      {/* 전용 지침을 사용하여 가변 압축을 적용*/}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="React의 네트워크 및 장치 제약에 따라 이미지 최적화" >
    </div>
  ))
}

한 걸음 더 나아가서 네트워크가 매우 느린 사용자에게 흐릿한 이미지를 제공하고 주문시 고급 해상도 버전을 다운로드 할 수있는 옵션을 제공 할 수 있습니다. 또는 성능 스코어링 시스템을 설계하고 시스템을 기반으로 전송 된 컨텐츠를 조정하십시오.

반면, "고속"4G 연결을 사용하는 사용자가 반드시 로밍 상태의 웹 사이트를 방문 할 수 있으므로 데이터 저장에 관심이 없다는 것을 의미하지는 않습니다. 웹 사이트에서 클라이언트 프롬프트를 활성화하면 사이트 소유자가 데이터 저장 플래그의 존재를 감지하고 사용자의 선호도에 적응하기 위해 필요한 단계를 수행 할 수 있습니다.

더 빠른 이미지의 이유

중간 CPU, 적절한 양의 메모리 및 저수준 연결은 허구의 한계가 아닙니다. 그들은 전 세계 수억 명의 사용자에게 영향을 줄 수있는 실제 사용자 경험 도전을 제기합니다. 일부 회사는 제품을 포괄적 인 경험에 통합하기 시작했습니다. Netflix 및 Spotify와 같은 스트리밍 서비스는 네트워크 조건에 따라 스트리밍 품질을 조정하는 반면, 다른 많은 사람들은 사용자의 이미지를 자동으로 최적화하기 위해 무대 뒤에 있습니다.

인터넷이 아직 인기가없는 저개발 지역에서는 대상 시장이 아닐 수도 있습니다. 한편, 선진국의 시골 지역의 사용자에게 웹 사이트의 정식 버전이 제공되면 불쾌한 경험을 경험할 수 있습니다. 약간의 조정으로 사용자에게 전송/표시된 컨텐츠를 더 많이 조정할 수 있습니다.

ImageEngine과 같은 이미지 CDN을 사용하면 이미지 최적화 프로세스를 단순화하고 네트워크 제한에 대한 클라이언트 프롬프트에 자동으로 응답 할 수 있습니다. 그 결과 네트워크로 제한 된 방문자에게는 더 나은 경험과 개발자를위한 우아한 워크 플로입니다.

위 내용은 React의 네트워크 및 장치 제약에 따라 이미지 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!