Image Optimization

Automatically optimize images for faster delivery.

Overview

NordicCDN can automatically optimize images on-the-fly, reducing file sizes and improving load times without changing your source images.

Features

WebP Conversion

Automatically serve WebP format to supported browsers:

  • 25-35% smaller than JPEG
  • Lossless and lossy compression
  • Transparency support

Quality Adjustment

Reduce file size by adjusting compression level:

  • 100: Maximum quality (largest file)
  • 80: Recommended (good balance)
  • 60: Aggressive compression

Resizing

Scale images to specific dimensions:

  • Maximum width
  • Maximum height
  • Both (maintains aspect ratio)

Smart Cropping

Intelligent cropping with configurable gravity:

  • Center (default)
  • North, South, East, West
  • Smart (face/object detection)

Enabling Image Optimization

From Dashboard

  1. Go to your zone settings
  2. Click "Optimization" tab
  3. Enable "Image Optimization"
  4. Configure default settings
  5. Save changes

URL Parameters

Control optimization per-image using URL parameters:

Quality

/image.jpg?quality=80

Range: 1-100

Width

/image.jpg?width=800

Scales image to maximum width (maintains aspect ratio).

Height

/image.jpg?height=600

Scales image to maximum height (maintains aspect ratio).

Format

/image.jpg?format=webp

Options: webp, jpeg, png, avif

Fit Mode

/image.jpg?width=400&height=300&fit=cover

Options:

  • contain: Fit within dimensions
  • cover: Fill dimensions (may crop)
  • fill: Stretch to exact dimensions

Gravity (for cropping)

/image.jpg?width=400&height=300&fit=cover&gravity=north

Options: center, north, south, east, west, smart

Examples

Responsive Images

Generate different sizes for responsive design:

<img
  src="https://cdn.example.com/hero.jpg?width=400"
  srcset="
    https://cdn.example.com/hero.jpg?width=400 400w,
    https://cdn.example.com/hero.jpg?width=800 800w,
    https://cdn.example.com/hero.jpg?width=1200 1200w
  "
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
>

Thumbnail Generation

Create consistent thumbnails:

/products/item-123.jpg?width=200&height=200&fit=cover

Quality Optimization

Balance quality and file size:

/photos/landscape.jpg?quality=75&format=webp

Automatic WebP

When enabled, NordicCDN automatically serves WebP to browsers that support it:

  1. Browser sends Accept: image/webp header
  2. CDN detects WebP support
  3. Image is converted and cached as WebP
  4. Future WebP requests served from cache

No URL changes needed - same URL serves optimized format.

Caching Behavior

Optimized images are cached separately based on parameters:

/image.jpg                    → Original cached
/image.jpg?width=800          → 800px version cached
/image.jpg?width=400          → 400px version cached
/image.jpg?format=webp        → WebP version cached

Each variation has its own cache entry.

Supported Formats

Input Formats

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • GIF (.gif) - static only
  • WebP (.webp)
  • AVIF (.avif)
  • TIFF (.tiff)
  • BMP (.bmp)

Output Formats

  • JPEG
  • PNG
  • WebP
  • AVIF

Best Practices

1. Upload High-Quality Sources

Start with high-resolution images. You can always scale down, but not up.

2. Use Responsive Images

Generate multiple sizes and use srcset:

<img
  src="/image.jpg?width=800"
  srcset="/image.jpg?width=400 400w, /image.jpg?width=800 800w"
  sizes="(max-width: 600px) 400px, 800px"
>

3. Enable Automatic WebP

Let the CDN handle format selection based on browser support.

4. Choose Appropriate Quality

  • Product photos: 80-90
  • Hero images: 75-85
  • Thumbnails: 70-80
  • Background images: 60-75

5. Consider AVIF

For browsers that support it, AVIF offers even better compression than WebP.

Performance Tips

Lazy Loading

Combine with browser lazy loading:

<img
  src="/image.jpg?width=800&quality=80"
  loading="lazy"
  decoding="async"
>

Placeholder Images

Use tiny blurred placeholders:

<img
  src="/image.jpg?width=20&quality=30"
  data-src="/image.jpg?width=800&quality=80"
  class="lazy-load"
>

Troubleshooting

Image Not Optimizing

  1. Verify optimization is enabled for your zone
  2. Check the image format is supported
  3. Ensure parameters are correctly formatted
  4. Check for errors in response headers

Quality Too Low

  1. Increase quality parameter
  2. Check default quality in zone settings
  3. Use higher quality source image

Wrong Size

  1. Verify width/height parameters
  2. Check fit mode setting
  3. Ensure aspect ratio matches expectations

WebP Not Serving

  1. Check browser sends Accept: image/webp
  2. Verify automatic WebP is enabled
  3. Clear CDN cache and retry