Проблема?

По данным Neil Patel, akamai.com и Gomez, около 40% людей покидают веб-сайт, если для его загрузки требуется более 3 секунд. Более того, половина пользователей Интернета ожидают, что контент будет загружен в течение 2 секунд!

Есть несколько элементов, которые могут замедлить работу веб-сайта и вызвать этот «эффект», давайте сосредоточимся на одном моменте - изображениях.

Вот как можно обработать изображения, чтобы они загружались быстрее и не замедляли работу страницы:

  1. Уменьшите большие изображения до размера, необходимого для вашего дизайна - даже на настольном компьютере нет необходимости использовать максимально возможное изображение.
  2. Удалить метаданные из доставленных изображений - по умолчанию изображения содержат много информации, полезной для фотоаппаратов и графических приложений, но не для ваших веб-пользователей.
  3. Отформатируйте изображения в новые форматы, такие как JPEG-XR и WebP - распространенные форматы, такие как PNG, JPG или GIF, не оптимизированы для отправки по беспроводной сети.
  4. Более низкое качество изображения - многие изображения имеют сверхвысокое разрешение, однако качество можно снизить без какого-либо значительного визуального воздействия.
  5. Используйте отложенную загрузку - позвольте вашим изображениям ждать загрузки, пока пользователь не прокрутит их вниз, это действительно может сократить время инициализации страницы.
  6. Удерживайте позицию элемента, чтобы страница не перескакивала во время загрузки изображений.
  7. Используйте технику «Размытие» - покажите изображение с очень низким разрешением перед загрузкой оригинала.
  8. На небольших устройствах уменьшайте изображение еще больше - мобильные телефоны обычно имеют более медленное подключение к Интернету, а на маленьких экранах пользователям не нужно сверхвысокое разрешение.

Оптимизация изображений вручную могла быть настоящей пыткой. Но послушайте, как говорит Бобби Макферрин, «не волнуйтесь» - для вас есть готовый пластырь.

Решение!

Cloudinary

Использование Cloudinary API решает большинство наших проблем. Короче говоря, Cloudinary управляет вашими медиа-активами в облаке. Он охватывает всю тяжелую работу, перечисленную в наших проблемных пунктах с 1 по 4 выше. Вы можете увидеть Cloudinary.

Нам просто нужно создать компонент, который обрабатывает точки с 5 по 8.

React-Cloudinary-ленивый-образ

Когда Cloudinary выполняет свою работу, мы можем сосредоточиться на своей. Давайте справимся с отложенной загрузкой с помощью React-Cloudinary-lazy-image.

  • Это позволяет нам начать загрузку изображения только тогда, когда элемент находится на экране пользователя.
  • Конечно, мы не хотим, чтобы наша страница прыгала, поэтому она думает о рендеринге заполнителя.
  • Более того, было бы здорово не оставлять пустое место в ожидании изображения. Мы можем установить цвет фона или загрузить очень маленькую версию исходного изображения.
  • Наконец, мы можем создавать точки останова, чтобы иметь разные размеры на разных экранах, добавляя исходный код в теги изображений.

Пример 1

Взгляните на этот код:

import React from 'react'
import Img from ‘react-cloudinary-lazy-image’
export const LazyImage = () => (
  <Img
    cloudName={‘CloudName’}
    imageName={'black-hole'}
    fixed={{
      width: 800,
      height: 600
    }}
    alt={'black_hole'}
  />
)

И вот результат:

Это пример фиксированной версии компонента. Он предназначен для случаев, когда изображение не меняет свой размер на экранах меньшего размера. Для правильной обработки высота и ширина должны быть установлены в свойстве fixed. Параметры cloudName и imageName передаются непосредственно в Cloudinary. Во-первых, это просто имя облака, а во-вторых, это общедоступный идентификатор в активах Cloudinary. Чтобы все было готово, рекомендуется также передать свойство alt.

Пример 2

С другой стороны, на веб-сайте часто бывает полноразмерное изображение. Ресурс фиксированного размера не решит проблему, поэтому существует гибкая версия. Параметр fluid принимает объект с одним или двумя ключами, maxWidth является обязательным и определяет максимальный размер изображения, который будет меньше масштабирования, как по ширине, так и по высоте. Однако часто изображения остаются одинаковой высоты, несмотря на ширину экрана. Чтобы он оставался постоянным, вы также можете передать ключ height.

Все значения в обоих типах изображений должны быть числами в пикселях.

Это пример кода:

<Img
  cloudName={‘CloudName’}
  imageName={'black-hole'}
  fluid={{
    maxWidth: 800,
    height: 300
  }}
  alt={'black_hole'}
/>

Настраиваемый

React-Cloudinary-lazy-image может обрабатывать несколько параметров, чтобы вы могли полностью контролировать свои изображения.

Стили

  • style - определить стиль для компонента оболочки
  • imgStyle - определить стиль элемента img
  • placeholderStyle - определить стиль элемента img заполнителя.
  • backgroundColor - если установлено, вместо эффекта «размытия» отображается желаемый цвет.
  • fadeIn - эффект затухания при отображении исходного изображения.

Cloudinary

  • urlParams - Cloudinary может принимать множество параметров преобразования изображения. Задайте то, что вам нужно, в строковом формате, например: ‘g_center, c_scale, r_max`
  • imgFormat - это параметр преобразования изображения format, но он очень важен и имеет собственную опору в компоненте.
  • quality - облачный параметр quality, как указано выше

Обратные вызовы

  • onLoad - ›обратный вызов при загрузке исходного изображения
  • onError - ›обратный вызов, когда изображение не загружается

Ссылки