How to Resize NFT Images and Thumbnails with NFT API

Written by Killiane Menand

Published on October 1, 20242 min read

---

When working with Alchemy's NFT API, you may need to resize images or thumbnails to fit different device screens or layouts. This guide will walk you through resizing both while maintaining the correct aspect ratio.

Resizing NFT thumbnails

Thumbnails are automatically generated and cached in the payload response for convenience. These are smaller, compressed versions of the original image optimized for quick loading.

Example of a thumbnail URL:

How to resize thumbnails:

To resize a thumbnail, you can modify the Cloudinary URL by adding specific width (`w_`) and height (`h_`) values. For example, to set a width of 256 pixels while keeping the original aspect ratio, you would do the following:

This resizes the thumbnail to a width of 256 pixels while maintaining its aspect ratio. You can also define height (`h_`) if needed.

Customizing thumbnail size:

You can use any combination of width and height values to get the desired size:

Resizing NFT images

Original images are the high-resolution versions of the NFTs and are also stored on Alchemy's CDN. These can be resized similarly to thumbnails but require a different approach for optimal quality.

Example of an image URL:

How to resize images:

To resize the original image while keeping the aspect ratio, use Cloudinary’s width (`w_`) and height (`h_`) values in the URL like this:

This will return the image resized to a width of 256 pixels, with the aspect ratio maintained. You can adjust the width or height as needed.

Customizing image size:

Just like with thumbnails, you can use any width and height values to resize the original image:

Key differences between NFT thumbnails and images

- Thumbnails: Compressed, smaller versions for quick loading. Best for previews and small display areas.

- Images: Full-resolution, high-quality versions of the NFT asset. Best for larger screens or when displaying full details of the NFT.

Important notes

- Thumbnails and images are resized through Cloudinary but have different URL paths, so be sure to modify the correct URL.

- Always maintain the aspect ratio by using only width (`w_`) or height (`h_`) unless you need to alter the ratio intentionally.

Summary

- For thumbnails, modify the URL like this:

- For images, modify the URL like this:

This approach ensures that you can resize both the thumbnail and the original image while maintaining the aspect ratio and optimizing for different display needs!