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.
?auto=format is not supported. Thank you for your understanding.For other available formats, please refer to the Supported as input format below.
The Image API is applied by appending parameters to the end of the URL when displaying images retrieved from microCMS on the frontend.
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.
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
}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) => ( ))}
) }
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.
You can specify the w and h parameters for each image within the rich editor. For instructions on how to set this up, please refer to the "How to Use the Rich Editor".
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.
