Overview
Images returned by the Cevoid API can be optimized for different use cases using the class query parameter. This allows you to choose the appropriate image size to optimize loading times and bandwidth usage.
Default Behavior
By default, the Cevoid API returns images in their original size and quality. For better performance, you can request optimized versions using the image class system.
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 |
Using Image Optimization
Basic Usage
Add the class parameter to any image URL returned by the API:
https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640
Example API Response
When you fetch posts from the API, you’ll receive image URLs like this:
{
"id": "WAz8eIbvDR60rouK",
"images": [
{
"url": "https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT",
"width": 1920,
"height": 1080
}
]
}
Optimized Image Request
Transform the URL by adding the class parameter:
const originalUrl = "https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT";
const optimizedUrl = `${originalUrl}?class=640`;
// Use optimizedUrl in your HTML
<img src={optimizedUrl} alt="User generated content" />
Choose the Right Size
Select the image class that best matches your display requirements. Using unnecessarily large images wastes bandwidth and slows loading times.
Responsive Images
Use different image classes for different screen sizes:
<img
src="https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=320"
srcset="
https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=320 320w,
https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640 640w,
https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=1080 1080w"
sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1080px"
alt="User generated content"
/>
JavaScript Implementation
function getOptimizedImageUrl(originalUrl, targetWidth) {
// Determine the best image class based on target width
const imageClasses = [160, 240, 320, 400, 480, 640, 750, 1080];
const bestClass = imageClasses.find(size => size >= targetWidth) || 'original';
return `${originalUrl}?class=${bestClass}`;
}
// Usage
const imageUrl = "https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT";
const optimized = getOptimizedImageUrl(imageUrl, 400); // Returns 400px version
Best Practices
1. Match Image Size to Container
Always choose an image class that matches or slightly exceeds your container’s display size:
/* If your container is 300px wide */
.image-container {
width: 300px;
}
/* Use class=320 or class=400 for this container */
2. Consider Display Density
For high-density displays (Retina, etc.), use an image class that’s 2x your container size:
const containerWidth = 200;
const pixelRatio = window.devicePixelRatio || 1;
const targetWidth = containerWidth * pixelRatio;
// For a 200px container on a 2x display, this will select class=400
const optimizedUrl = getOptimizedImageUrl(originalUrl, targetWidth);
3. Lazy Loading
Combine image optimization with lazy loading for maximum performance:
<img
data-src="https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640"
class="lazy-load"
alt="User generated content"
/>
4. Fallback Strategy
Always have a fallback for when optimized images fail to load:
function handleImageError(img) {
// Fallback to original if optimized version fails
const originalUrl = img.src.split('?')[0];
img.src = originalUrl;
}
<img
src="https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640"
onerror="handleImageError(this)"
alt="User generated content"
/>
The Cevoid CDN automatically handles caching and global distribution of optimized images, ensuring fast loading times for users worldwide.
5. Preloading Critical Images
For above-the-fold images, consider preloading:
<link rel="preload" as="image" href="https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=1080">
Don’t preload too many images as this can actually slow down initial page load. Only preload the most critical, above-the-fold images.
