The Tao of Web Images · 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 Web Images

By Rubén Vega Balbás, PhD 2025-01-15

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

📋 Table of Contents

The Tao of Web Images

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 web design, reveals the eternal truths about images 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 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 images are not merely decorative elements, but powerful forces that can either elevate the user experience or crush it beneath the weight of unoptimized bytes. Through paradox, koan, and practical wisdom, they revealed the path to image enlightenment.

May these teachings guide you toward the harmonious balance between visual beauty and technical excellence.

📜 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 Web Images — This specialized chapter, focusing on the sacred path of images in web design, where visual beauty meets technical optimization, where pixels meet purpose.

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. — The Tao of Programming, Book 1.4

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

🌸 The Tao of Web Images: Revealed Wisdom

On Image Optimization

  1. “The heaviest image weighs nothing when never loaded. The lightest image crushes the user when poorly placed.”

  2. “Master Li compressed a 5MB image to 50KB. His student asked: ‘Did you lose quality?’ Li replied: ‘I lost only what the eye could not see and the network could not bear.’“

  3. “The wise developer serves ten image formats. The enlightened developer serves only what the browser requests. The master serves WebP to Chrome and JPEG to the past.”

  4. “Optimize not for the device you hold, but for the connection you cannot see.”

  5. “A 4K image on a 320px screen is not luxury—it is violence against the user’s data plan.”

On Lazy Loading

  1. “Load what is seen. Defer what is hidden. The page that loads everything loads nothing fast.”

  2. “The student asked: ‘Should I lazy load?’ The master showed him a page that loaded 100 images at once. The student’s browser wept. The master said: ‘You have your answer.’“

  3. “The image below the fold does not exist until the user scrolls. Why then do you make it exist at page load?”

  4. “Eager loading is greed. Lazy loading is wisdom. But loading nothing is enlightenment—question whether the image serves a purpose.”

On Alt Text

  1. “An image without alt text is a locked door to the blind user. You would not build a website with only locked doors.”

  2. “The alt text that says ‘image’ is worse than no alt text. It is a sign that points to itself.”

  3. “Write alt text for your grandmother who cannot see. Write it for the search engine that cannot see. Write it for yourself when the image fails to load.”

  4. “Decorative images speak in silence: alt=’’. Content images must sing their purpose aloud.”

On Responsive Images

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

  2. “The srcset is not complexity—it is respect. Respect for the mobile user’s data. Respect for the desktop user’s screen. Respect for the device you have not yet imagined.”

  3. “One image for all screens is like one shoe size for all feet. It fits no one perfectly and everyone suffers.”

  4. “The master writes: <img srcset='...' sizes='...' />. The novice writes: <img src='huge-image.jpg' />. The user pays the price.”

On Image Formats

  1. “PNG for transparency, JPEG for photos, SVG for logos, WebP for the future. Know the nature of each, and choose with wisdom.”

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

  3. “SVG scales infinitely, yet weighs less than a single JPEG pixel. This is the paradox of vector over raster.”

On Performance

  1. “The fastest image to load is the image not loaded. Question whether the hero needs to be a hero image.”

  2. “Preload the critical. Defer the decorative. Remove the unnecessary. This is the three-fold path to enlightenment.”

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

  4. “A 3-second load time is not slow because of technology—it is slow because of your images. The server is blameless; the developer is not.”

On Design Philosophy

  1. “Use images to enhance the message, not to be the message. Words remain when images fail.”

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

  3. “Fifteen stock photos of diverse people pointing at laptops do not make your website diverse. They make it a cliché.”

  4. “The logo need not be large. The sun is distant yet illuminates all.”

On Accessibility & Ethics

  1. “The visually impaired user cannot see your images, but they can hear them through alt text. Speak clearly. Speak truthfully. Do not say ‘image123.jpg’.”

  2. “Autoplay video is not engagement—it is assault. The user who does not choose to hear does not consent to hear.”

🎭 Bonus: The Paradoxical Truths

  1. “The perfect image is often no image at all. CSS can draw circles, gradients, and shadows. Why burden the network with what the browser can paint?”

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

  3. “The developer who uses <img loading='lazy'> has learned. The developer who uses loading='eager' has understood. The developer who questions whether the image should exist has achieved enlightenment.”

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

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

📜 The Three Eternal Laws

Law of Lightness

“Every byte you send travels thousands of miles through cables under oceans. Respect the journey.”

Law of Purpose

“An image without purpose is decoration. Decoration without restraint is clutter. Clutter is the enemy of meaning.”

Law of Accessibility

“The website that serves only the sighted 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 images 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 images entirely and used CSS, you have understood.

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

For the Student to Contemplate

The way of the 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 Web Images. 🌸

May you find enlightenment in the <img> tag, and may their Lighthouse scores be ever green. ✨

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