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 images are registered in image fields or multiple image fields, 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 Images

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 fetched image
    const optimizedImage = `${image.url}?w=600`

    return <img src={optimizedImage} alt='' />
}

Implementation Example for Applying to Multiple Image Field Images

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 URLs of each image registered in the multiple image field
    const optimizedImages = images.map(image => `${image.url}?w=600`)

    return (
        <div>
            {optimizedImages.map((url, index) => (
                <img key={index} src={url} alt='' />
            ))}
        </div>
    )
}

How to Apply to Images in the Rich Editor

The response for data registered in the Rich Editor is in HTML format, so to apply the Image API, you need to extract the image URL part.
Please refer to the help article "How to Apply the Image API to Images in the Rich 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.