{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Image CDN API Documentation","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"image-cdn-api-documentation","__idx":0},"children":["Image CDN API Documentation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Image CDN provides on-the-fly image optimization via CloudFront + Lambda@Edge. All images served through the CDN are automatically compressed and converted to modern formats (WebP/AVIF) based on browser support."]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default Behavior"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Images are returned at ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["original dimensions"]}," (capped at ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["2048px max"]},") with format conversion."," ","Smaller images are served at original size. Use presets for specific sizes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Listings: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["?preset=medium"]}," (600×600)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Thumbnails: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["?preset=thumb"]}," (150×150)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full size (up to 2048): no params needed"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"cdn-urls","__idx":1},"children":["CDN URLs"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Environment"},"children":["Environment"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"CDN Base URL"},"children":["CDN Base URL"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Development"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://d3bznwycx2s7pk.cloudfront.net"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Production"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://d949acbs6mj2e.cloudfront.net"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"quick-start","__idx":2},"children":["Quick Start"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"\n# CDN URL - original dimensions (max 2048px), WebP if supported\nhttps://d3bznwycx2s7pk.cloudfront.net/images/photo.png\n\n# Listings/galleries (600×600)\nhttps://d3bznwycx2s7pk.cloudfront.net/images/photo.png?preset=medium\n\n# Thumbnail (150×150)\nhttps://d3bznwycx2s7pk.cloudfront.net/images/photo.png?preset=thumb\n\n# High quality large (1200×1200)\nhttps://d3bznwycx2s7pk.cloudfront.net/images/photo.png?preset=large&q=95\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"presets","__idx":3},"children":["Presets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use presets for consistent image sizes across the application:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Preset"},"children":["Preset"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Dimensions"},"children":["Dimensions"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Use Case"},"children":["Use Case"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["thumb"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["150×150"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["List thumbnails, small icons"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["medium"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["600×600"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Listings, card images"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["large"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1200×1200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Detail views, full-screen galleries"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hero"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1920×800"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero banners, headers"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["avatar"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["200×200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["User avatars, profile pics"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["400×300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Product cards, previews"]}]}]}]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Without query params, images keep original dimensions (capped at 2048px max)."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Usage\nhttps://cdn.example.com/path/image.jpg?preset=thumb\nhttps://cdn.example.com/path/image.jpg?preset=hero\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"query-parameters","__idx":4},"children":["Query Parameters"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["preset"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Only way to resize"]}," - see presets table above"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["number"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["80"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Quality percentage (1-100)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Output format"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inside"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Resize fit mode (used with presets)"]}]}]}]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Security:"]}," Custom ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h"]}," parameters are disabled to prevent cache pollution attacks. Use presets only."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"format-options--f-","__idx":5},"children":["Format Options (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f"]},")"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Auto-detect best format (WebP/AVIF if browser supports)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jpeg"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Force JPEG output"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["webp"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Force WebP output"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["png"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Force PNG output (preserves transparency)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["avif"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Force AVIF output (best compression, newer browsers)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fit-options--fit-","__idx":6},"children":["Fit Options (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fit"]},")"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inside"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Resize to fit within dimensions (default, maintains aspect ratio)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cover"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Resize to cover dimensions (crop overflow)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contain"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Same as inside, with padding if needed"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["outside"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Resize to cover, allowing overhang"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fill"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Stretch to exact dimensions (ignores aspect ratio)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":7},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"thumbnails-for-list-view","__idx":8},"children":["Thumbnails for List View"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# 150x150 thumbnail, high quality\n?preset=thumb&q=90\n\n# Custom small square\n?w=100&h=100&fit=cover&q=80\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"product-cards","__idx":9},"children":["Product Cards"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Standard card size\n?preset=card\n\n# Custom card with WebP\n?w=400&h=300&f=webp&q=85\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"hero-images","__idx":10},"children":["Hero Images"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Full-width hero\n?preset=hero\n\n# Custom hero dimensions\n?w=1920&h=600&fit=cover&q=85\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"avatars","__idx":11},"children":["Avatars"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Standard avatar\n?preset=avatar\n\n# Circular crop\n?w=200&h=200&fit=cover&q=80\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"high-quality-downloads","__idx":12},"children":["High-Quality Downloads"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Large, high-quality (for downloads/printing)\n?preset=large&q=95\n\n# Original quality, just format conversion\n?q=100&f=webp\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"api-response-transformation","__idx":13},"children":["API Response Transformation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IMAGE_CDN_URL"]}," is configured, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ImageCdnTransformInterceptor"]}," automatically transforms S3 URLs in API responses to CDN URLs."]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Transformed URLs return images at ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["original dimensions"]}," (max 2048px) with format conversion. Use presets for smaller sizes (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["?preset=medium"]}," for listings)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"before-s3-url","__idx":14},"children":["Before (S3 URL)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"id\": \"123\",\n  \"imageUrl\": \"https://pers.assets.dev.s3.eu-west-1.amazonaws.com/products/photo.jpg\"\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"after-cdn-url","__idx":15},"children":["After (CDN URL)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"id\": \"123\",\n  \"imageUrl\": \"https://d3bznwycx2s7pk.cloudfront.net/products/photo.jpg\"\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabling-transformation","__idx":16},"children":["Disabling Transformation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To disable automatic transformation, don't set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IMAGE_CDN_URL"]}," in your environment."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"sdk-integration","__idx":17},"children":["SDK Integration"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"typescriptjavascript","__idx":18},"children":["TypeScript/JavaScript"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { ImageCdnUrlBuilder } from '@pers/serverless-functions/infrastructure/interceptors';\n\nconst cdn = new ImageCdnUrlBuilder('https://d3bznwycx2s7pk.cloudfront.net');\n\n// Using presets\nconst thumb = cdn.thumbnail('products/photo.jpg');\nconst large = cdn.large('products/photo.jpg');\n\n// Custom options\nconst custom = cdn.build('products/photo.jpg', {\n  width: 800,\n  height: 600,\n  quality: 85,\n  format: 'webp',\n  fit: 'cover',\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mobile-sdk","__idx":19},"children":["Mobile SDK"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// iOS Example\nlet cdnUrl = \"https://d949acbs6mj2e.cloudfront.net\"\nlet imagePath = \"products/photo.jpg\"\nlet thumbnailUrl = \"\\(cdnUrl)/\\(imagePath)?preset=thumb\"\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"// Android Example\nval cdnUrl = \"https://d949acbs6mj2e.cloudfront.net\"\nval imagePath = \"products/photo.jpg\"\nval thumbnailUrl = \"$cdnUrl/$imagePath?preset=thumb\"\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"environment-configuration","__idx":20},"children":["Environment Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Enable CDN URL transformation\nIMAGE_CDN_URL=https://d3bznwycx2s7pk.cloudfront.net\n\n# Optional: Default preset for transformed URLs\nIMAGE_CDN_DEFAULT_PRESET=medium\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"environment-variables","__idx":21},"children":["Environment Variables"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Variable"},"children":["Variable"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Example"},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IMAGE_CDN_URL"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["CDN base URL (enables transformation)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://d3bznwycx2s7pk.cloudfront.net"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IMAGE_CDN_DEFAULT_PRESET"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default preset for auto-transformation"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["medium"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AWS_S3_BUCKET_NAME"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["S3 bucket name (for URL matching)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pers.assets.dev"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"performance","__idx":22},"children":["Performance"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Metric"},"children":["Metric"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["First request"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["~200-500ms (Lambda cold start + processing)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cached requests"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["~10-50ms (CloudFront edge cache)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cache duration"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1 year (immutable images)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Compression"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Up to 90%+ reduction"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cache-headers","__idx":23},"children":["Cache Headers"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"Cache-Control: public, max-age=31536000, immutable\nX-Image-Optimized: true\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-handling","__idx":24},"children":["Error Handling"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"HTTP Code"},"children":["HTTP Code"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Success - optimized image returned"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["404"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Image not found in S3"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["5xx"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Processing error - falls back to original image from S3"]}]}]}]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Invalid parameters are automatically clamped to valid ranges (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w=5"]}," becomes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w=10"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q=150"]}," becomes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q=100"]},")."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"architecture","__idx":25},"children":["Architecture"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"┌──────────────┐     ┌─────────────────┐     ┌───────────────┐\n│   Client     │────▶│   CloudFront    │────▶│  Lambda@Edge  │\n│  (Browser)   │     │   (CDN Edge)    │     │  (us-east-1)  │\n└──────────────┘     └─────────────────┘     └───────┬───────┘\n                            │ cache                  │\n                            ▼                        ▼\n                     ┌─────────────────┐     ┌───────────────┐\n                     │  Edge Cache     │     │   S3 Bucket   │\n                     │  (31536000s)    │     │  (eu-west-1)  │\n                     └─────────────────┘     └───────────────┘\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"supported-formats","__idx":26},"children":["Supported Formats"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"input-formats","__idx":27},"children":["Input Formats"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["JPEG (.jpg, .jpeg)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PNG (.png)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["WebP (.webp)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["GIF (.gif) - animations preserved"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["AVIF (.avif)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"output-formats","__idx":28},"children":["Output Formats"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["JPEG (default for photos)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["WebP (auto-detected for Chrome, Edge, Firefox)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["AVIF (auto-detected for Chrome 85+, Firefox 93+)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["PNG (when transparency required)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"troubleshooting","__idx":29},"children":["Troubleshooting"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"images-not-optimizing","__idx":30},"children":["Images not optimizing"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Check ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IMAGE_CDN_URL"]}," is set in environment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Verify image exists in S3 bucket"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Check CloudFront distribution is enabled"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cache-not-working","__idx":31},"children":["Cache not working"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CloudFront caches by full URL including query params"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use consistent query param order"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Invalidate cache: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aws cloudfront create-invalidation --distribution-id XXXXX --paths \"/path/*\""]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"lambda-errors","__idx":32},"children":["Lambda errors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Check CloudWatch logs in us-east-1:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"aws logs tail /aws/lambda/us-east-1.pers-image-optimizer-prod-imageOptimizer --follow\n","lang":"bash"},"children":[]}]},"headings":[{"value":"Image CDN API Documentation","id":"image-cdn-api-documentation","depth":1},{"value":"CDN URLs","id":"cdn-urls","depth":2},{"value":"Quick Start","id":"quick-start","depth":2},{"value":"Presets","id":"presets","depth":2},{"value":"Query Parameters","id":"query-parameters","depth":2},{"value":"Format Options ( f )","id":"format-options--f-","depth":3},{"value":"Fit Options ( fit )","id":"fit-options--fit-","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Thumbnails for List View","id":"thumbnails-for-list-view","depth":3},{"value":"Product Cards","id":"product-cards","depth":3},{"value":"Hero Images","id":"hero-images","depth":3},{"value":"Avatars","id":"avatars","depth":3},{"value":"High-Quality Downloads","id":"high-quality-downloads","depth":3},{"value":"API Response Transformation","id":"api-response-transformation","depth":2},{"value":"Before (S3 URL)","id":"before-s3-url","depth":3},{"value":"After (CDN URL)","id":"after-cdn-url","depth":3},{"value":"Disabling Transformation","id":"disabling-transformation","depth":3},{"value":"SDK Integration","id":"sdk-integration","depth":2},{"value":"TypeScript/JavaScript","id":"typescriptjavascript","depth":3},{"value":"Mobile SDK","id":"mobile-sdk","depth":3},{"value":"Environment Configuration","id":"environment-configuration","depth":2},{"value":"Environment Variables","id":"environment-variables","depth":3},{"value":"Performance","id":"performance","depth":2},{"value":"Cache Headers","id":"cache-headers","depth":3},{"value":"Error Handling","id":"error-handling","depth":2},{"value":"Architecture","id":"architecture","depth":2},{"value":"Supported Formats","id":"supported-formats","depth":2},{"value":"Input Formats","id":"input-formats","depth":3},{"value":"Output Formats","id":"output-formats","depth":3},{"value":"Troubleshooting","id":"troubleshooting","depth":2},{"value":"Images not optimizing","id":"images-not-optimizing","depth":3},{"value":"Cache not working","id":"cache-not-working","depth":3},{"value":"Lambda errors","id":"lambda-errors","depth":3}],"frontmatter":{"seo":{"title":"Image CDN API Documentation"}},"lastModified":"2026-05-22T17:51:31.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/image-cdn","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}