# Using the Images API

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/contentstack-for-developers/using-the-images-api |
| **course_slug** | contentstack-for-developers |
| **lesson_slug** | using-the-images-api |
| **markdown_file_url** | /academy/md/courses/contentstack-for-developers/using-the-images-api.md |
| **generated_at** | 2026-05-04T05:36:51.230Z |

> Part of **[Contentstack for Developers](https://www.contentstack.com/academy/courses/contentstack-for-developers)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"15","type":"text","duration_minutes":1,"topics":["Using","the","Images","API"]} -->

#### Lesson text

# 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.  **Flexibility**: 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](https://www.contentstack.com/docs/developers/apis/image-delivery-api/#introduction).  

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](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](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b227000df104193/67dc54ed4a89c32ebfa2f78a/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](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](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta7976efcf6431992/67dc5524460eb47ea2946bed/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](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e849a1eb5110a73/67dc5540f7eccc98ca90cc79/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](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2cbba66331047777/67dc5553443bd63ff1f1bec6/CSforDev_L15_ImagesAPIresize.png)

#### Key takeaways

- Connect **Using the Images API** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

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 t

### Retrieval tags

- Using
- the
- Images
- API
- contentstack-for-developers
- lesson 15
- Using the Images API
- contentstack-for-developers lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "15" and topics: [Using, the, Images, API].
Parent course slug: contentstack-for-developers. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

| Label | URL |
| --- | --- |
| CSforDev\_L15\_Response200.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b227000df104193/67dc54ed4a89c32ebfa2f78a/CSforDev_L15_Response200.png` |
| CSforDev\_L15\_AutoOptimize.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta7976efcf6431992/67dc5524460eb47ea2946bed/CSforDev_L15_AutoOptimize.png` |
| CSforDev\_L15\_ImagesAPI.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e849a1eb5110a73/67dc5540f7eccc98ca90cc79/CSforDev_L15_ImagesAPI.png` |
| CSforDev\_L15\_ImagesAPIresize.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2cbba66331047777/67dc5553443bd63ff1f1bec6/CSforDev_L15_ImagesAPIresize.png` |

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| online documentation | `https://www.contentstack.com/docs/developers/apis/image-delivery-api/#introduction` |
| https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images | `https://www.contentstack.com/docs/developers/apis/image-delivery-api/#resize-images` |
| CSforDev\_L15\_Response200.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b227000df104193/67dc54ed4a89c32ebfa2f78a/CSforDev_L15_Response200.png` |
| https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization | `https://www.contentstack.com/docs/developers/apis/image-delivery-api/#enable-auto-optimization` |
| CSforDev\_L15\_AutoOptimize.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta7976efcf6431992/67dc5524460eb47ea2946bed/CSforDev_L15_AutoOptimize.png` |
| CSforDev\_L15\_ImagesAPI.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e849a1eb5110a73/67dc5540f7eccc98ca90cc79/CSforDev_L15_ImagesAPI.png` |
| CSforDev\_L15\_ImagesAPIresize.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2cbba66331047777/67dc5553443bd63ff1f1bec6/CSforDev_L15_ImagesAPIresize.png` |