CODEWITHSUNDEEP
phpamazon-web-servicesfileamazon-s3
khushboo
khushboo

Reputation: 715

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.

Upvotes: 5

Views: 4370

Answers (4)

Aress Support
Aress Support

Reputation: 1425

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

Upvotes: 1

Vikas Srivastava
Vikas Srivastava

Reputation: 21

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

Upvotes: 0

Yash Bindlish
Yash Bindlish

Reputation: 600

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.

Upvotes: 6

pcgben
pcgben

Reputation: 756

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

Upvotes: 0

Related Questions