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">

有关更多信息，您可以 click here

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

4 个答案:

SRCSET

尺寸