HTML is a native image format, hear me out

yeargun

## What's an image We consider rasters as image (.jpeg, .webp, ..) We also invented svgs, its a vector. SVG is a declarative language, has its own format and has own renderer HTML, CSS is no different. `<div style="background:black">html is underdog</div>` Having this perspective on our mind, even considering any imperative code as a native image makes complete sense. `canvas.drawCircle();` So, .html/.hmml/.js is as image as .webp ==== ## How can we/future's genAI models could leverage the world's most popular and feature rich image format (HTML, CSS, JS, SVG, IMAGE altogether). And how can we leverage it to build editable/composable images? This so to 'popular' image format we call .html has a caveat. It's UTF-8, and whenever you need to embed any resource, you either need to base64 encode it(it has extra size overhead) or link the resource as a seperate thing. So.. as you decide to serve single pack of data for a single image, a binary packing strategy makes sense.(Image can be anything as we discussed earlier) To match these concerns, we created/proposing you a new format, HMML (HyperMedia Markup Language). HMML (HyperMedia Markup Language) is a declarative+imperative markup+ language for images/videos/media.. *HMML is HTML, CSS, JS, SVG, image, but not UTF-8.* https://hmml.eddocu.com and we have a npm library that does encode/decode of this binary format, and mounts the so to image into dom. (2kb js for encode/decode each. For comparison React is 90kb js. ) `npm i @eddocu/hmml` # image-leftdog-rightcat.html ``` <div style="display:flex"> <img src="base64" alt="i am dog image" /> <img src="base64" alt="i am cat image" /> </div> ``` Apart from doing this, hmml does embed the html, css, js blueprint into media binaries # image-leftdog-rightcat.hmml `binary stuff` People already do similar things. But this format or POV of thinking accepts html/css/js as a native image format. Excited to see if future operating systems/browsers also accepts this format. <hmml /> or <img src="maybe.hmml" /> === ``` <Technical-Appendix> The word "green apple" is an image, that has no format and no renderer. `const vectorMultiDimensional_768 = get_word_embeddings("green apple")` Now the word green apple has a format, its: "embedded by Embedding Model X" If you had a renderer as such Embedding_Model_X.render() Now you could call entire english sentences/paragraphs are images. </Technical-Appendix> ``` bs or not. what you think?

plating1

wait this is actually kinda brilliant in a weird way like when you think about it we're already doing this with svg and nobody bats an eye. svg is literally xml markup that renders as an image and everyone just accepts it as normal also the composability angle is interesting. being able to edit an "image" by just opening it in text editor instead of photoshop has some appeal

webdevnotlame

that sounds interesting but can't find clear use cases

c048

You can also paint by squashing flies against a wall. Doesn't mean it's a good, or efficient, idea.

beardyw

Isn't this making HTML in some ways more like a PDF? Or am I missing the point?

TazeTSchnitzel

I would rather see native browser support for the familiar MHTML ( https://bugzilla.mozilla.org/show_bug.cgi?id=40873 ) than creating a brand new format that does the same thing. The AI slop homepage is really offputting too.

apt-apt-apt-apt

There's so much text but nothing that clearly says what it is. Is it HTML and its contents (e.g. images) in a binary format?

blixt

If this shows itself to be highly useful as a concept, then I would perhaps avoid reinventing the wheel on the file format side of things, and just standardize what we already have: - Come up with a file extension (.hmml) - Decide on an entrypoint filename and format (index.html) - Use an existing standard for combining resources into one file (tar + zstd) Now you have something that is usable only using pre-existing tools.

mpeg

I don't understand the advantage of this vs an html file with embedded images, except the latter would work with no runtime.

wewewedxfgdf

This is the sort of weird thing I would come up with - a solution without a problem perhaps, but a magnificent testament to some technical itch that had to be scratched.

warpech

What wrong with inlining base64 in regular .html if you want it all in one file? Plus zipping that one file is you insist on a smaller file size

AbuAssar

this page failed to convey what exactly is the main pitch, is it a new image format? using html as image? rendering with canvas? I got lost

unleaded

https://www.nicovideo.jp/watch/sm2796083

ricardobeat

A vibe-coded, binary mashup of SMIL and web components. Interesting. If the goal is self-contained documents, is there anything here that can’t be achieved with SVG alone, using SMIL [1] and embedded HTML via <foreignObject>? Or an existing engine like Rive? [1] https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_...

chrismorgan

I’ll engage with the editorialised title (which will probably be changed soon), “HTML is a native image format, hear me out”: data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="100%25" height="100%25"> <div xmlns="http://www.w3.org/1999/xhtml"> Behold! </div> </foreignObject> </svg>

nobrains

That "view page source" took some loong time to load.

etiquette

> A real food-delivery page - markup, images & an SVG animation in one .hmml, 30% smaller than the same page as base64 Why the comparison with Base64 when Base64 itself has approximately 33% size overhead?

TZubiri

Not the first time I saw this Hero header with text that's being written in real time, which is very cute but actually causes the layout to change every second. I guess it happens when people vibecode and the llm generates code, and it cannot verify that the interface actually works well. Even with agents that use drivers either directly or through playwright/selenium, they might only see a single screenshot, so no video. Anyways, immediately stopped reading, as the new adage goes, why should I read something you weren't bothered to write?

t1234s

Looks like reinventing macromedia flash

G_o_D

Isnt MHTML : THE HTML+CSS WITH BINARY Images embedded.A perfect Snapshot of site. All we need is browsers to render Served MHTML And JS Support in MHTML