Cloudflare OS XL part 5: images, video and the media stack
Cloudflare OS XL part 5: images, video and the media stack
Part 5 of Cloudflare OS XL, an inventory of the Cloudflare platform this build does not have installed.
Every article on this site has a hero image. They are generated by an external service, written into R2, and served from /img/gen/, one file, one size, forever. A hero on a phone downloads the same object as a hero on a desktop.
That is the whole media stack. There is no transformation, no variant, no format negotiation, no video, and no live anything. Three Cloudflare products cover the space, and the correct answer differs sharply between them.
Images
Images is Cloudflare's platform for image pipelines: storage, transformation, and delivery through named variants.
The specific thing it fixes here is the one-file-one-size problem. Today, a hero used on the article page, the homepage card, the sitemap thumbnail and the social preview is the same object at the same dimensions in the same format. With Images, the original is stored once and requested at a variant:
Format negotiation is automatic — a browser that accepts AVIF gets AVIF — and resizing happens at the edge rather than at generation time.
There is a second, less obvious fit. This build's hero images pass an editorial gate: a brief is checked before generation, and the render is meant to be inspected before publication. That gate currently operates on a prompt and a finished file. Images' transformation API means the published crop can be adjusted after the fact without regenerating anything, which is the difference between "this hero is wrong, generate another" and "this hero is cropped wrong, change the variant".
The migration is not free — existing /img/gen/ URLs are stored in article metadata across 1,171 rows — but it is mechanical, and Images can serve from a remote source, so the transition does not have to be a big-bang re-upload.
Verdict: install. A media-heavy site serving one size of every image is leaving both performance and editorial control on the table.
Stream
Stream is serverless video: upload or push live, get adaptive bitrate encoding, a player, and global delivery.
The build generates video. The creative lane produces short-form ad output, and those files currently live in R2 as raw objects. Serving an MP4 from R2 works, in the sense that a browser will play it. What it does not do is adapt to bandwidth, produce a thumbnail, generate captions, or give a player with analytics.
But the honest assessment is that this is not currently a bottleneck. The video output is delivered into ad platforms, which do their own encoding and hosting, not served to readers from this site. Stream would be solving a problem the build does not yet have.
The condition that would change it: the moment video appears on an article page or a wholesale catalogue page as something a reader watches, R2-as-video-host becomes the wrong answer immediately.
Verdict: later. Correct product, absent use case. Revisit when video is served to readers rather than uploaded to ad platforms.
Realtime
Realtime covers live audio and video: RealtimeKit, an SFU for many-participant sessions, and TURN for connectivity.
This build has a voice lane. It records, transcribes, synthesises speech, and sends voice notes. Every part of that is asynchronous: capture a file, upload it, process it, deliver the result. Realtime is the infrastructure for the version where that is a live conversation instead — the owner talking to an agent, with the agent responding while he is still speaking.
That is a genuinely different product from what exists, and it is worth being clear that it is an ambition rather than a gap. The current voice lane is not broken. It is asynchronous by design and the design is fine.
Verdict: no, for now. Realtime is the answer to a question this build has not asked. Listing it as an opportunity because it is impressive would be exactly the brochure behaviour this series is meant to avoid.
The one to do first
If only one thing in this part happens, it is Images, and the reason is not performance.
This build has an editorial law about heroes: the image shows the subject, not the research method. That law is enforced at the write path against the brief. What it cannot enforce is the presentation — whether the crop that ends up on the homepage card still shows the subject after being squeezed into a different aspect ratio. Named variants make the crop a declared property of the site rather than an accident of whatever dimensions the generator produced.
Verdicts
Product
What it replaces here
Verdict
Images
One file, one size, one format for every hero on 1,171 articles
Cloudflare Images documentation“Images is a platform for creating scalable and reliable image pipelines, designed to help developers deploy media-rich applications faster.”
Cloudflare Stream documentation“Serverless live and on-demand video streaming with adaptive bitrate encoding and global delivery.”
Cloudflare Realtime documentation“Build scalable real-time applications with Cloudflare Realtime products including RealtimeKit, SFU, and TURN.”
the whole object this page is drawn from, as JSON
{
"schema":"http://google-preview.miscsubjects.com/schemas/jarticle.json",
"status":"published",
"slug":"cloudflare-os-xl-05-media",
"title":"Cloudflare OS XL part 5: images, video and the media stack",
"kind":"systems",
"summary":"Cloudflare OS XL part 5: images, video and the media stack",
"created":"2026-08-06T03:24:48.323Z",
"body": [
"*Part 5 of [Cloudflare OS XL](/a/cloudflare-os-xl), an inventory of the Cloudflare platform this build does not have installed.*\n\nEvery article on this site has a hero image. They are generated by an external service, written into R2, and served from `/img/gen/`, one file, one size, forever. A hero on a phone downloads the same object as a hero on a desktop.\n\nThat is the whole media stack. There is no transformation, no variant, no format negotiation, no video, and no live anything. Three Cloudflare products cover the space, and the correct answer differs sharply between them.\n\n## Images\n\nImages is Cloudflare's platform for image pipelines: storage, transformation, and delivery through named variants.\n\nThe specific thing it fixes here is the one-file-one-size problem. Today, a hero used on the article page, the homepage card, the sitemap thumbnail and the social preview is the same object at the same dimensions in the same format. With Images, the original is stored once and requested at a variant:\n\n```\nhttps://imagedelivery.net/<hash>/<image-id>/hero\nhttps://imagedelivery.net/<hash>/<image-id>/card\nhttps://imagedelivery.net/<hash>/<image-id>/og\n```\n\nFormat negotiation is automatic — a browser that accepts AVIF gets AVIF — and resizing happens at the edge rather than at generation time.\n\nThere is a second, less obvious fit. This build's hero images pass an editorial gate: a brief is checked before generation, and the render is meant to be inspected before publication. That gate currently operates on a prompt and a finished file. Images' transformation API means the *published* crop can be adjusted after the fact without regenerating anything, which is the difference between \"this hero is wrong, generate another\" and \"this hero is cropped wrong, change the variant\".\n\nThe migration is not free — existing `/img/gen/` URLs are stored in article metadata across 1,171 rows — but it is mechanical, and Images can serve from a remote source, so the transition does not have to be a big-bang re-upload.\n\n**Verdict: install.** A media-heavy site serving one size of every image is leaving both performance and editorial control on the table.\n\n## Stream\n\nStream is serverless video: upload or push live, get adaptive bitrate encoding, a player, and global delivery.\n\nThe build generates video. The creative lane produces short-form ad output, and those files currently live in R2 as raw objects. Serving an MP4 from R2 works, in the sense that a browser will play it. What it does not do is adapt to bandwidth, produce a thumbnail, generate captions, or give a player with analytics.\n\nBut the honest assessment is that this is not currently a bottleneck. The video output is delivered *into ad platforms*, which do their own encoding and hosting, not served to readers from this site. Stream would be solving a problem the build does not yet have.\n\nThe condition that would change it: the moment video appears on an article page or a wholesale catalogue page as something a reader watches, R2-as-video-host becomes the wrong answer immediately.\n\n**Verdict: later.** Correct product, absent use case. Revisit when video is served to readers rather than uploaded to ad platforms.\n\n## Realtime\n\nRealtime covers live audio and video: RealtimeKit, an SFU for many-participant sessions, and TURN for connectivity.\n\nThis build has a voice lane. It records, transcribes, synthesises speech, and sends voice notes. Every part of that is asynchronous: capture a file, upload it, process it, deliver the result. Realtime is the infrastructure for the version where that is a live conversation instead — the owner talking to an agent, with the agent responding while he is still speaking.\n\nThat is a genuinely different product from what exists, and it is worth being clear that it is an ambition rather than a gap. The current voice lane is not broken. It is asynchronous by design and the design is fine.\n\n**Verdict: no, for now.** Realtime is the answer to a question this build has not asked. Listing it as an opportunity because it is impressive would be exactly the brochure behaviour this series is meant to avoid.\n\n## The one to do first\n\nIf only one thing in this part happens, it is Images, and the reason is not performance.\n\nThis build has an editorial law about heroes: the image shows the subject, not the research method. That law is enforced at the write path against the *brief*. What it cannot enforce is the presentation — whether the crop that ends up on the homepage card still shows the subject after being squeezed into a different aspect ratio. Named variants make the crop a declared property of the site rather than an accident of whatever dimensions the generator produced.\n\n## Verdicts\n\n| Product | What it replaces here | Verdict |\n| --- | --- | --- |\n| Images | One file, one size, one format for every hero on 1,171 articles | **install** |\n| Stream | Ad video sitting in R2 as raw objects | **later** — when video is served to readers |\n| Realtime | An asynchronous voice lane that works as designed | **no** — for now |\n\nNext: [Part 6 — the edge in front of the Worker](/a/cloudflare-os-xl-06-the-edge-in-front)."
],
"facts": {
"converted_from":"markdown",
"original_updated":"2026-08-06T03:24:48.364Z",
"register":null,
"category":"systems"
},
"hero":"https://miscsubjects.com/img/gen/arcads-gpt-image-fbddedee-bca8-41c0-b2c8-fe24af7eb57e.png",
"model":"Opus 5 (Claude Code)",
"tags": [
"cloudflare",
"images",
"stream",
"media",
"heroes"
],
"sources": [
{
"id":"s-images",
"type":"documentation",
"url":"https://developers.cloudflare.com/images/",
"title":"Cloudflare Images documentation",
"quote":"Images is a platform for creating scalable and reliable image pipelines, designed to help developers deploy media-rich applications faster.",
"accessed_at":"2026-08-06T03:10:08.097Z",
"prev":"genesis",
"hash":"9e03f6c1f02856ed6fbc53a352bfc9b853f860457fb8ad1d5cd886ce5bd5adac",
"quote_sha256":"0a32b5d7149c70cd602136c91b6fb0711340fdc93df7be41dbd28fa92ec988b1"
},
{
"id":"s-stream",
"type":"documentation",
"url":"https://developers.cloudflare.com/stream/",
"title":"Cloudflare Stream documentation",
"quote":"Serverless live and on-demand video streaming with adaptive bitrate encoding and global delivery.",
"accessed_at":"2026-08-06T03:10:08.097Z",
"prev":"9e03f6c1f02856ed6fbc53a352bfc9b853f860457fb8ad1d5cd886ce5bd5adac",
"hash":"87422360caff50ea6da86117eedaaca689511a134ddd736360777b3860edf702",
"quote_sha256":"315c17d8b2486e28482cd917b70570b4e44724614fb14e9bb19bd39b3fec6fd2"
},
{
"id":"s-realtime",
"type":"documentation",
"url":"https://developers.cloudflare.com/realtime/",
"title":"Cloudflare Realtime documentation",
"quote":"Build scalable real-time applications with Cloudflare Realtime products including RealtimeKit, SFU, and TURN.",
"accessed_at":"2026-08-06T03:10:08.097Z",
"prev":"87422360caff50ea6da86117eedaaca689511a134ddd736360777b3860edf702",
"hash":"b26a08f150339591de4ea4a19c52644c25a677e83a208c67e3b53309bbca2f33",
"quote_sha256":"3d8cd9eacc8b2ceae7832ae55a2f2bd7cd41c0d12ee5a2da5e36d750c07b3eaf"
}
],
"claims": [
{
"id":"c1",
"text":"Every hero image on this site is stored as one file at one size in one format, so a phone downloads the same object as a desktop.",
"tier":"observational",
"source_ids": [],
"why_material":"It is the concrete defect the Images product addresses."
},
{
"id":"c2",
"text":"Cloudflare Images is a platform for image pipelines with named variants and automatic format negotiation, so one stored original is served at the size and format each surface needs.",
"tier":"definition",
"source_ids": [
"s-images"
],
"why_material":"It gives the site per-surface crops without regenerating anything."
},
{
"id":"c3",
"text":"Named variants make the published crop a declared property of the site rather than an accident of the dimensions the generator produced.",
"tier":"expert",
"source_ids": [
"s-images"
],
"why_material":"This build has an editorial law that the hero must show its subject, and a bad crop can break that law after the brief passed."
},
{
"id":"c4",
"text":"Cloudflare Stream provides adaptive bitrate encoding, a player and global delivery for live and on-demand video, which R2 object hosting does not.",
"tier":"definition",
"source_ids": [
"s-stream"
],
"why_material":"It is the right answer once video is served to readers rather than uploaded to ad platforms."
},
{
"id":"c5",
"text":"Cloudflare Realtime covers live audio and video through RealtimeKit, an SFU and TURN, and answers a question this build has not asked, because its voice lane is asynchronous by design.",
"tier":"definition",
"source_ids": [
"s-realtime"
],
"why_material":"Listing it as an opportunity because it is impressive would be the brochure behaviour this series avoids."
}
],
"type":"article",
"updated":"2026-10-08T11:31:31.367Z",
"version":1,
"hash":"935c16115e8d37cd4715ea2eeed77d3dac34164f3ce1d861d4eeeba2a79f5e13",
"styling": {
"scope":"shared",
"how":"no value on the page is set by hand: each comes from this theme, and each theme value becomes the CSS variable named beside it. PATCH http://google-preview.miscsubjects.com/api/jarticles/theme changes them.",
"widget_style": {
"what":"every widget may carry style: {…}; these are the only keys it reads",
"rotate":"degrees, a number",
"offset_x":"pixels, a number",
"offset_y":"pixels, a number",
"pulse":"true to pulse"
},
"theme": {
"color": {
"page_bg":"#f5f5f7",
"sheet_bg":"#ffffff",
"ink":"#1d1d1f",
"soft":"#424245",
"muted":"#6e6e73",
"dim":"#86868b",
"line":"#d2d2d7",
"accent":"#0071e3",
"accent_soft":"rgba(0,113,227,0.08)",
"link":"#0066cc",
"selection":"rgba(0,113,227,0.18)",
"widget_bg":"#f5f5f7",
"widget_border":"#d2d2d7",
"card_bg":"#ffffff",
"code_bg":"#f5f5f7",
"json_bg":"#161b19",
"json_ink":"#e6e1d4",
"json_key":"#7fd3c3",
"json_string":"#e9c46a",
"json_number":"#f4a261",
"json_bool":"#c792ea",
"json_null":"#928d7e",
"json_punct":"#6b6759",
"json_bar":"#0e1512",
"kind_badge_bg":"#0e6e60",
"kind_badge_ink":"#ffffff"
},
"color_dark": {
"page_bg":"#000000",
"sheet_bg":"#1d1d1f",
"ink":"#f5f5f7",
"soft":"#d2d2d7",
"muted":"#a1a1a6",
"dim":"#86868b",
"line":"#424245",
"accent":"#2997ff",
"accent_soft":"rgba(41,151,255,0.12)",
"link":"#2997ff",
"selection":"rgba(41,151,255,0.25)",
"widget_bg":"#2c2c2e",
"widget_border":"#424245",
"card_bg":"#1d1d1f",
"code_bg":"#2c2c2e",
"json_bg":"#0a0d0c",
"json_ink":"#e6e1d4",
"json_key":"#7fd3c3",
"json_string":"#e9c46a",
"json_number":"#f4a261",
"json_bool":"#c792ea",
"json_null":"#757062",
"json_punct":"#5d665f",
"json_bar":"#060807",
"kind_badge_bg":"#4fc1ab",
"kind_badge_ink":"#0b0f0d"
},
"font": {
"display":"-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"Helvetica Neue\",Helvetica,Arial,sans-serif",
"body":"-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"Helvetica Neue\",Helvetica,Arial,sans-serif",
"mono":"ui-monospace,SFMono-Regular,\"SF Mono\",Menlo,Consolas,monospace",
"google_fonts":""
},
"size": {
"body":"17px",
"small":"17px",
"eye":"17px",
"lead":"17px",
"h1":"52px",
"h2":"34px",
"h3":"22px",
"byline":"17px",
"h1_measure":"none",
"code":"17px",
"json":"17px",
"widget_title":"17px"
},
"leading": {
"body":"1.7",
"head":"1.18",
"lead":"1.5",
"json":"1.6"
},
"weight": {
"display":"700",
"head":"700",
"body":"400",
"strong":"700",
"eye":"700"
},
"tracking": {
"eye":"0.14em",
"display":"-0.03em",
"body":"-0.006em",
"badge":"0.08em"
},
"layout": {
"sheet_width":"1000px",
"text_width":"880px",
"gutter":"16px",
"sheet_padding":"56px 64px 64px",
"sheet_padding_mobile":"24px 18px 40px",
"sheet_margin":"28px auto 72px",
"block_gap":"1.15em",
"widget_gap":"28px",
"grid_gap":"14px"
},
"border": {
"sheet":"0px solid",
"sheet_radius":"30px",
"widget":"1px solid",
"widget_radius":"24px",
"card_radius":"24px",
"badge_radius":"999px",
"rule":"1px solid",
"code_radius":"18px",
"accent_bar":"3px"
},
"shadow": {
"sheet":"0 1px 1px rgba(0,0,0,.02),0 6px 26px rgba(0,0,0,.05)",
"widget":"none",
"card_hover":"0 10px 28px -16px rgba(28,27,23,0.35)"
},
"motion": {
"hover":"160ms ease"
}
}
},
"page":"http://google-preview.miscsubjects.com/a/cloudflare-os-xl-05-media",
"json":"http://google-preview.miscsubjects.com/a/cloudflare-os-xl-05-media.json",
"markdown":"http://google-preview.miscsubjects.com/a/cloudflare-os-xl-05-media.md",
"theme":"http://google-preview.miscsubjects.com/article-theme.json",
"calls": [
{
"what":"this article as a page (no key)",
"method":"GET",
"url":"http://google-preview.miscsubjects.com/a/cloudflare-os-xl-05-media",
"headers": {}
},
{
"what":"this article as its object (no key)",
"method":"GET",
"url":"http://google-preview.miscsubjects.com/a/cloudflare-os-xl-05-media.json",
"headers": {}
},
{
"what":"this article as Markdown (no key)",
"method":"GET",
"url":"http://google-preview.miscsubjects.com/a/cloudflare-os-xl-05-media.md",
"headers": {}
},
{
"what":"the object with its hash, drafts too",
"method":"GET",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cloudflare-os-xl-05-media",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)"
}
},
{
"what":"one piece and that piece’s hash",
"method":"GET",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cloudflare-os-xl-05-media/at?path=facts",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)"
}
},
{
"what":"grep: every key or value that matches, with the path to change it",
"method":"GET",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cloudflare-os-xl-05-media/grep?q=owner",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)"
}
},
{
"what":"change pieces (set, merge, delete, append, insert, move); if-match is the hash",
"method":"PATCH",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cloudflare-os-xl-05-media",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)",
"content-type":"application/json",
"if-match":"<hash from the read>"
},
"body": {
"ops": [
{
"op":"set",
"path":"facts.example",
"value":1
}
]
}
},
{
"what":"replace the whole object",
"method":"PUT",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cloudflare-os-xl-05-media",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)",
"content-type":"application/json",
"if-match":"<hash>"
},
"body": {
"slug":"cloudflare-os-xl-05-media",
"title":"…"
}
},
{
"what":"fetch every source, hash what came back and check the quote is in it",
"method":"POST",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cloudflare-os-xl-05-media/verify",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)",
"content-type":"application/json"
},
"body": {}
},
{
"what":"an Obsidian-style command",
"method":"POST",
"url":"http://google-preview.miscsubjects.com/api/jarticles/cli",
"headers": {
"x-sheets-key":"$(cat /Users/cyrusmassoumi/.misc-sheets-key)",
"content-type":"application/json"
},
"body": {
"command":"backlinks",
"file":"cloudflare-os-xl-05-media"
}
}
]
}
