Проблема загрузки изображения из AWS S3

Question

У меня есть API в php, и в этом API у меня есть загрузка изображений в AWS. S3 работает должным образом, однако для извлечения данных из S3 требуется слишком много времени для загрузки на мобильное устройство.

Может любойпомогите мне решить проблему медленной загрузки изображения?

Я ищу лучший способ загрузить быстрое изображение в Android и IOS.

Примечание: Я не использую большой палец для изображения.

Answer 1

Как вы уже упоминали, изображение на мобильном телефоне требует времени, так как это может быть связано с разными размерами экрана для разных размеров. В идеале вам следует обратить внимание на следующие варианты:

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

2) использовать сжатие для сжатия существующего файла изображения

3) Лучшим вариантом является интеграция CDN для облачной службы ускорения и доставки изображений.

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

Answer 2

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

Лучший способ загрузить быстрое изображение из корзины S3 - использовать сервис «AWS CloudFront».

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

Для развертывания распространения CloudFront перейдите по ссылке ниже: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html

Answer 3

Вы можете использовать srcset и sizes Атрибуты для загрузки в мобильном телефоне, потому что это позволяет нам обслуживать различные масштабированные изображения в зависимости от размера дисплея.

SRCSET

пример

<img srcset="responsive-images-car-160.jpg 160w,
             responsive-images-car-320.jpg 320w,
             responsive-images-car-640.jpg 640w,
             responsive-images-car-1280.jpg 1280w"
     src="reponsive-images-car.jpg" alt="responsive images car">

Размеры

<img srcset="responsive-images-car-160.jpg 160w,
             responsive-images-car-320.jpg 320w,
             responsive-images-car-640.jpg 640w,
             responsive-images-car-1280.jpg 1280w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="responsive-images-car.jpg" alt="responsive images car">

для получения дополнительной информации вы можете нажмите здесь

Answer 4

Вы должны иметь возможность использовать lazyload на стороне клиента для решения проблемы медленной загрузки.