Блог

У меня есть приложение react, в котором есть много ссылок на изображения (теги <img src=... /> и css background:url(...) ).

Эти изображения размещаются в хранилище Azure.

Чтобы ускорить время загрузки моего приложения на различных устройствах (настольных и мобильных), мне нужно изменить размер этих изображений до того, как они попадут на клиент, то есть где-нибудь на сервере.

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

1. Выберите каждое изображение и создайте их несколько версий для различных стандартных размеров устройств. Затем выберите каждый <img src=... /> тег и, используя JS, измените имя изображения таким образом, чтобы был получен правильный размер изображения. Это не будет работать с css.
2. Используйте Azure CDN для автоматического изменения размера изображений. Я надеялся, что изменение размера произойдет автоматически, поскольку портал CDN извлекает пользовательский агент с устройства. Кто-нибудь знает, правда ли это?
3. Обслуживайте изображения с помощью функции Azure, изменяя их размер на лету (как предлагается здесь)

Может кто-нибудь предложить другие варианты, о которых они могут подумать, или плюсы / минусы вышесказанного.

Поскольку вы используете javascript, используйте тег window . Для браузеров вкладка window измеряет разрешение браузера, и вы можете установить высоту и ширину вашего изображения в window.innerHeight и window.innerWidth. Есть несколько других способов сделать это, но это самый простой и наиболее оптимизированный, если ваш проект кодирования должен быть эффективным с наименьшим количеством необходимых строк кода.

Подробнее об объекте window здесь: https://www.w3schools.com/js/js_window.asp

PS это только решение для настольных компьютеров, для мобильных устройств вы можете использовать screen.width, screen .высота. Это может не работать на рабочем столе, но на устройстве macOS Big Sur это работает, я попробовал (это может быть потому, что macOS Big Sur похож на оптимизированный для мобильных устройств интерфейс, учитывая, что вы даже можете запускать на нем приложения для iOS, но мы не знаем, пока не попробуем). Это может быть лучшим вариантом, поскольку, скорее всего, оно распространено на всех ваших устройствах.

Подробнее об объекте screen здесь: https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php

Если ни одно из них не является общим для всех ваших целевых устройств, попробуйте создать программу-детектор, с помощью которой вы можете определить тип устройства и сохранить его в переменной. Затем создайте 2 оператора if, в которых говорится

 if(deviceType = iOS){
<img src=..., screen.width, screen.height/>
}else if(deviceType = Windows){
<img src=..., window.innerWidth, window.innerHeight/>
}
 

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

Лучшая часть этих опций заключается в том, что вместо переделанных копий самого изображения это изменит размер самого изображения, что сэкономит место для хранения и исключит возможность использования пользователем неожиданного вывода на дисплей, например, 49-дюймовый монитор Samsung Odyssey G9, разрешение которого чрезвычайно далеко от того, что вы могли ожидать, иизменен размер. Это также означает, что вам не нужно создавать отдельный файл только для создания кода изменения размера изображения, только для определения ОС (не обязательно, если работает объект screen), что уже было бы сделано, поскольку мы говорим о Azure, и они всегда определяют свою пользовательскую базу.

Если у вас есть какие-либо вопросы, пожалуйста, ответьте.

Удачи!