Which image CDN providers does this tool support?

It supports Cloudinary, Imgix, Sanity, Bunny Optimizer, and Cloudflare Images. Each provider has its own URL syntax, and the tool handles the conversion automatically.

Does this tool upload my images?

No. The tool only generates URLs based on your input. It runs entirely in your browser and never sends images or credentials to any server.

What format should I choose for best performance?

Select "Auto" to let the CDN serve the best format (AVIF, WebP, or JPEG) based on the visitor's browser. This gives the smallest file size with no quality loss.

What does the DPR setting do?

DPR (Device Pixel Ratio) multiplies the image dimensions for high-density screens. Set it to 2x for retina displays or 3x for ultra-high-density mobile screens.

How do I use the generated srcset HTML?

Copy the HTML output and paste it into your webpage. The browser will automatically select the best image size based on the viewport width, saving bandwidth on smaller screens.

What quality value should I use?

For photographs, 75-85 offers the best balance of quality and file size. For screenshots or text-heavy images, use 90-100. For thumbnails and previews, 60-70 is usually sufficient.

Image CDN URL Builder

Select your CDN provider, enter your image path, and visually configure width, quality, format, crop, and blur to generate an optimized image URL with responsive HTML.

Cloud Name / Domain

Project ID

Dataset

Account Hash

Image Path / ID

Width (px)

800

Height (px)

Quality

Blur

Format

Crop / Fit

Gravity / Focus

DPR

Generated URL

Configure settings above to generate a URL

Responsive HTML

HTML with srcset will appear here

Cloudinary URL Syntax

https://res.cloudinary.com/{cloud}/image/upload/w_{w},h_{h},q_{q},f_{f},c_{crop}/{id}

How the Image CDN URL Builder Works

This tool generates optimized image delivery URLs for the most popular CDN providers. Instead of memorizing each provider's unique URL syntax, you configure transformations visually with sliders and dropdowns, and the tool constructs a valid URL in real time. Every parameter — width, height, quality, format, crop mode, blur, gravity, and device pixel ratio — is translated into the correct query string or path segment for your chosen CDN.

All processing happens in your browser. No images are uploaded, no API keys are required, and your CDN credentials stay private. Simply paste the generated URL into your HTML, CSS, or application code.

Supported CDN Providers

The builder supports five leading image CDN platforms. Cloudinary uses path-based transformations like w_800,q_80,f_auto appended to the upload URL. Imgix uses query parameters such as ?w=800&q=80&auto=format. Sanity appends parameters to the CDN endpoint with ?w=800&h=600&q=80. Bunny Optimizer uses simple query params like ?width=800&quality=80. Cloudflare Images uses a comma-separated variant string like w=800,h=600,q=80,f=auto.

Each provider has its own strengths. Cloudinary offers the most transformation options. Imgix excels at real-time rendering. Sanity is tightly integrated with its headless CMS. Bunny is the most cost-effective for high-volume delivery. Cloudflare provides edge-optimized delivery with minimal latency.

Why Use an Image CDN

Unoptimized images are the number one cause of slow web pages. An image CDN automatically resizes, compresses, and converts images to modern formats like WebP and AVIF. This reduces page weight by 40-80% on average, directly improving Core Web Vitals scores like Largest Contentful Paint (LCP). Faster pages lead to better SEO rankings, lower bounce rates, and higher conversion rates.

Image CDNs also handle responsive images automatically. By generating different sizes for different screen widths, you avoid serving a 4000px hero image to a mobile phone. The responsive HTML output from this tool includes srcset attributes that let the browser pick the optimal size.

Tips for Image Optimization

Set quality between 75 and 85 for photographs — the visual difference from 100 is negligible but file size drops dramatically. Use auto format to let the CDN serve AVIF to supported browsers and fall back to WebP or JPEG. Always specify explicit width and height to prevent layout shift (CLS). Use the face gravity option for profile photos and avatars to ensure faces stay centered when cropping. For decorative background images, a blur value of 10-20 creates an attractive placeholder effect for lazy loading.

When building responsive layouts, generate srcset breakpoints at 400, 800, 1200, and 1600 pixels to cover mobile through ultra-wide displays. The DPR setting (2x or 3x) is useful for fixed-size elements like thumbnails on retina screens.