Convert Bitmap to HTML Table: Preserve Pixels as Table CellsConverting a bitmap image into an HTML table — where each pixel becomes a table cell — is an unusual but useful technique for teaching, experimentation, and certain retro or accessibility-driven designs. This article explains why you might do it, how it works, the steps and code to convert bitmaps to HTML tables, optimization tips, accessibility considerations, and practical use cases.
Why convert a bitmap to an HTML table?
- Educational value: Demonstrates how images are constructed from pixels and how web layouts work.
- Retro/novelty effects: Produces a pixel-art aesthetic using pure HTML/CSS without images or canvases.
- Data portability: Encoding pixel data into markup can make it simpler to embed tiny images in environments that disallow binary assets.
- Accessibility and progressive enhancement: In constrained or legacy environments where image rendering may fail, HTML tables might provide fallback visuals that remain readable.
How it works — the core idea
A bitmap image is a grid of pixels, each with color and possibly alpha. An HTML table can replicate that grid: each pixel maps to a
element whose background (or inner element) is styled with the pixel’s color. Key decisions:
- Represent each pixel as a single
or group pixels to reduce cell count.
- Use inline CSS styles or CSS classes for colors.
- Preserve alpha by blending against a background color or using rgba() if supported.
- Scale cells with CSS width/height to control pixel size.
Basic algorithm overview
- Load bitmap and obtain pixel array (width × height).
- For each row:
- Start a table row (
).
- For each pixel:
- Convert pixel color to a CSS color string (hex or rgba).
- Output a table cell (
) with inline style background-color.
- Close the row.
- Wrap rows in a
<table> with CSS to collapse borders and set cell dimensions.
Example implementation (JavaScript / Node.js)
Below is a straightforward Node.js script that reads a PNG (or other bitmap) using the sharp library, outputs an HTML file where each pixel becomes a table cell, and writes the result to disk.
// Requires: npm install sharp const fs = require('fs'); const sharp = require('sharp'); async function bitmapToHtmlTable(inputPath, outputPath, pixelSize = 8, background = '#ffffff') { const img = sharp(inputPath); const { width, height } = await img.metadata(); // Convert to raw RGBA pixel data const raw = await img.ensureAlpha().raw().toBuffer(); let html = []; html.push('<!doctype html>'); html.push('<html lang="en"><head><meta charset="utf-8">'); html.push(`<style> table { border-collapse: collapse; border-spacing: 0; } td { width: ${pixelSize}px; height: ${pixelSize}px; padding: 0; margin: 0; } </style>`); html.push('</head><body>'); html.push(`<table aria-label="Bitmap as table" role="img" style="background:${background}">`); for (let y = 0; y < height; y++) { html.push('<tr>'); for (let x = 0; x < width; x++) { const idx = (y * width + x) * 4; const r = raw[idx], g = raw[idx + 1], b = raw[idx + 2], a = raw[idx + 3]; // Convert to rgba(...) string; normalize alpha to 0..1 const alpha = +(a / 255).toFixed(3); const color = alpha === 1 ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},${alpha})`; html.push(`<td style="background:${color}"></td>`); } html.push('</tr>'); } html.push('</table></body></html>'); fs.writeFileSync(outputPath, html.join(' '), 'utf8'); } // Example usage: // bitmapToHtmlTable('input.png', 'output.html', 6);
Notes:
- Using
sharp simplifies reading many image formats and gives raw RGBA data.
- Inline styles per cell are simple but produce large HTML for big images.
- You can reduce output size by grouping identical adjacent colors into colspan/rowspan cells (see optimizations).
Example implementation (Python, Pillow)
# Requires: pip install pillow from PIL import Image def bitmap_to_html_table(input_path, output_path, pixel_size=8, background="#ffffff"): img = Image.open(input_path).convert("RGBA") width, height = img.size pixels = img.load() with open(output_path, "w", encoding="utf8") as f: f.write("<!doctype html> <html lang='en'><head><meta charset='utf-8'> ") f.write(f"<style>table{{border-collapse:collapse}}td{{width:{pixel_size}px;height:{pixel_size}px;padding:0}}</style> ") f.write("</head><body> ") f.write(f"<table role='img' aria-label='Bitmap as table' style='background:{background}'> ") for y in range(height): f.write("<tr>") for x in range(width): r, g, b, a = pixels[x, y] alpha = a / 255 color = f"rgb({r},{g},{b})" if alpha == 1 else f"rgba({r},{g},{b},{alpha:.3f})" f.write(f"<td style='background:{color}'></td>") f.write("</tr> ") f.write("</table> </body></html>") # Example: # bitmap_to_html_table('input.png', 'output.html', 6)
Optimizations to reduce HTML size
- Group consecutive same-color cells with colspan: merge horizontally identical pixels into a single
.
- Use CSS classes instead of inline styles: map frequent colors to classes (e.g., .c1 { background:#fff }), then assign class names to cells.
- Scale down the image before conversion for large bitmaps.
- Use data URIs for tiny images instead of tables in production.
- For transparency, precompose onto a background color to allow using hex codes instead of rgba.
Comparison of methods:
| Method |
Pros |
Cons |
| One
| per pixel (inline style) |
Simple, accurate per-pixel control |
Very large HTML for images >100×100 |
| Colspan merging |
Smaller HTML, preserves exact colors |
More complex algorithm to detect runs |
| CSS classes for colors |
Reduces repeated CSS text |
Slightly more complex mapping, still many elements |
| Precomposed background |
Simpler color specs |
Loses true alpha blending with varying backgrounds |
Accessibility and semantic considerations
- Add role=“img” and aria-label describing the image to help screen readers.
- Provide a textual alternative (caption, figcaption, or hidden text) summarizing the image content.
- Avoid using tables purely for layout in modern production sites — this technique should be treated as artistic/demo, not standard image delivery.
- Ensure contrast is considered if the table will be viewed in different background contexts.
Visual styling tips
- Use CSS to set table borders to none and remove spacing:
- table { border-collapse: collapse; }
- td { padding: 0; margin: 0; border: 0; }
- Control pixel appearance (sharp vs. softened) by choosing cell size and using CSS transform: scale() for zooming.
- To create crisp pixel-art, use even pixelSize (e.g., 6, 8) and avoid fractional scaling.
Use cases and examples
- Teaching raster graphics: let students inspect how images are built from pixels.
- Pixel art generators: allow users to edit images by clicking table cells.
- Environments that block external images: embed visual content as markup.
- Art projects and creative coding where HTML-only visuals are desired.
Limitations and when not to use this
- Not suitable for photographic images at full resolution — HTML becomes enormous and slow.
- CSS and DOM rendering of thousands of
| elements is inefficient compared to | | | | |