​
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:
ClassWidth (pixels)Use Case
originalFull resolutionHigh-quality displays, print
10801080pxDesktop hero images, large displays
750750pxTablet landscape, desktop cards
640640pxTablet portrait, large mobile
480480pxMobile landscape
400400pxMobile portrait, thumbnails
320320pxSmall mobile screens
240240pxThumbnail grids
160160pxSmall 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" />

​
Performance Optimization

​
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.