Image Optimization Demo

This demo showcases our serverless image optimization API. Adjust the parameters to see how they affect the image.

Image Settings
Adjust these parameters to optimize the image

Estimated Savings

Approximately 77% smaller than the original image

Optimized Image
800px wide, 80% quality, WEBP format
Optimized image

API URL: /api/image?url=%2Fimages%2Fburj-khalifa-view.png&width=800&quality=80&format=webp

How to Use the Image API

API Endpoint

/api/image?url=/path/to/image.jpg&width=800&height=600&quality=80&format=webp

Parameters

  • url (required): Path to the image (local or external URL)
  • width (optional): Desired width in pixels
  • height (optional): Desired height in pixels
  • quality (optional): Image quality from 1-100 (default: 80)
  • format (optional): Output format - webp, jpeg, png, or avif (default: webp)

Usage in Components

Use our utility function to generate optimized image URLs:

import from "@/lib/image-utils";

const optimizedUrl = getOptimizedImageUrl(
  "/images/example.jpg",
  800, // width
  undefined, // height (aspect ratio preserved)
  80, // quality
  "webp" // format
);

Or use our ResponsiveImage component:

import from "@/components/ui/responsive-image";

<ResponsiveImage
  src="/images/example.jpg"
  mobileSrc="/images/example-mobile.jpg"
  alt="Example image"
  width=800
  height=600
  quality=80
  format="webp"
  useOptimizationApi=
/>