Live data from Hacker News

HTML is a native image format, hear me out

hmml.eddocu.com

51–60 of 64 posts

Re: HTML is a native image format, hear me out

#51
post #42

> 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?

A: I want to serve html with images all in single pack You have 2 options. - Embed images into html (base64, size overhead) - embed html/css/js into media binaries .hmml is the packing strategy for option two. 2kb js for encode/decode. And extra rantings around what a 'digital image' is

If you compress the HTML, which you want to do anyway for HTML/CSS if you care about file sizes, then most of the base64 overhead goes away:

    $ head -c 1000000 /dev/urandom | base64 -w0 | gzip | wc -c
    1009042

    $ head -c 1000000 /dev/urandom | base64 -w0 | zstd | wc -c
    1000300
So gzipped base64 can add less than 1% overhead. Of course a binary format can be even more efficient (also when decoding, I imagine) but the question is if the difference is big enough to introduce an entirely new format when base64 data URIs are already widely supported.

Then the other question is why this proposed packed format is better than the dozen already existing formats like Web Archive, CHM, MAFF, MHTML, etc.

Re: HTML is a native image format, hear me out

#52
post #50

Earlier quoted context omitted.

That's pretty much what I was thinking too. "A way to create an image, with parts that can be edited using tags, that an LLM can deal with... this sounds like SVG"

yes but not every image/visual is efficiently representable with svgs. sometimes we need rasters

Luckily, you can embed raster images inside SVGs https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

Re: HTML is a native image format, hear me out

#54
post #42

> 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?

A: I want to serve html with images all in single pack You have 2 options. - Embed images into html (base64, size overhead) - embed html/css/js into media binaries .hmml is the packing strategy for option two. 2kb js for encode/decode. And extra rantings around what a 'digital image' is

There is a third option:

- Save the page as a self-extracting ZIP file, see https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG

Re: HTML is a native image format, hear me out

#55

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, Behold!

That's pretty much what I was thinking too. "A way to create an image, with parts that can be edited using tags, that an LLM can deal with... this sounds like SVG"

In case you missed it—I’m not showing regular SVG, I’m showing using HTML as an image, via an SVG container. This has worked fine in browsers for more than ten years (around twenty, other than IE/Edge).

Re: HTML is a native image format, hear me out

#56

Opened. Had some typing animation make the page jump around because the text would switch between one and two lines. Closed the slop. The frequency of these things certainly rose with AI.

Slop :D

can you revisit please? What browser are you using ?

The library is not curing cancer And also it's the first time im hearing that its not working.

My goal was to discuss the meaning of what a 'digital image' is.. You can also take a look at this https://www.reddit.com/r/Design/s/7KLKg3wS0D

Re: HTML is a native image format, hear me out

#57

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 ? Or an existing engine like Rive? [1] https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_...

hey, yes.

1- html/css has more layout capabilities. 2- js 3- its a packing strategy. If you plan to serve images + svgs altogether, either you need to base64 encode or pack like hmml, binary

Re: HTML is a native image format, hear me out

#58
post #50

Earlier quoted context omitted.

yes but not every image/visual is efficiently representable with svgs. sometimes we need rasters

Luckily, you can embed raster images inside SVGs https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

yeah but you know.. it needs to be either base64 or a link

thats why .hmml is a packing strategy to mitigate that, single pack

Re: HTML is a native image format, hear me out

#59
We already have iframe and the srcdoc attribute which you can set directly to the document contents without pointing to an external url. So there's nothing new about that. This is primarily about serializing page content more efficiently than the naive approaches.

Advertisements are also generally content in iframes. The only difference here really is that you want the content to be blobs and embedded in the page rather than needing to be loaded from a URL.

You can design websites to be modular even without iframes or without this and many are. One thing to note is that looking at your website, you basically can't tell it apart from any other website. Because websites already effectively manage essentially the same result, but with assets shared across more of the page usually.

The point seems to be, a push to increase the adoption of a combined modularized serialized content approach beyond any scenarios where it's already used, to more closely tie the rich behaviors and the media itself into a single file.

Trust me, I get it. Macromedia Flash was neat. It was nice to have these modular little animation machines you could plop anywhere in a page and it was its own little world. An encapsulation that stood apart, but played nicely together with the rest of it. You also see something similar with the javascript flash players, or with the javascript decoders for image formats that web browser didn't support yet, they have to read the raw bytes and feed the image to the browser.

It's also similar to the difference between local variables and global variables in code. Yes, global variables can be reused a lot and there is some efficiency to be gained there in cases, but you can also simplify side effects by using local variables where you know exactly what can and cannot happen.

I don't think you need to present it as a new paradigm that defines the future on top of what already exists, because this isn't exactly new.

There are a few obvious issues, though. One is that you'll still have to do something about the content security headers and make sure any code inside the blob is allowed to run or even if its safe to run. The fact that it's harder to inspect in its serialized form can increase the amount of effort involved in evaluating whether you want to use it. It's also more effort to swap the content inside of it out, which is actually a cost you pay in making your content less modular at a lower granularity. That makes it less mindlessly plug and play compared to a regular image or video, but it might not be too much extra trouble.

Another is that it does not degrade nicely if javascript is disabled entirely and probably doesn't help search engines find your content. Having to support a fallback would negate a lot of the purpose of doing it at all outside of offline self contained simplicity scenarios.

Trust is a bigger issue now than before and this still comes across as an unnecessary hack that has specific use cases (which can be great), but it's being branded as if it should be generally applied as widely as images. I disagree with that.

I like modularity, so if this gets some people to pick it up as a tool to solve their modular problems that's great. Not sure this would be good for the web if it scaled up, though. For offline scenarios however, things like this are great, but the base64 savings there matter less anyway.

Re: HTML is a native image format, hear me out

#60
post #54
post #42

Earlier quoted context omitted.

A: I want to serve html with images all in single pack You have 2 options. - Embed images into html (base64, size overhead) - embed html/css/js into media binaries .hmml is the packing strategy for option two. 2kb js for encode/decode. And extra rantings around what a 'digital image' is

There is a third option: - Save the page as a self-extracting ZIP file, see https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG

GGs on the library

.hmml might be more hassle free then zip options for web apps. With zips, I think it will require more js bundle & processing to work.

meanwhile with .hmml, its already gzip/br compressed in cdns, and decoded natively by the browser

Post reply on HN