Facing image loading issue from AWS S3

问题

I have API in php and in that API I have upload images in AWS S3 is working as expected, however fetch data from S3 it takes too much time to load on a mobile device.

Can any one help me to fixed slow image load issue?

I'm looking best way to load fast image in android and IOS.

Note: I'm not using any thumb for image.

回答1:

As you have mentioned image on mobile is taking time as this can be due to different sizes for different screen sizes. Ideally you should look forward for following options:

1) resize the images to the target size (thumbnail, preview, full size, ...) and have different sizes for different screen sizes.

2) use compression to compress your existing image file

3) Best option is to integrate CDN for Cloud-based image acceleration and delivery service.

Ideally, Using a CDN like Cloudfront is the first step towards accelerating images.

回答2:

Use of single image size which is basically proportioned for a full desktop, results in slow loading as the image is larger than it needs to be for mobile. As a result, pages and images load slowly.

The best way you can load the fast image from your S3 bucket is using “AWS CloudFront” service.

CloudFront speeds up content delivery by leveraging its global network of data centers, known as edge locations, to reduce delivery time by caching your content close to your end users.

For deployment of CloudFront distribution please refer the below link: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html

回答3:

You should be able to use lazyload on the client side to address the slow loading issue.

回答4:

you can use srcset and sizes Attributes for load in mobile because its allow us to serve different scaled images based on the size of the display.

SRCSET

example

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

Sizes

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

for more information you can click here

来源：https://stackoverflow.com/questions/55350311/facing-image-loading-issue-from-aws-s3