Big Enhancements to Our NFT API: Enhanced Thumbnails and Previews!

Covalent has rolled out major upgrades to its NFT API to include enhanced thumbnails, blurred previews, asset dimensions and dominant colours.

2024-06-14

If you're a developer working in the NFT space, you know how tricky it can be to make your digital assets stand out. Manually resizing images for different platforms, dealing with inconsistent previews, and handling a lack of detailed asset information can be a real pain. These issues not only slow down your workflow but can also harm the user experience, which might negatively impact how your NFTs are perceived and valued.

But here’s the good news: we’ve just rolled out major upgrades to our NFT API, designed to simplify these processes. These new features aim to make your development smoother and your users' experiences more visually appealing. With enhanced visual presentation and detailed insights into your NFTs, your apps and platforms are set for a significant upgrade in both functionality and aesthetics.

Why You'll Love This Upgrade to Our NFT API

When users open an app that showcases NFTs, first impressions are crucial. We’ve zeroed in on two key areas to help you engage your audience right from the start:

Enhanced Thumbnails and Previews

Forget about the hassle of resizing images and managing placeholders. Our API now provides a variety of optimized thumbnail sizes that are ready to use across all platforms, including those perfect for OpenGraph. No matter the device or platform, your NFTs will display beautifully and consistently, boosting your brand’s visibility.

Blurred Previews for Optimized Loading

In addition to the new thumbnail sizes, our NFT API now includes a fantastic blurred preview feature. This uses a base64 encoded hash of the thumbnail, which developers can easily decode into a stylish, blurred image. Not only does this enhance the aesthetic appeal during the loading process, but it also significantly reduces initial load times, keeping users engaged right from their first interaction with your app.

This feature is perfect for holding user interest while they wait for high-quality images to load completely. It provides a seamless transition from a blurred preview to a detailed final image. This way, your app feels fast and responsive, even when handling high-resolution media.

Our improved preview capabilities ensure that your assets—whether SVGs, MP4s, or GIFs—are shown in crisp, clear quality. This means users will enjoy sharp, engaging previews that draw them in and give them confidence to explore your offerings further.

Detailed Insights at Your Fingertips

Getting to know the finer details of your NFTs has never been easier. Our new asset_properties feature gives you essential information like dimensions and dominant colors, which can help you design interfaces that are not just functional but also visually harmonious with the displayed assets.

"asset_properties": {
    "asset_width": 2700,
    "asset_height": 2700,
    "dominant_color": "#CC6BAA"
}

Example of Enhanced API Response

Here's a complete example at what the new API response looks like, showing all of the new fields available to you:

{
  "data": {
    "updated_at": "2024-06-14T16:54:26.421152094Z",
    "items": [
      {
        "contract_name": "PudgyPenguins",
        "contract_ticker_symbol": "PPG",
        "contract_address": "0xbd3531da5cf5857e7cfaa92426877b022e612cf8",
        "is_spam": false,
        "type": "nft",
        "nft_data": {
          "token_id": "3000",
          "token_url": "<https://ipfs.covalenthq.com/ipfs/QmWXJXRdExse2YHRY21Wvh4pjRxNRQcWVhcKw4DLVnqGqs/3000>",
          "original_owner": null,
          "current_owner": "0x589668303d20bf9d820a3836658a4960475fdaa4",
          "external_data": {
            "name": "Pudgy Penguin #3000",
            "description": "A collection 8888 Cute Chubby Pudgy Penquins sliding around on the freezing ETH blockchain.",
            "asset_url": "<https://nftassets.covalenthq.com/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
            "asset_file_extension": "png",
            "asset_mime_type": "image/png",
            "asset_size_bytes": "232474",
            "image": "<https://nftassets.covalenthq.com/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
            "image_256": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=256,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
            "image_512": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=512,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
            "image_1024": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=1024,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
            "animation_url": null,
            "external_url": null,
            "attributes": [
              {
                "trait_type": "Background",
                "value": "Blue"
              },
              {
                "trait_type": "Skin",
                "value": "Maroon"
              },
              {
                "trait_type": "Body",
                "value": "Tank Top Yellow"
              },
              {
                "trait_type": "Face",
                "value": "Blushing"
              },
              {
                "trait_type": "Head",
                "value": "Flat Cap Tan"
              }
            ],
            "thumbnails": {
              "image_256": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=256,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
              "image_512": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=512,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
              "image_1024": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=1024,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
              "image_opengraph_url": "<https://nftassets.covalenthq.com/cdn-cgi/image/width=1200,fit/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
              "thumbhash": "LPgJNwrF3ZicSYSHh/ZGiGiEaTB4CHMG"
            },
            "image_preview": "<https://nftassets.covalenthq.com/dd2e31a82b1928fac2adb43c6f5d1a5ad547ddec5a59af315c57d86998bad4ff.png>",
            "asset_properties": {
              "asset_width": 2700,
              "asset_height": 2700,
              "dominant_color": "#BDE9F3"
            }
          },
          "asset_cached": true,
          "image_cached": true
        }
      }
    ],
    "pagination": null
  },
  "error": false,
  "error_message": null,
  "error_code": null
}

Practical Use Cases for NFT Thumbnails

These upgrades aren’t just about looking good—they’re about making your applications more robust and user-friendly. Here’s how you can leverage these new features:

Dynamic Galleries: Automatically adjust the layout and design of your NFT galleries based on asset properties to create a visually cohesive experience.
Marketing and Social Sharing: Use optimized thumbnails for social media to boost engagement and visibility of your NFTs across different platforms.
Custom User Interfaces: Tailor your app’s UI to reflect the unique characteristics of each NFT, enhancing the overall user experience.

Ready to Get Started?

These new tools are here to help you cut down on development time while delivering a more polished and engaging end product. We’re excited to see how you’ll use these enhancements to delight your users and take your projects to the next level.

The enhanced thumbnails and previews are available throughout all NFT endpoints that return metadata.

We’re always here to support you, so if you have feedback or need help integrating these new features, don’t hesitate to reach out.

Explore these new capabilities, and let us know what you think! 🎉

Q2 2024 Product Update

StakeKit and Covalent—Driving Innovation in DeFi Asset Management