• Are you a partner? Please find our certification tracks on our legacy Academy.

Contentstack for Developers

Course Home
1. What We'll Build
3min
2. Getting Started
3m 44s
3. Big Picture Architecture
4m
4. Architecture Walkthrough
2m 53s
5. Environments Walkthrough
3m 5s
6. Using the Content Delivery API
2min
7. Using the Content Delivery API documentation
8. Querying the Content Delivery API with the Documentation Walkthrough
2m 15s
9. Using the Postman collection to connect with the Content Delivery API
4m 30s
10. Using Postman to query the Contentstack Content Delivery API Walkthrough
3m 24s
11. Using the JavaScript Content Delivery SDK
3m 45s
12. Using the GraphQL API with Postman
3m 30s
13. CDN and Caching
2m 30s
14. Query Examples with the Content Delivery API
3m
15. Using the Images API
4m 30s
16. Creating the Hero Detail Page
12m 45
17. Creating the Hero Gallery Page
15m
18. Design Patterns with Content Types
4m 30s
19. Deploying the Starter App with Contentstack Launch
5m 15s
20. Importing Content with the CLI and CMA
7m 45s
21. Working with Roles and Permissions
6m 25s
22. Workflow
4m 30s
23. Webhooks
4m
24. Automate- Using an HTTP Connector to Send Data to a 3rd Party System
7m 15s
25. What is Contentstack Marketplace?
2m
26. Using Marketplace Apps
4m 45s
27. Installing the NextJS Starter App with the CLI
10m 35s
28. Helpful Resources
1m 45s

Using the Images API

Using the Contentstack Images API

Welcome, developers, to the Contentstack Images API! As you may know, images are an integral part of any digital experience, and we understand the importance of delivering optimized images quickly and efficiently. That's why we've created the Contentstack Images API, a powerful tool that allows you to manipulate, optimize, and deliver images to your web and mobile applications. Whether you're new to the platform or a seasoned developer, this guide will provide you with everything you need to know to get started with the Contentstack Images API. So let's dive in and explore the possibilities of this powerful tool together!

Here are three advantages to using the Contentstack Images API:

  1. Performance: The Contentstack Images API allows you to deliver optimized images at scale, reducing load times and improving the overall performance of your web and mobile applications.

  2. lexibility: With the Contentstack Images API, you have the flexibility to resize, and transform images in real-time, giving you the ability to customize images to fit any layout or design.

Trying out the Image Delivery API

The quickest way to get started with the Image Delivery API is to try it out with the online documentation.  

Resize an image on the fly

Contentstack's Images API resizes images on the server and provides the resized file in the response.  This is highly performant as the resized image is stored in the CDN cache on the Contentstack side.

Exercise:  Resize an image with the Contentstack Images API

1. Go to the following URL, https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images

2. Update the width of the image and see the image size and dimensions being changed

CSforDev_L15_Response200.png


Exercise: Auto-optimizing images with webp

1. Navigate to the Automate Optimization section of the documentation, https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization

2. Leave the default as webp in the query parameters

CSforDev_L15_AutoOptimize.png

Using the Images API in your NextJS Applications

Pass the width, height, or auto attributes to the src property in the img tag

CSforDev_L15_ImagesAPI.png

Exercise: Use the Images API to resize the home world image

1.  Update the NextJS code to apply a width param of 150px to the home world image.  This resizes the image on the server-side and improves the performance of the page load.
CSforDev_L15_ImagesAPIresize.png