How to Deliver Website Images Through a CDN

Deliver images through a CDN by serving appropriately sized image variants from cacheable URLs close to visitors. Choose where originals live, decide how resizing and format selection work, and make sure the cache distinguishes every variant that can produce different bytes. Then verify the response format, dimensions, and freshness behavior on representative URLs.

Choose where images live and how delivery URLs work

There are two common patterns. A hosted image service stores originals and delivers them through provider-managed URLs, often with named variants. Cloudflare Images, for example, uses a URL containing an account hash, image ID, and variant. See Cloudflare Images.

#	Preview	Product	Price
1		CDN A Visual Guide: CDN Fundamentals for Beginners and New Systems Engineers: Practical Knowledge...	$8.00	Buy on Amazon

As an Amazon Associate I earn from qualifying purchases.

With origin-backed optimization, your existing origin remains the source of originals; the CDN fetches an image and returns a transformed response. Cloudflare documents URL- and Worker-based image transformations at its transformation guide. Choose the hosted approach for managed image storage and delivery, or origin-backed transformation when you want to keep originals in your current storage and control the delivery layer.

Match image dimensions to the rendered size

Do not send a large desktop image to every small display if a smaller candidate will look appropriate. Provide responsive candidates with HTML srcset and an accurate sizes attribute so the browser can select an image suited to the layout. Cloudflare’s guide covers responsive image delivery and documents width=auto as an option where markup cannot be changed: Cloudflare image optimization.

#1 Best Overall

CDN A Visual Guide: CDN Fundamentals for Beginners and New Systems Engineers: Practical Knowledge for Day-to-Day Work, Made Simple with Illustrations and ... (An Illustrated Beginner’s Guide Book 1)

$8.00

Buy on Amazon

For example, if an image appears at roughly 400 CSS pixels wide in a content column, provide candidates around the sizes your layout actually uses rather than a single unnecessarily large file. The browser’s choice depends on the candidate widths, layout size, and display density; test the rendered page at the viewport sizes you support.

Choose transformations and format delivery

Image services may resize, crop, compress, or convert images by URL parameters or through a programmatic interface. Make transformation choices explicit and stable: a requested crop, width, quality, or output format can represent a distinct image and should have a distinct, predictable URL or cache identity.

Cloudflare Images can serve supported browsers AVIF or WebP with fallback behavior, while Cloudflare’s origin-image optimization documentation describes format selection and separate cached variants selected using the request Accept header. If a cache varies the output by Accept, ensure that the cache key or provider behavior preserves that distinction; otherwise one browser’s format response could be reused for a request that needs another format. See the optimization documentation.

Google Cloud CDN documents transformations through URL query parameters, with output variants cached at the edge. Its image optimization feature is marked Pre-GA in the reviewed documentation; check its current launch status and supported configuration before relying on it in production. Documentation: Google Cloud CDN image optimization.

Set cache keys, freshness, and update behavior

A cache key determines which requests can reuse an object. Include every input that changes the returned image, such as transformation query parameters or relevant request headers. Avoid including cookies or other request values unless they genuinely affect the image, because needlessly distinct keys can fragment caching.

Amazon CloudFront cache policies let you select query strings, headers, and cookies for the cache key, and define TTL behavior in conjunction with origin Cache-Control and Expires headers. Review the policy for each image path and transformation scheme: CloudFront cache key documentation.

Cloudflare says optimized images follow caching rules derived from the original, with a minimum cache time of one hour, and recommends ETag revalidation. That means publishing a replacement original does not necessarily make every cached derivative disappear immediately; choose URL versioning, revalidation, or an invalidation strategy that matches how quickly updates must appear. See Cloudflare’s optimization documentation.

Pick an implementation that fits your infrastructure

Compare providers on where originals are hosted, responsive sizing and format negotiation, transformation control, cache invalidation or revalidation, compatibility with your existing cloud setup, and feature maturity. The cited documentation does not establish comparable performance benchmarks or complete current pricing, so it cannot support a universal fastest-or-cheapest ranking.

Implement and verify the delivery path

1. Choose the source and URL scheme. Decide whether originals live in a hosted image service or your own origin, then define stable URLs for originals and transformed variants.
2. Define responsive candidates. Match candidate widths to actual display sizes and use srcset where you can edit markup. Use provider-supported automatic width selection only after confirming its behavior for your layout.
3. Specify transformations. Set the required width, crop, quality, and format strategy. Ensure URL parameters or other transformation inputs are represented in the cache identity.
4. Configure caching. Check which query strings, headers, and cookies enter the cache key, how origin freshness headers affect TTLs, and how updates or revalidation are handled.
5. Test representative requests. For each important image path, inspect the response content type, delivered dimensions, and cache behavior. Request variants with different widths or format support and confirm they do not collide. Replace or update a test source image and verify that the new image becomes visible according to your chosen freshness policy.

Troubleshoot common delivery problems

• The image looks blurry or is oversized: Check the rendered dimensions, the selected srcset candidate, and any CDN width or quality transformation. Ensure the candidate set covers the layout sizes you actually use.
• A format is wrong or inconsistent: Inspect the response Content-Type and the cache behavior for requests with different Accept headers. Confirm that negotiated formats are kept in distinct cache variants where required.
• A transformation appears to be ignored: Check the provider’s supported URL syntax or Worker interface and confirm that the transformation parameters reach the CDN unchanged and are included in the cache key.
• An updated original still looks old: Review TTL and revalidation headers, ETag behavior, and any cached transformed variants. Use the provider’s supported invalidation or versioned-URL strategy if an update must appear sooner.
• Google Cloud optimization is unavailable: Verify that caching is enabled, the load balancer is a supported Global External Application Load Balancer, and the request and origin response meet the feature’s requirements. Its documentation marks the feature Pre-GA, so availability and supported configurations can change: Google Cloud requirements and limitations.

Or skip the browser setup

For capturing a screenshot of a website rather than delivering your own image assets, ScreenshotNeo is a website screenshot API and MCP server. A single request returns an image or PDF; its image response can be stored or served through your own CDN if that fits your workflow. This is not a replacement for a responsive image pipeline for site assets.

cURL example, with the target URL adapted to the page you need:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. Cookie banners are accepted and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before capture; those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for the free plan.

Frequently Asked Questions

Does a CDN automatically make every image request faster?

No. It can reuse cacheable responses near users, but actual behavior depends on the cache configuration and the origin response headers.

Can the same transformed image be reused for different formats?

Only when the response is identical for those requests. If format negotiation changes the bytes, the cache must preserve separate variants.

Quick Recap

Bestseller No. 1

CDN A Visual Guide: CDN Fundamentals for Beginners and New Systems Engineers: Practical Knowledge for Day-to-Day Work, Made Simple with Illustrations and ... (An Illustrated Beginner’s Guide Book 1)

$8.00

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.