```
## Available Image Classes
The Cevoid CDN provides several pre-optimized image sizes:
| Class | Width (pixels) | Use Case |
| ---------- | --------------- | ----------------------------------- |
| `original` | Full resolution | High-quality displays, print |
| `1080` | 1080px | Desktop hero images, large displays |
| `750` | 750px | Tablet landscape, desktop cards |
| `640` | 640px | Tablet portrait, large mobile |
| `480` | 480px | Mobile landscape |
| `400` | 400px | Mobile portrait, thumbnails |
| `320` | 320px | Small mobile screens |
| `240` | 240px | Thumbnail grids |
| `160` | 160px | Small thumbnails, avatars |
## Example: transform an API image URL
When you fetch posts from the API, you'll receive image URLs like this:
```json theme={"system"}
{
"id": "WAz8eIbvDR60rouK",
"images": [
{
"url": "https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT",
"width": 1920,
"height": 1080
}
]
}
```
Transform the URL by adding the `class` parameter:
```javascript theme={"system"}
const originalUrl = 'https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT'
const optimizedUrl = `${originalUrl}?class=640`
console.log(optimizedUrl)
```
Result:
```text theme={"system"}
https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640
```
## Performance guidance
### Choose the Right Size
```
### Pick the nearest useful class
```javascript theme={"system"}
function getOptimizedImageUrl(originalUrl, targetWidth) {
const imageClasses = [160, 240, 320, 400, 480, 640, 750, 1080]
const bestClass = imageClasses.find((size) => size >= targetWidth) || 'original'
return `${originalUrl}?class=${bestClass}`
}
const imageUrl = 'https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT'
const optimized = getOptimizedImageUrl(imageUrl, 400)
```
## Best Practices
### 1. Match Image Size to Container
Always choose an image class that matches or slightly exceeds your container's display size:
```css theme={"system"}
.image-container {
width: 300px;
}
```
### 2. Consider Display Density
For high-density displays (Retina, etc.), use an image class that's 2x your container size:
```js theme={"system"}
const containerWidth = 200;
const pixelRatio = window.devicePixelRatio || 1;
const targetWidth = containerWidth * pixelRatio;
const optimizedUrl = getOptimizedImageUrl(originalUrl, targetWidth);
```
### 3. Lazy Loading
Combine image optimization with lazy loading for maximum performance:
```html theme={"system"}
```
### 4. Fallback Strategy
Always have a fallback for when optimized images fail to load:
```js theme={"system"}
function handleImageError(img) {
const originalUrl = img.src.split('?')[0]
img.src = originalUrl
}
```
```html theme={"system"}
```
| Category | Tool | Description |
|---|---|---|
| Workspace | list-workspaces |
List the workspaces this MCP session can access. |
| Analytics | list-reports |
List saved analytics reports and curated presets for an authorized workspace. |
run-query |
Query Cevoid analytics directly with a schema-first query object. | |
get-query-schema |
Inspect the supported analytics query schema for a module. | |
get-report |
Get metadata for a saved analytics report by report ID. | |
run-report |
Execute a saved analytics report by report ID and date range. | |
list-dimensions |
List the currently available analytics dimensions and metadata for a module. | |
get-filter-values |
Get valid values for a specific analytics filter. | |
create-report |
Validate and create a custom analytics report. | |
update-report |
Validate and update a custom analytics report. | |
| Dashboard | list-dashboards |
List analytics dashboards in a workspace. |
get-dashboard |
Get a dashboard and its report panels. | |
create-dashboard |
Create a dashboard with validated or automatically placed panels. | |
update-dashboard |
Update a custom dashboard and its panel layout. |
Supported seperators: \`, / | > \< →\` | Tagging filter, Library filter, category page galleries | | *Collection(s)* | | The collections the product belongs to.
Can be send as one tag, or seperate once for grouped collections | Tagging filter, Library filter, collection page galleries | | | *Variant options* | | Options like color and size
One tag per variant option. | Variant selection when tagging, product page gallery fallback | |