microCMS has a feature called the Image API that allows you to edit images.

Even if you don't edit during the upload, you can perform various edits by adding parameters to the image URL after uploading.

For image processing, we utilize imgix's Rendering API.
In addition to the parameters listed in this document, there are other available parameters.
For more details about the API, please refer to the official imgix reference.

Available Main Image Formats

• JPEG
• PNG
• GIF
• WebP
• HEIC/HEIF

For other available formats, please refer to the Supported as input format below.

How to Apply the Image API

The Image API is applied by appending parameters to the end of the URL when displaying images retrieved from microCMS on the frontend.

How to Apply to Image Fields and Multiple Image Fields

When you register images in an image field or multiple image field, a response containing the image URLs is returned.

// Image Field
"image": {
        "url": "https://images.microcms-assets.io/assets/xxxx/yyyy/image.png",
        "height": 630,
        "width": 1200
}

// Multiple Image Field
"imageList": [
        {
                "url": "https://images.microcms-assets.io/assets/xxxx/yyyy/image1.png",
                "height": 630,
                "width": 1200
        },
        {
                "url": "https://images.microcms-assets.io/assets/xxxx/yyyy/image2.png",
                "height": 630,
                "width": 1200
        }
]

You can apply the Image API by adding parameters to the end of this URL. Below is an implementation example.

Implementation Example for Applying to Image Field

export default async function Page() {

    // Fetch data for the image field
    const { image } = await client.getListDetail({
        endpoint: 'post',
        contentId: 'contentId',
    })

    // Add parameters to the URL of the retrieved image
    const optimizedImage = `${image.url}?w=600`

    return 
}

Implementation Example for Applying to Multiple Image Field

export default async function Page() {

    // Fetch data for the multiple image field
    const { images } = await client.getListDetail({
        endpoint: 'post',
        contentId: 'contentId',
    })

    // Add parameters to the URL of each image registered in the multiple image field
    const optimizedImages = images.map(image => `${image.url}?w=600`)

    return (
        

{optimizedImages.map((url, index) => ( ))}

) }

How to Apply to Images in the Rich Text Editor

The response for data registered in the Rich Text Editor is in HTML format, so you need to extract the image URL parts to apply the Image API.
Please refer to the help article "How to Apply the Image API to Images in the Rich Text Editor" for the application method.

Main Parameters

The main parameters that can be used with the Image API are as follows. By combining these parameters, you can flexibly adjust the format, size, and quality of the images.