Decreasing size of the images, fetched from IPFS, before rendering

Question

In my project, there is a section where dozens of NFTCards get rendered, including NFT's pictures and other information. Since the quality of those images is high and their sizes are usually too large to render, the webpage takes too much time to render and load completely, which is so boring for the end user.

NFT marketplaces also encounter this problem, as they need to fetch many images from IPFS and render them on a single page simultaneously.

To wrap up, my current purpose is to find a trick to decrease the size of the images fetched from IPFS and render them with a lower quality afterward!

Here is the line I have dedicated to images of the nft cards.

<img className="object-cover h-110 rounded-t-md" src={nft.metadata?.image}></img>

The src={nft.metadata?.image} refers to the response from the Moralis NFT API that I use to fetch NFTs.

Any tip about the user interface tricks or the fetching procedure would be appreciated!

Answer 1

I think it is not possible until we cache the image somewhere on the server before downloading, which contradicts using IPFS.

One way to overcome slow loading is to pick an IPFS gateway that is faster in the location. Visit IPFS gateway checker to find out the fastest gateway nearer to the client location. https://ipfs.github.io/public-gateway-checker/

And also the images loaded in the browser are auto cached so if you are loading the same IPFS image twice in the same browser it will load faster.

I don't know if there will be a valid solution to solve IPFS load times until the IPFS gateways get faster.