I have a problem rendering images with large file sizes. When I upload a lot of large file sizes of images and display them, it becomes very laggy.

My question is:

The ideal way is the backend should provide an very small image file size url? Or the frontend can do it using Canvas API?

Could you provide an explanation please? Thank you

CodePudding user response：

If you have a bunch of thumbnails to display, the source images for those thumbnails should definitely not be the original, full-size images. If those images are large, it will take a long time for the client to download them, no matter how you render them on the client.

When figuring out an image to be shown to client, you should have two versions on the server:

• Thumbnail version - low resolution, small file size, easy to download and render many at once
• Full-size version, downloaded when the user wants to zoom in on one of them

It could be that the full-size version should not necessarily be the original image. For example, if the original image is 20MB (yes, they can exist), you wouldn't want to burden clients with that. So you'd want to perform resizes and optimizations on the server for both the thumbnail version and the "full" version - enough such that there isn't much of a delay between when the client tries to zoom in and the full-size image fully loads.

CodePudding user response：

My recommendation is that you convert the image type to something more performant like .webp or .jpeg and give the element the exact width and height properties.

And react also have a feature to lazy load your images using react.lazy() that can boost your web performance significantly

CodePudding user response：

Handling large images is too much work for a frontend client. You should get these images at a smaller size in order to just show them as they are.

Imagine someone trying to use your application with an old computer, or even an old smartphone, you shouldn't rely on client's processing power to handle all this heavy work.

I hope my answer helps you!

CodePudding user response：

Jpegs are what you should be using, look at functionPreload() as well