Сжатие изображений при загрузке с удаленного сервера - PullRequest
Новая
       10

Сжатие изображений при загрузке с удаленного сервера

0 голосов
/ 03 января 2019

У меня есть клиентское приложение JavaScript, которое использует API другой организации для получения данных.Теперь есть много изображений, которые URL-адреса посылают через API.

Однако изображения слишком велики, то есть имеют объемный размер около 1 МБ каждое.Если я вставлю URL-адрес изображения в тег img, то при загрузке страницы замедляется, поскольку при отображении страницы необходимо отображать сотни изображений.

Есть ли способ сжать изображение на стороне клиентапотому что мой API - это провайдеры, которые только что сказали "нет" для отправки сжатых URL-адресов изображений.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Я согласен с ответом Мосе Рагуццини

Сжатие изображения в интерфейсе не всегда рекомендуется.

Вы должны сжать / оптимизировать изображения перед отправкой на клиентскую сторону.Страница медленная, так как для получения контента требуется только API.Я предполагаю, что вы не используете показ изображения с использованием данных: / как вы уже упоминали, вы используете URL в теге изображения.

Вы также можете сделать следующее.

  1. Даже несмотря на то, что API других организаций не может сжимать его, вы можете создать некоторый внутренний API, который сделает это за вас, или также доступны сторонние инструменты.
  2. Загрузка изображения, когда это необходимо (Lazyзагрузить) Пожалуйста, обратитесь к этому URL для получения дополнительной информации https://stackoverflow.com/search?q=Lazy+loading+images+javascript
0 голосов
/ 03 января 2019

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

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

Несмотря на то, что вы можете сжимать изображения на стороне клиента, это не помешает загрузить их с сервера (в вашем случае 100 img = 100MB)

Естьмножество пакетов npm, которые лениво загружают компоненты (и, следовательно, образы) для вас, например this

...