The Tao of the Moving Image · Rubén Vega Balbás, PhD · UDIT, University of Design, Innovation and Technology

WEB ATELIER (UDIT) · Learning by doing, with theory, practice and shared reflection

The Tao of the Moving Image

By Rubén Vega Balbás, PhD 2026-01-02

URL: https://ruvebal.github.io/web-atelier-udit/lessons/en/media/video/the-tao-of-moving-images/

📋 Table of Contents

The Tao of the Moving Image

In the ancient scrolls of web development, there exists a sacred text known as 'The Tao of the Developer'—a collection of paradoxical wisdom passed down through generations of code warriors. This chapter, dedicated to the art of motion and time, reveals the eternal truths about video in the digital realm.

Introduction

These words come from “The Tao of the Developer”, a philosophical guide to the art of web development. This particular collection of wisdom focuses on the sacred path of moving images in web design—a subject that has confounded many a developer and delighted many a user when done with mastery.

The ancient masters of web development understood that video is not merely moving pictures, but a force that can either transport the user to enlightenment or trap them in a loading screen for eternity. Through paradox, koan, and practical wisdom, they revealed the path to video enlightenment.

May these teachings guide you toward the harmonious balance between motion and stillness, between bandwidth and beauty.

📜 The Ancestral Lineage

This collection of wisdom exists within a greater tradition—a pedagogical lineage that traces its roots to the foundational text of computational philosophy: The Tao of Programming, translated by Geoffrey James.

In the evolution of this wisdom tradition, we witness a natural progression:

  1. The Tao of Programming (circa 1980s) — The original text, speaking to the universal truths of software development, algorithms, and the relationship between programmer and machine.

  2. The Tao of the Developer — The evolution from programming to web development, acknowledging that the modern developer works not only with code but with the web as a medium, balancing technical excellence with user experience, accessibility, and ethical considerations.

  3. The Tao of the Moving Image — This specialized chapter, focusing on the sacred path of video in web design, where motion meets meaning, where bandwidth meets beauty, where time itself becomes a design element.

  4. The Tao of AI Development — A specialized chapter, focusing on the sacred path of machine-assisted creation, where artificial intelligence meets human wisdom, where generation meets understanding, where the future of human-machine collaboration is written in every prompt, every commit, every choice. See The Tao of AI Development.

This lineage represents more than mere adaptation—it is the continuation of a pedagogical tradition that uses paradox, koan, and practical wisdom to illuminate the deeper truths of our craft. Just as the original Tao of Programming spoke to the relationship between programmer and machine, these teachings speak to the relationship between developer, medium, and user.

The wise programmer is told about Tao and follows it. The average programmer is told about Tao and searches for it. The foolish programmer is told about Tao and laughs at it. If it were not for laughter, there would be no Tao.

&mdash; <cite><a href="https://www.mit.edu/~xela/tao.html">The Tao of Programming, Book 1.4</a></cite>

We honor this ancestral wisdom and continue its tradition, adapting its timeless principles to the ever-evolving landscape of web development.

🎬 The Tao of the Moving Image: Revealed Wisdom

On Video Optimization

  1. “The longest video loads instantly when never played. The shortest video crushes the user when poorly encoded.”

  2. “Master Chen encoded a 500MB video to 5MB. His student asked: ‘Did you lose quality?’ Chen replied: ‘I lost only what the eye could not perceive and the network could not deliver.’“

  3. “The wise developer serves ten video formats. The enlightened developer serves only what the browser requests. The master serves AV1 to the future and H.264 to the present.”

  4. “Compress not for the screen you see, but for the connection you cannot measure.”

  5. “A 4K video on a 3G connection is not ambition—it is cruelty against the user’s patience.”

On Autoplay and Control

  1. “Autoplay without sound is respect. Autoplay with sound is assault. The user who does not choose to hear does not consent to hear.”

  2. “The student asked: ‘Should I autoplay?’ The master showed him a page with three autoplaying videos. The student’s speakers screamed. The master said: ‘You have your answer.’“

  3. “The video that plays without permission is like a guest who enters without knocking. Even if welcome, the intrusion is remembered.”

  4. “Give the user a pause button. Give them a mute button. Give them control. This is the three-fold path to respect.”

On Captions and Accessibility

  1. “A video without captions is a locked door to the deaf user. You would not build a website with only locked doors.”

  2. “The caption that says ‘[music playing]’ is better than no caption. The caption that says ‘video’ is worse than silence.”

  3. “Write captions for your grandmother who cannot hear. Write them for the search engine that cannot hear. Write them for yourself when the audio fails.”

  4. “Captions are not optional—they are essential. The video that speaks only to the hearing speaks to half the world.”

