How Much Does Freedom Cost?  ## Metadata - Author: [[David Bushell]] - Full Title: How Much Does Freedom Cost? - Category: #articles - Document Note: ```markdown --- tags: [web performance, accessibility, governance] author: [David Bushell] source: [dbushell.com] reference: [https://dbushell.com/2025/09/22/cost-of-freedom/] date created: 2025-10-02 00:00 --- # 🏷️ Title: How Much Does Freedom Cost? ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - The article inspects trumpcard.gov’s implementation choices. - It argues the site wastes bandwidth and harms accessibility. - Stakeholders include users, government web teams, and hosting vendors. - Tradeoffs pit flashy UI against performance, cost, and equity. - Bottom line: use video with alpha or optimize assets instead. ## 📖 Main Content - The site animates an eagle head using 579 PNG frames totaling 16.7 MB. - Frames load via a worker, cache storage, and blob URLs. - The head could crop to 400x400 and compress with AVIF. - Author proposes video with alpha (WebM VP9; HEVC for Safari). - Test shows 500–800 KB results, a huge reduction. - The critique includes governance and accessibility concerns. ### 🗒️ Notes ### [H1] PNG frame animation inflates page weight > [!quote] [How Much Does Freedom Cost?](https://dbushell.com/2025/09/22/cost-of-freedom/) by [[David Bushell]] via [[dbushell.com]]. Published 2025-09-22. Accessed 2025-10-02. > “This side-eying American Bald Eagle is a 579 frame animation... total size of these PNG files is 16.7 megabytes.” Large sprite-driven animations cost bandwidth and degrade UX at scale. [view highlight](https://dbushell.com/2025/09/22/cost-of-freedom/) #xref #articleseed ID:rw_366525334_0 ### [H2] Worker and CacheStorage drive blob-URL frames > [!quote] [How Much Does Freedom Cost?](https://dbushell.com/2025/09/22/cost-of-freedom/) > “PNG frames are requested by a Web Worker and saved using the CacheStorage API... returns blob: URLs for each frame.” Complex delivery stacks add failure modes and memory pressure. [view highlight](https://dbushell.com/2025/09/22/cost-of-freedom/) #xref ID:rw_366525334_0b ### [H3] Cropping and AVIF reduce file size > [!quote] [How Much Does Freedom Cost?](https://dbushell.com/2025/09/22/cost-of-freedom/) > “A quick crop and squoosh suggests a 20% saving... AVIF would allow for 50–80% smaller images.” Image discipline beats brute force assets for UX and cost. [view highlight](https://dbushell.com/2025/09/22/cost-of-freedom/) #xref #articleseed ID:rw_366525334_1 ### [H4] Video with alpha slashes payload size > [!quote] [How Much Does Freedom Cost?](https://dbushell.com/2025/09/22/cost-of-freedom/) > “WebM/VP9 works in Chrome and Firefox and HEVC works for Safari/iOS... 500–800 KB depending on codec and quality.” Alpha video preserves design while shrinking bytes dramatically. [view highlight](https://dbushell.com/2025/09/22/cost-of-freedom/) #xref #articleseed ID:rw_366525334_2 ### [H5] Muted autoplay enables cross-browser behavior > [!quote] [How Much Does Freedom Cost?](https://dbushell.com/2025/09/22/cost-of-freedom/) > “Using the muted HTML attribute allows autoplay to work in most browsers.” Small HTML attributes improve reliability without scripts. [view highlight](https://dbushell.com/2025/09/22/cost-of-freedom/) #xref ID:rw_366525334_2b ### [H6] Governance and accessibility are deprioritized > [!quote] [How Much Does Freedom Cost?](https://dbushell.com/2025/09/22/cost-of-freedom/) > “The US government had digital service agencies that cared about a performant and accessible web until they got the DOGE treatment.” Policy shifts can erase prior accessibility gains quickly. [view highlight](https://dbushell.com/2025/09/22/cost-of-freedom/) #xref #share ID:rw_366525334_0c ## 📚 References - AVIF overview (Mozilla MDN): https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif - WebM/VP9 with alpha (Chromium): https://www.chromium.org/audio-video/alpha_video/ - HEVC with alpha support notes (Apple): https://developer.apple.com/documentation/avfoundation/avvideocodecTypeHEVCWithAlpha - CSS-Tricks on alpha video: https://css-tricks.com/adding-shape-overlays-and-transparency-to-html5-video/ - Jake Archibald on video formats: https://jakearchibald.com/2023/video-formats/ ## 🗣️ Paraphrase - The site uses heavyweight PNG animation for an eagle head, harming performance. - Replace it with cropped AVIF or alpha video to cut size and complexity. ## 📰 Newsletter - A new teardown shows trumpcard.gov shipping a 16.7 MB eagle animation. - Swap 579 PNGs for alpha video at 500–800 KB. - WordPress folks: apply AVIF, responsive images, and preloading best practices. - Links: AVIF on MDN, alpha video guides, and performance checklists. ## ✅ Action Items #### DevRel - Publish demo: PNG frames vs alpha video with metrics. #articleseed - Run workshop on image formats and autoplay ergonomics. #articleseed - Add DX samples for <video> with alpha fallbacks. #xref - Create perf checklist for hero animations. #articleseed - Survey devs about media pipelines and constraints. #share #### OSPO - Draft media policy: formats, budgets, and approvals. #addendum - Add CI checks for total media weight. #xref - Train teams on accessibility focused media choices. #share - Define exception process for heavy assets. #governance - Report media KPIs quarterly to execs. #xref #### Community - Host clinic on accessible motion and prefers-reduced-motion. #share - Build paired reviews for hero animations before launch. #xref - Publish case study with byte and LCP deltas. #articleseed #### WordPress - Core: document alpha video support patterns. #xref - Performance: add AVIF defaults and quality presets. #articleseed - Training: lesson plan on media tradeoffs and a11y. #share - Themes: starter pattern for hero video with fallbacks. #articleseed - Plugins: lint for over-sized image sequences. #xref - Accessibility: guidance on motion and captions for video UI. #xref #### The WPCC - Fund microgrants for a11y-first media tooling. #articleseed - Publish governance templates for media budgets. #addendum - Run doc sprints on motion accessibility patterns. #share ### FAIR - Define transparency policy for asset costs and telemetry. #addendum - Provide reproducible audits and signature checks for media. #xref - Ship operator agreement templates for perf budgets. #articleseed ## 🧪 Hypotheses - Alpha video achieves ≥90% byte reduction vs PNG frames. - Cropped AVIF reduces size ≥50% with minimal quality loss. - Muted autoplay increases reliability across major browsers. - Heavy hero media worsens LCP and increases bounce rate. ### 📊 Methodology - Build three variants: PNG frames, AVIF sequence, alpha video. - Measure bytes, LCP, CLS, CPU, memory on mobile and desktop. - Run A/B tests for engagement and bounce on real traffic. - Evaluate accessibility with screen readers and motion preferences. ### ❓ Questions - What alpha video fallback strategy best fits Safari constraints? - How do media budgets integrate with editorial workflows? - Which WordPress tooling should enforce media guardrails? ### 🔮 Future Research - Compare AV1 alpha readiness and tooling maturity. - Study motion accessibility impacts on conversion. - Explore server hints for media negotiation at scale. ### 💡 Implications - Strong media policies reduce costs and improve inclusion. - WordPress ecosystems can standardize safer hero patterns. - Governance prevents regression during political shifts. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch-Kincaid Grade ≈ 9–10. #### 👀 Visual learners - Present: c - Summary: The one where I inspect the source - URL: https://dbushell.com/2025/09/22/cost-of-freedom/ Trump’s [National Design Studio](https://ndstudio.gov/) has an [executive order](https://americabydesign.gov/) to *“modernize the interfaces that serve everyday citizens”*. That means rich/white people (but not the ‘disabled’ kind). The US government had [digital service agencies](https://ethanmarcotte.com/wrote/a-notional-design-studio/) that cared about a performant and accessible web until they got the [DOGE treatment](https://en.wikipedia.org/wiki/18F#Mass_firings_and_elimination). The NDS’ latest website [trumpcard.gov](https://trumpcard.gov/) is a [Next.js disasterclass](https://infrequently.org/2024/10/platforms-are-competitions/#fn-failure-on-repeat-2). Vercel’s CEO [Guillermo Rauch](https://bsky.app/profile/philhawksworth.dev/post/3lzee26lse22g) thinks an endorsement by a friend of Epstein is… a good thing? Anyway, Trump invites you to “Submit Your Appl 🦅 tion”. © Copyright United States government This side-eying American Bald Eagle is a 579 frame animation. Each frame is a 1671×1300 pixel PNG weighing on average 30 KB each. Frames 261 through 320, where the eagle is looking straight forward, are replaced by frame 320 to save bandwidth. Despite this valiant effort the total size of these PNG files is **16.7 megabytes**. PNG frames are requested by a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) and saved using the [CacheStorage](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage) API. The worker returns [`blob:` URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/blob) for each frame. The [React](https://jsx.lol) `useEffect` hook is used ([very carefully](https://blog.cloudflare.com/deep-dive-into-cloudflares-sept-12-dashboard-and-api-outage/#what-happened)) to trigger `requestAnimationFrame` to update an `img` elements source. ``` <img alt="Eagle animation frame" src="blob:https://trumpcard.gov/5cd1fa4e-72ea-4c6e-babe-332602533c17"> ``` And that is how you get 16.7 MBs of freedom. Alternate text is seemingly used as a comment for developers. #### Optimisations Eagle-eyed readers will have noticed the eagle’s body is a static image. The PNG frames only contain the head which is no larger than 400×400 in the centre. A quick crop and [squoosh](https://squoosh.app/) suggests a 20% saving with no quality loss. Using a lossy codec like AVIF would allow for anywhere between 50–80% smaller images with little perceptual quality loss. #### Just use a video? I’m guessing the animation trickery is done to superimpose the eagle over the text “Submit Your Application”. Is it worth the cost? No. Just use a video! You could just make the entire thing a video including the text (like my screen recording above). This would limit the responsive design and the initial text transition but would be much smaller than 16.7 MB. To retain separation of elements a video codec with alpha transparency can be used (see [CSS-Tricks](https://css-tricks.com/overlaying-video-with-transparency-while-wrangling-cross-browser-support/#aa-creating-a-transparent-video), [Jake Archibald](https://jakearchibald.com/2024/video-with-transparency/)). WebM/VP9 works in Chrome and Firefox and HEVC works for Safari/iOS. A quick test returns 500–800 KB depending on codec and quality. © Copyright United States government ``` <video autoplay loop muted playsinline preload="metadata" aria-label="whatever"> <source src="eagle-head.mov" type="video/quicktime"> <source src="eagle-head.webm" type="video/webm"> </video> ``` Using the `muted` HTML attribute allows `autoplay` to work in most browsers. These are rough numbers but suffice it to say a PNG based animation is *expensive*. Then again, if you’re in the market for a $1 million dollar card you can probably afford this too. Decapitating America’s “national bird” is not the only sin committed by the National Design Studio. Trump’s gold card website is a treasure trove of bad development. View source and see what fun you can find. And remember, for facist-friendly hosting™, think Vercel., How Much Does Freedom Cost?, David Bushell, 01k6jcdeertn6tc6t67xhqd64s.