What are the best practices for serving images?

Hello friends,

I am building an ecommerce site with reactjs. It will have a storefront website, a back end api, and some added interface for content management when the owner is logged in.

What are the best practices related to serving images? What modifications will have the biggest performance impact?

As such large files I’m sure some aspects of the process are more important than others. One approach would be serving the files each to their own page, and the data objects held within the store’s state containing strings with the respective image url. Alternatively each image have its own fetch call from the server with an api call, though maybe thats similar really under the hood.

Also there is the question of lazy loading, I am having a hard time telling how important that is. I would like to build the app in scalable manner, so that as the number of images grows the burden is managed appropriately.

Haven’t been satisfied with what I found reading or searching thus far, so here is the ask. Thanks in advance :+1:t6:

There are quite a few, depending on how hard do you want to dive into this :slight_smile:

First of all, images like as well as any other static files shouldn’t be served with Nodejs, as it really suck at it. You can configure nginx to serve static files directly and pass all other api calls to nodejs port.

Secondly, you really really need optimize images on upload. There couple apis and apps, generally apis are paid and apps (for Linux) are free but require a little more hassle. On API side the best optimizer I found is Kraken and on Linux side I really like jpegoptim