Hackernoon logo

Как интегрировать образ CDN в ваше приложение React | Хакер полдень

Аватар профиля автора

@jonarnesЙон Арне Стерос

Вице-президент по ScientiaMobile

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

Поиск правильного баланса между резкостью и весом картинки для каждого случая может показаться сложным. Сложность разметки возрастает довольно быстро, Тем не менее, оптимизация изображений дает огромный выигрыш в производительности, который сразу же отражается во всех важных показателях, таких как время загрузки страницы и коэффициент конверсии.

Напрашивается вопрос:

«Как справиться с этой сложностью, не жертвуя слишком много времени и денег?»

Мы все могли бы время от времени использовать руку помощи

Специализированная сторонняя служба, называемая Изображение CDN может помочь вам значительно ускорить доставку вашего изображения. Он предназначен для предоставления эффективных изображений посетителям вашего сайта по всему миру, используя глобальную сеть серверов.

Обещание такой системы состоит в том, чтобы адаптировать каждое изображение к конкретным требованиям пользователя на лету, обеспечивая бесперебойную работу и легкое масштабирование.

При использовании Image CDN вы обычно включаете только одну версию с высоким разрешением для каждого изображения на своем веб-сайте. Каждый другой аспект обрабатывается для вас автоматически:

  • Переключение разрешения, масштабирование и обрезка;
  • Регулировка компрессии при сохранении качества;
  • Выбор наиболее эффективного формата файла изображения;
  • Ускоренное обслуживание последующих запросов (98% кеша);
Многие компании предлагают автоматическую оптимизацию изображений. Я хотел бы сосредоточиться на ImageEngine в этой статье, поскольку он использует уникальный алгоритм обнаружения устройства, который делает его действительно выделяющимся из пакета.

Интеграция ImageEngine на ваш сайт

Если вы хотите следовать, подписаться на бесплатный пробный аккаунт прежде чем двигаться дальше. После регистрации пробной учетной записи вы получите доступ к панели управления, где вы можете настроить ImageEngine для своего приложения.
Я построил демонстрационное приложение продемонстрировать, насколько проста интеграция на уровне приложений. Это займет всего 2 простых шага, чтобы начать работу — давайте перейдем к этому.

Шаг 1. Укажите ImageEngine на изображения

С ImageEngine вам не нужно повторно загружать ваши изображения — все остается на месте. Вам нужно только указать службе, где они расположены (действующий домен веб-сайта, корзина S3 и т. Д.), Чтобы он знал, откуда взять изображения. Это делается путем установки происхождения,
Если вы посмотрите на структуру демонстрационного проекта, вы увидите, что все картинки находятся внутри

public/images

папка:

|-- public
  |-- images
    |-- pic_1.jpg
    |-- pic_2.jpg
    |-- pic_3.jpg
Поскольку на изображения ссылаются непосредственно (например,

), источник должен быть установлен в домене предварительного просмотра приложения: https://l9dlm.csb.app/

Шаг 2. Proxy Image Requests

Хотите верьте, хотите нет, мы почти закончили! Последнее, что осталось сделать, — это добавить существующие пути к изображениям custom `imgeng.in`hostname сгенерировано для вас в приборной панели. Вы можете использовать тот, который назначен вам автоматически после завершения регистрации (выглядит как

zyx123.cdn.imgeng.in

) или придумайте свое имя. Я сделал последнее, называя мой

codesandbox.io

— и получил

codesandbox.io.imgeng.in

имя хоста в результате. В любом случае, убедитесь, что происхождения имя хоста ImageEngine установлено правильно!

export default function Image({ src, alt, ...other }) {
  return (
    <img
      src={`//codesandbox.io.imgeng.in/${src}`}
      alt={alt}
      {...other}
    />
  )
}
И вот — теперь доставка вашего изображения зашкаливает!

jpg

превратился в

webp

Размеры не только оптимизированы, но и соответствуют размерам запрашивающего устройства.

Моделирование Galaxy S5, без дросселирования

Ноутбук с экраном HiDPI

Шаг 3 (необязательно). Лучшие практики и настройки

Чтобы получить максимальную отдачу от ImageEngine, рассмотрите возможность их список лучших практик, Например, включение Клиентские подсказки позволяет учитывать пользовательские настройки сохранения данных в браузерах на базе Blink. В случае, если вам нужно настроить изображения (изменение размера, обрезка и т. Д.), ImageEngine позволяет применять настройки с помощью специальных директивы,

Вывод

Изображение CDN это один из тех инструментов «никогда не оглядывайся назад». Плата за хорошо управляемый сервис, который решает от вашего имени довольно проблемную проблему (отзывчивые изображения), имеет большой смысл для меня как для разработчика. Интеграция без проблем, и вы можете спать спокойно ночью, зная, что ни один конечный пользователь никогда не останется беззащитным.

Отказ от ответственности: ImageEngine нами используется в качестве примера в приведенном выше. Я работаю с компанией, предоставляющей ImageEngine Image CDN.

Комментарии

Теги

Баннер Noonification

Подпишитесь, чтобы получать ежедневные обзоры лучших технических историй!



Источник: Как интегрировать образ CDN в ваше приложение React | Хакер полдень


Обратная ссылка при копировании статьи: Как интегрировать образ CDN в ваше приложение React | Хакер полдень

Leave a comment