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

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!

Fetching all ERC1155 tokens of a smart contract ( The smart contract is not the minter )

In my project, I encountered a situation where I needed to fetch the ERC1155 tokens that a specific smart contract owns ( Assuming that I have already transferred a bunch of ERC155 tokens to it from another smart contract )

Alchemy has already provided valuable solutions ( Alchemy SDK ) for fetching all NFTs of an address ( EOA ) or fetching a whole NFT collection. Still, my need is different now as my target owner is not an EOA but a smart contract itself.

Is there a solution to this? Or I should query the whole contract’s events?