Проблема?
По данным Neil Patel, akamai.com и Gomez, около 40% людей покидают веб-сайт, если для его загрузки требуется более 3 секунд. Более того, половина пользователей Интернета ожидают, что контент будет загружен в течение 2 секунд!
Есть несколько элементов, которые могут замедлить работу веб-сайта и вызвать этот «эффект», давайте сосредоточимся на одном моменте - изображениях.
Вот как можно обработать изображения, чтобы они загружались быстрее и не замедляли работу страницы:
- Уменьшите большие изображения до размера, необходимого для вашего дизайна - даже на настольном компьютере нет необходимости использовать максимально возможное изображение.
- Удалить метаданные из доставленных изображений - по умолчанию изображения содержат много информации, полезной для фотоаппаратов и графических приложений, но не для ваших веб-пользователей.
- Отформатируйте изображения в новые форматы, такие как JPEG-XR и WebP - распространенные форматы, такие как PNG, JPG или GIF, не оптимизированы для отправки по беспроводной сети.
- Более низкое качество изображения - многие изображения имеют сверхвысокое разрешение, однако качество можно снизить без какого-либо значительного визуального воздействия.
- Используйте отложенную загрузку - позвольте вашим изображениям ждать загрузки, пока пользователь не прокрутит их вниз, это действительно может сократить время инициализации страницы.
- Удерживайте позицию элемента, чтобы страница не перескакивала во время загрузки изображений.
- Используйте технику «Размытие» - покажите изображение с очень низким разрешением перед загрузкой оригинала.
- На небольших устройствах уменьшайте изображение еще больше - мобильные телефоны обычно имеют более медленное подключение к Интернету, а на маленьких экранах пользователям не нужно сверхвысокое разрешение.
Оптимизация изображений вручную могла быть настоящей пыткой. Но послушайте, как говорит Бобби Макферрин, «не волнуйтесь» - для вас есть готовый пластырь.
Решение!
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 - ›обратный вызов, когда изображение не загружается