Image Optimization

Use this page when you fetch Cevoid image URLs and want to render them efficiently in a storefront. If you are looking for gallery or card implementation behavior, use Analytics Overview or the API Reference instead.

When to use this

Use image optimization when:

you fetch raw Cevoid image URLs from the API
you render those images in a custom storefront UI
you want smaller responsive images instead of the original full-size asset

Cevoid image URLs return the original image by default. Add the class query parameter when you want a pre-optimized size from the CDN.

Quickstart

Fetch or receive the original Cevoid image URL.
Add ?class=<size> to request an optimized width.
Use the optimized URL in your storefront markup.
Add srcset only when you need responsive behavior across breakpoints.

Example:

<img
  src="https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640"
  alt="User generated content"
/>

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:

{
  "id": "WAz8eIbvDR60rouK",
  "images": [
    {
      "url": "https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT",
      "width": 1920,
      "height": 1080
    }
  ]
}

Transform the URL by adding the class parameter:

const originalUrl = 'https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT'
const optimizedUrl = `${originalUrl}?class=640`

console.log(optimizedUrl)

Result:

https://cdn.cevoid.com/images/V1StGXR8_Z5jdHi6B-myT?class=640

Performance guidance

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"
/>

Pick the nearest useful class

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:

.image-container {
  width: 300px;
}

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;

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) {
  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.

Introduction

UGC Widgets

Analytics

Tools

Other

Image Optimization

When to use this

Quickstart

Available Image Classes

Example: transform an API image URL

Performance guidance

Choose the Right Size

Responsive Images

Pick the nearest useful class

Best Practices

1. Match Image Size to Container

2. Consider Display Density

3. Lazy Loading

4. Fallback Strategy

5. Preloading Critical Images

​When to use this

​Quickstart

​Available Image Classes

​Example: transform an API image URL

​Performance guidance

​Choose the Right Size

​Responsive Images

​Pick the nearest useful class

​Best Practices

​1. Match Image Size to Container

​2. Consider Display Density

​3. Lazy Loading

​4. Fallback Strategy

​5. Preloading Critical Images

​Related

When to use this

Quickstart

Available Image Classes

Example: transform an API image URL

Performance guidance

Choose the Right Size

Responsive Images

Pick the nearest useful class

Best Practices

1. Match Image Size to Container

2. Consider Display Density

3. Lazy Loading

4. Fallback Strategy

5. Preloading Critical Images

Related