On Performance and Loading

  1. “Load what is seen. Defer what is hidden. The page that loads all videos loads no video fast.”

  2. “The student said: ‘My videos look beautiful!’ The master checked the Network tab and said: ‘Your users have left before seeing them.’“

  3. “Preload metadata, not megabytes. The user who waits for metadata is patient. The user who waits for megabytes is gone.”

  4. “Lazy loading is not laziness—it is wisdom. Load the video when the user is ready, not when the page is ready.”

On Responsive Video

  1. “Serve a 1920px video to a 375px phone, and the gods of bandwidth will curse your house for seven generations.”

  2. “One video for all screens is like one story for all ears. It fits no one perfectly and everyone suffers.”

  3. “The master writes: <video><source media="...">. The novice writes: <video src="huge-video.mp4">. The user pays the price.”

  4. “Aspect ratio is not decoration—it is respect. Respect for the mobile user’s screen. Respect for the desktop user’s viewport.”

On Video Formats

  1. “MP4 for compatibility, WebM for openness, AV1 for the future. Know the nature of each, and choose with wisdom.”

  2. “The animated GIF masquerading as video is the drunk uncle at the wedding: sometimes entertaining, often embarrassing, always taking up too much space.”

  3. “H.264 is the past. AV1 is the future. VP9 is the bridge. The master serves all three, and the browser chooses wisely.”

On Background Video

  1. “The background video that obscures the text is like a painting that blocks the door—beautiful, but fundamentally misunderstanding its purpose.”

  2. “Background video must be silent. Background video must be short. Background video must be optional. This is the three-fold law.”

  3. “The hero video that autoplays is not a hero. It is a 10MB obstacle between the user and their goal.”

  4. “Give the user a pause button for background video. Some users find motion uncomfortable. Respect their preference.”

On Third-Party Embeds

  1. “The YouTube embed that loads 1MB of JavaScript is not free—it costs the user’s time and data.”

  2. “Self-host when privacy matters. Use platforms when convenience matters. Know the difference, and choose with wisdom.”

  3. “The facade pattern is not deception—it is respect. Show the thumbnail, load the player on demand. This is the way.”

On Accessibility & Ethics

  1. “The deaf user cannot hear your video, but they can read it through captions. Write clearly. Write truthfully. Do not say ‘video123.mp4’.”

  2. “The video without a pause button is not engagement—it is imprisonment. The user must always have control.”

  3. “Respect prefers-reduced-motion. Some users find motion uncomfortable. Your video is not worth their discomfort.”

🎭 Bonus: The Paradoxical Truths

  1. “The perfect video is often no video at all. Sometimes a still image tells the story better.”

  2. “Compress until it hurts. Then compress more. The user will never complain about a video being too fast.”

  3. “The developer who uses preload="none" has learned. The developer who uses preload="metadata" has understood. The developer who questions whether the video should exist has achieved enlightenment.”

  4. “Your hero video is not a hero. It is a 10MB obstacle between the user and their goal.”

  5. “The ancient masters said: ‘Content is king.’ The modern web has forgotten. Videos have become the tyrant, and content serves at their pleasure.”

📜 The Three Eternal Laws of Video

Law of Lightness

“Every megabyte you send travels thousands of miles through cables under oceans. Respect the journey. Compress with wisdom.”

Law of Purpose

“A video without purpose is decoration. Decoration without restraint is distraction. Distraction is the enemy of meaning.”

Law of Accessibility

“The website that serves only the hearing serves only the half. The website that serves all serves the whole.”

🌅 The Final Koan

A student asked the master: “How do I know when my videos are optimized?”

The master replied: “Open your DevTools. Check your Network tab. If you see red, you have work to do. If you see green, you are learning. If you see nothing because you removed the videos entirely and used images, you have understood.

But if your users can accomplish their goals regardless of the videos, then you have achieved the Tao.”

For the Student to Contemplate

The way of the moving image is the way of balance. Too heavy, and the user departs. Too light, and meaning is lost. Too many, and the message drowns. Too few, and the page speaks in monotone.

Seek the middle path. Optimize with compassion. Code with wisdom. Test with humility.

This is the Tao of the Moving Image. 🎬

May your students find enlightenment in the <video> tag, and may their Lighthouse scores be ever green. ✨

Source: The Tao of the Developer - Chapter on Moving Images Ancestral Text: The Tao of Programming by Geoffrey James Transcribed by: The Digital Scribes For: Students seeking the path of web video mastery