With the web3 apps growing, more and more dApps are needing to retrieve images from decentralized storage networks like IPFS and Filecoin. Based on the research, we have found that most dApps do not require showing the original photos but only show thumbnails, avatars, or compressed and resized images, for example, the NFT marketplaces, the crypto games, the Metaverse, and the dApps, etc. As you may know, if you use an IPFS CID (content identifier) to fetch the image, it will return the original size. Unfortunately, there is no straightforward and native approach to automatically make images from decentralized storage networks fit into the responsive UI.
The Imghub (former Img8 protocol) provides a gateway with native image processing and optimization protocol for IPFS and Filecoin to web3 developers, designers, and creators. They can specify what they need in the query parameters of the gateway access URL like
https://gateway.omnidata.xyz/ipfs/CID?w=200and it will return the compressed and resized image with a width of 200px. It's easy peasy.
Get the original image by using the IPFS CID:
Get resized image by using the IPFS CID:
Generate a circled avatar image:
Compositing a new image over the processed image: