Mengoptimumkan imej mengikut kekangan rangkaian dan peranti dalam React

Teknologi penyambungan rangkaian telah mengalami perubahan bumi sejak kelahiran Internet. Kami telah mengucapkan selamat tinggal kepada era akses internet dial-up, dan sekarang kami dapat menonton video definisi tinggi di rangkaian mudah alih dengan telefon pintar. Tetapi tidak semua sambungan rangkaian mudah alih adalah sama - rangkaian generasi yang lebih tua (3G, 2G, dan lain -lain) masih menguasai, dan hampir separuh daripada sambungan dunia tergolong dalam rangkaian jenis ini pada tahun 2020.

Malangnya, proses menghapuskan rangkaian lama sangat perlahan, dan ramai orang di seluruh dunia masih menghadapi masalah pemuatan halaman yang perlahan, yang mengingatkan pada hari -hari awal populariti Internet rumah.

Laman web moden telah menjadi intensif sumber, dengan banyak gambar dan animasi. Bagi pelawat yang menggunakan peranti berprestasi rendah dan sambungan rangkaian yang tidak stabil, laman web biasa mungkin mengambil satu minit untuk memuat sepenuhnya. Ini terutamanya kerana pemaju cenderung membuat keputusan binari apabila berurusan dengan perkakasan pengguna dan keadaan rangkaian: peranti sama ada tergolong dalam kategori desktop atau kategori telefon pintar; Status sambungan sama ada dalam talian atau luar talian. Malah, persekitaran pengguna sering lebih terperinci dan kompleks.

Bolehkah kita melakukan yang lebih baik?

Bagaimana untuk merapatkan jurang antara pengguna yang menggunakan peranti rendah dan sambungan rangkaian yang tidak stabil? Pertama, kita perlu dengan cepat menilai keadaan khusus mereka dengan melihat dua sifat berikut:

• navigator.deviceMemory
• navigator.connection

Berdasarkan ini, kita boleh memutuskan untuk menyesuaikan kualiti imej untuk disediakan. Walau bagaimanapun, untuk laman web dan aplikasi Jamstack yang diberikan di sisi pelayan, terdapat masalah - objek navigator dan API pelayar lain tidak tersedia semasa fasa rendering. Cara biasa untuk menyelesaikan masalah ini adalah untuk menambah banyak penanda imej yang responsif, tetapi ini membawa titik kesakitan yang ketara - skala yang tidak cekap. CDN imej seperti ImageEngine dapat membantu mengelakkan masalah ini dan perangkap lain yang berkaitan dengan imej yang responsif, kerana ia mengendalikan semua mengangkat berat dengan membuat pelarasan pintar secara automatik kepada sumber yang diminta.

Dari segi menyesuaikan diri dengan batasan rangkaian pengguna, jenis sambungan dapat dikesan dan imej CDN diarahkan untuk menukar kadar mampatan mengikut kualiti sambungan. Inilah cara melaksanakannya dalam React:

 Import React, {useState, useeffect} dari 'React'

const useConnectionType = (DefaultConnectionType) => {

  const ditstred = navigator? .Connection? .EffectiveType
    ? Benar
    : palsu

  const [ConnectionType, SetNetworkStatus] = UseState (
    diterbitkan
      ? navigator.connection.effectiveType
      : DefaultConnectionType
  )

  useeffect (() => {
    jika (diterbitkan) {
      const {connection} = navigator
      const updateConnectionType = () => {
        setNetWorkStatus (connection.effectiveType)
      }

      sambungan.addeventListener ('perubahan', updateConnectionType)

      kembali () => {
        sambungan.RemoveEventListener ('perubahan', updateConnectionType)
      }
    }
  }, [])

  kembali [SambunganType, SetNetworkStatus]
}

const imageCdnhost = 'images.foo.com'

Fungsi ConnectionAwareComponent () {

  const [ConnectionType] = useConnectionType ()

  Biarkan CompressionLevel = 0

  suis (sambunganType) {
    Kes 'Slow-2g':
      CompressionLevel = 65
      rehat
    Kes '2G':
      compressionLevel = 50
      rehat
    kes '3g':
      compressionLevel = 30
      rehat
    Kes '4G':
      compressionLevel = 0
      rehat
  }

  Kembali (
    <div>
      {/* Gunakan arahan berdedikasi untuk menggunakan mampatan berubah*/}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="Mengoptimumkan imej mengikut kekangan rangkaian dan peranti dalam React" >
    </div>
  )
}

Kami boleh melangkah lebih jauh, memberikan imej kabur untuk pengguna dengan rangkaian yang sangat perlahan dan menawarkan pilihan untuk memuat turun versi resolusi yang lebih tinggi apabila diminta. Atau merancang sistem pemarkahan prestasi dan menyesuaikan kandungan yang dihantar berdasarkan sistem.

Sebaliknya, pengguna menggunakan sambungan 4G "berkelajuan tinggi" tidak semestinya bermakna mereka tidak peduli dengan menyimpan data, kerana mereka boleh melawat laman web dalam keadaan perayauan. Mengaktifkan klien yang diminta di Laman Web akan membolehkan pemilik tapak mengesan kehadiran bendera penjimatan data dan mengambil langkah -langkah yang diperlukan untuk menyesuaikan diri dengan keutamaan pengguna.

Alasan untuk gambar yang lebih cepat

CPU sederhana, jumlah memori yang betul, dan sambungan peringkat rendah bukanlah batasan fiksyen. Mereka menimbulkan cabaran pengalaman pengguna yang sebenar yang boleh menjejaskan beratus -ratus juta pengguna di seluruh dunia. Sesetengah syarikat mula menggabungkan produk mereka ke dalam pengalaman inklusif: perkhidmatan streaming seperti Netflix dan Spotify menyesuaikan kualiti streaming berdasarkan keadaan rangkaian anda, sementara banyak lagi di belakang tabir untuk mengoptimumkan imej secara automatik untuk pengguna.

Di kawasan yang kurang berkembang di mana Internet belum popular, ia mungkin bukan pasaran sasaran. Sementara itu, jika pengguna dari kawasan luar bandar negara maju disediakan dengan versi penuh laman web, mereka mungkin mengalami pengalaman yang tidak menyenangkan. Kami boleh menyesuaikan kandungan yang dihantar/dipaparkan kepada pengguna dengan lebih sengaja dengan beberapa pelarasan kecil.

Menggunakan CDN imej seperti ImageEngine dapat memudahkan proses pengoptimuman imej dan secara automatik bertindak balas kepada arahan klien untuk sekatan rangkaian. Hasilnya adalah pengalaman yang lebih baik untuk pengunjung yang terkawal rangkaian dan aliran kerja yang elegan untuk pemaju.

Atas ialah kandungan terperinci Mengoptimumkan imej mengikut kekangan rangkaian dan peranti dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!