Optimize Images According to Network and Device Constraints in React

Network connectivity technology has undergone earth-shaking changes since the birth of the Internet. We have long bid farewell to the era of dial-up Internet access, and now we can watch high-definition videos on mobile networks with smartphones. But not all mobile network connections are the same - older generation networks (3G, 2G, etc.) still dominate, and nearly half of the world's connections belong to this type of network in 2020.

Unfortunately, the process of eliminating old networks is very slow, and many people around the world still face the problem of slow page loading, which is reminiscent of the early days of the popularity of home Internet.

Modern websites have become resource-intensive, with a lot of pictures and animations. For visitors using low-performance devices and unstable network connections, a normal web page may take one minute to fully load. This is mainly because developers tend to make binary decisions when dealing with user hardware and network conditions: devices either belong to the desktop category or smartphone category; connection status is either online or offline. In fact, the user's environment is often more detailed and complex.

Can we do better?

How to bridge the gap between those users who use low-end devices and unstable network connections? First, we need to quickly evaluate their specific situation by looking at the following two properties:

• navigator.deviceMemory
• navigator.connection

Based on this, we can decide to adjust the image quality to provide. However, there is a problem with Jamstack websites and applications rendering on the server side - navigator objects and any other browser APIs are not available during the rendering phase. A common way to solve this problem is to add a lot of responsive image markers, but this brings a significant pain point - inefficient scaling. Image CDNs like ImageEngine can help avoid this problem and other pitfalls associated with responsive images, as it handles all the heavy lifting by making instantly automatic intelligent adjustments to the requested resources.

In terms of adapting to user network limitations, the connection type can be detected and the image CDN is instructed to change the compression rate according to the connection quality. Here's how to implement this in React:

 import React, { useState, useEffect } from 'react'

const useConnectionType = (defaultConnectionType) => {

  const isSupported = navigator?.connection?.effectiveType
    ? true
    : false

  const [connectionType, setNetworkStatus] = useState(
    isSupported
      ? navigator.connection.effectiveType
      : defaultConnectionType
  )

  useEffect(() => {
    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'

function ConnectionAwareComponent () {

  const [connectionType] = useConnectionType()

  let compressionLevel = 0

  switch (connectionType) {
    case 'slow-2g':
      compressionLevel = 65
      break
    case '2g':
      compressionLevel = 50
      break
    case '3g':
      compressionLevel = 30
      break
    case '4g':
      compressionLevel = 0
      break
  }

  Return (
    <div>
      {/* Use dedicated instructions to apply variable compression*/}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="Optimize Images According to Network and Device Constraints in React" >
    </div>
  )
}

We can go a step further, provide blurred images for users with very slow networks and offer the option of downloading higher resolution versions on demand. Or design a performance scoring system and adjust the sent content based on the system.

On the other hand, users using a "high-speed" 4G connection does not necessarily mean they don't care about saving data, as they may visit the website in a roaming state. Enabling client prompts on the website will enable the site owner to detect the presence of a data saving flag and take the necessary steps to adapt to the user's preferences.

Reasons for faster images

Medium CPU, proper amount of memory, and low-level connections are not fictional limitations. They pose a real user experience challenge that could affect hundreds of millions of users around the world. Some companies are starting to incorporate their products into an inclusive experience: streaming services like Netflix and Spotify adjust streaming quality based on your network condition, while many others are behind the scenes to automatically optimize image for users.

In underdeveloped areas where the Internet is not yet popular, it may not be the target market. Meanwhile, if users from rural areas of developed countries are provided with a full version of the website, they may experience an unpleasant experience. We can adjust the content sent/displayed to the user more considerately with some small adjustments.

Using an image CDN like ImageEngine can simplify the image optimization process and automatically respond to client prompts for network restrictions. The result is a better experience for network-constrained visitors and an elegant workflow for developers.

The above is the detailed content of Optimize Images According to Network and Device Constraints in React. For more information, please follow other related articles on the PHP Chinese website!