Как своевременно визуализировать большие изображения из NewsAPI? ⇐ CSS

[Гость]

Я использую NewsAPI в React/TS для получения результатов поиска по статьям. API предоставляет только один URL-адрес изображения для каждой статьи, а предоставленные изображения сильно различаются по размеру и качеству. Большинство из них имеют ширину 1200 пикселей, а размеры варьируются от 25 КБ до 1,2 МБ (большинство из них около 70КБ).

В моем приложении я визуализирую все изображения с шириной от 230px до 345px в зависимости от размера области просмотра. Это отлично работает при первоначальном рендеринге, поскольку загрузчик покрывает страницу, однако я также лениво загружаю элементы статьи (которые содержат упомянутые изображения), и для рендеринга большинства из них требуется слишком много времени. Некоторые рендерятся мгновенно, некоторые — через пару миллисекунд (что визуально не приятно, но не так уж и важно), однако некоторые не только начинают загрузку через 1–3 секунды, но и затем загружаются «постепенно» (сверху вниз). внизу по вертикали — извините, я не знаю, есть ли настоящий термин для такого поведения).

Есть ли способ исправить эту проблему, чтобы все изображения загружались быстрее/своевременно? Если нет, есть ли способ узнать размер изображения при фильтрации полученных данных JSON и исключить эти объекты из JSON?