面对来自AWS S3的图像加载问题

Question

我在PHP中有API，在API中我在AWS S3中上传图像正在按预期工作，但是从S3获取数据需要花费太多时间在移动设备上加载。

任何人都可以帮我修复慢图像加载问题吗？

我正在寻找在Android和IOS中加载快速图像的最佳方法。

注意：我没有使用任何拇指图像。

Answer 1

正如您所提到的，移动设备上的图像需要时间，因为这可能是由于不同屏幕尺寸的不同尺寸造成的。 理想情况下，您应该期待以下选项：

1）将图像调整为目标大小（缩略图，预览，全尺寸......），并针对不同的屏幕尺寸使用不同的大小。

2）使用压缩来压缩现有的图像文件

3）最佳选择是集成CDN以实现基于云的图像加速和传送服务。

理想情况下，使用像Cloudfront这样的CDN是加速图像的第一步。

Answer 2

使用基本上与完整桌面成比例的单个图像大小会导致加载缓慢，因为图像大于移动所需的图像。 结果，页面和图像加载缓慢。

从S3存储桶加载快速映像的最佳方法是使用“AWS CloudFront”服务。

CloudFront利用其全球数据中心网络（称为边缘位置）加速内容交付，通过将内容缓存到最终用户附近来缩短交付时间。

有关CloudFront分配的部署，请参阅以下链接： https ： //docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html

Answer 3

您应该能够在客户端使用lazyload来解决缓慢加载问题。

Answer 4

你可以使用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">

有关更多信息，请单击此处