Оптимизируйте входящие изображения разных размеров
У меня есть приложение Angular, которое вызывает следующий API: https://aws.random.cat/meow
. Эта конечная точка возвращает URL-адрес изображения, которое я сейчас использую вsrc
атрибут тега изображения.
Формат возвращаемого URL-адреса следующий:
{
file: "https://purr.objects-us-east-1.dream.io/i/Tr08p.jpg"
}
Поскольку в этом случае размеры и разрешение изображений не известны заранее, и у нас нет никакого контроля над сервером, есть ли какие-либо возможности для оптимизации полученных изображений?
На данный момент я использовал фиксированный размер изображений, чтобы макет не мерцал при загрузке, и я могу думать о ленивой загрузке изображения (<img src="received_url" loading="lazy">
) в случае, если контейнер не виден на экране.
Однако я не знаю о других возможных оптимизациях, поскольку мы не контролируем источник изображений.